從HTML5到jQuery

訊光科技 / 高志明
 

前言

            甚麼是下一代Web的技術標準，在這個高度手機平板化的科技時代中，可能大家會喊出就是HTML5吧？沒錯，這個話題在市場上也吵了長達4、5年之久，就在去年微軟中止Silverlight的後續研發後，終於塵埃落定。這並不是意味著Silverlight或Flash不好用，不受使用者青睞，而主要原因就是跨平台的能力上，這幾年iPad與iPhone大賣，人手幾乎一機情況下，Apple公司策略性的不肯讓步Silverlight與Flash在ios上支援，就註定了Silverlight與Flash要被市場漸漸淡忘。 

WEB的領域發展多年，從網站開始到Web Base的應用軟體，最後到手機與個人設備上可以執行，從HTML 1.0開始到最新的 HTML 5.0歷經了25年光陰，當然WEB的發展對於國人來說也是短短的十餘年，整個過程變化非常大，很多同業先進與筆者一樣，這25年歷經了DOS到Windows，又從Windows到Web，軟體技術瞬息萬變有如物換星移，幾乎每隔幾年研發的技術都要重來一遍。但對於HTML的發展倒是相對的緩慢與穩定，更重要的就是相容性與跨越設備的能力，成功絕非偶然，HTML5也就在這種市場氛圍下脫穎而出。

甚麼是HTML5

HTML 5並非僅僅用來表示Web內容，它也是將Web帶入一個全新且成熟的應用平台，它將視頻，音訊，圖像，動畫，以及與服務端的交互都標準化了。HTML5的優點很簡單，跨平台與簡化語法增加組件，能讓開發更容易些，開發者總是希望用一種語言就可以在不同的設備機器上都可以呈現，並希望在頁面上寫得更少的Script。隨著W3C於去年底正式將HTML5的候選版(Candidate Recommendation)正式定稿之後，HTML5從此將一統天下，成為未來網頁的新標準，全世界所有設備上的瀏覽器也將以此為相容標準。

 HTML5現況

但是，HTML5並非萬靈丹，也不是在一片看好聲中大量被引用，就以全世界最大的社群網站FACEBOOK來說，去年才宣告中止HTML5在手機與平板上的研發計畫而改以Native方式取代HTML5，主因是速度太慢，畢竟在想要用一套網頁程式去面對所有的設備與瀏覽器，在目前這個階段還是太天真的一點，每家瀏覽器對於HTML5的支援能力不盡相同，FACEBOOK的團隊更是在網頁呈現上吃足了苦頭。

 那想使用HTML5是否還要等等，除非考量老舊設備上的瀏覽器不一定有支援HTML5外，HTML5只是個網頁的超文字規格，多數的TAG還是與之前的HTML版本相容的，如果你是使用Visual Studio開發，是可以在VS2012或VS2010中上直接設定網頁的HTML版本，只是考量相容與標準之下，可以盡量少用HTML5新的TAG與功能，避開各瀏覽器相容的問題。

現實的考量中，是否使用HTML5是一件事，即使使用HTML5也是網頁的規格而已，很多頁面上親和與互動的功能，都必須使用JavaScript來完成的，因此，這幾年以JavaScript為核心的框架及Ajax技術就如雨後春筍般被開發者大量引用，而jQuery就是公認市面上最受歡迎也最為普及的框架之一，透過jQuery開發者可以縮短開發JavaScript的時間並提供User更親和互動的操作介面。

何謂jQuery

jQuery是一種JavaScript的程式庫(Library)或框架(Framework)，他的特點就是Do More With Less(Code寫的少，但功能實現的多)，也就是說用幾行的jQuery程式碼就能做到很多想要的功能或效果。除了以符號或縮寫來簡化之前JavaScript程式碼外，它也提供常用的公用函數，來讓開發者直接取用。更重要的是它是個免費又開放原始碼的程式庫，並吸引成千上萬的開發者也投入jQuery程式庫擴充與組件的提供。

jQuery始於2006年由美國人John Resig所開發並發行1.0版本，2009年微軟的VS2008 SP1正式支援jQuery，並整合入VS開發環境當中，一直到現在VS2012。在最新的VS2012強調MVC開發模式中，jQuery即被認可最佳的View(使用者的UI操作介面)開發方案；之後網路一哥Google 與Adobe也紛紛宣布將jQuery 納入其產品線當中，做為開發語言框架的一部分。同時，jQuery在現今全球最知名前1萬個網站中，有59%都使用了jQuery技術，由此可見jQuery大受開發者的青睞。 

jQuery 本體是使用Javascript 所寫出來的，因此jQuery 和Javascript 兩者是並存，jQuery是必須依賴Javascript才能執行。也就是說，只要Javascript 做得到的功能，jQuery 就一定做得到，相對的，如果Javascript 做不到的功能，jQuery 也一樣做不出來。 

為何要用jQuery

既然jQuery是出自JavaScript，就代表是選擇性的，不一定非用不可，或說，用了jQuery到底有甚麼好處呢？整理如下：

1. jQuery剛開始立意很簡單，就是簡化JavaScript的編寫方式，如以JavaScript來取得一個 id=”my_id”的DOM物件的寫法為：
var obj1 = document.getElementById("my_id");
如果以jQuery來寫的話，可以簡化成 var obj 1= $("#my_id"); 即可，所有的Tag都可以是DOM的對象來存取或操作，讓網頁的控制變得更的得心應手。

2. jQuery提供了很多常用的Class與其程式庫，可以很容易做出很好的UI效果，例如只要一行  $("#div1").fadeIn("slow"); 就可以讓div1慢慢的以淡入效果顯示出來，再如$("#panel").slideDown(); 這可以讓panel產生向下拉開的效果等等，如果在JavaScript中，不但要自己寫，而且程式量也不小又不一定寫得好。

3. 網頁最重視的就是效能與使用者的互動與親和性，傳統網頁就是動不動老是要Postback造成使用者的等待與不便。因此市場上才會出現數不勝數的AJAX框架與技術出現，AJAX就是Asynchronous JavaScript And XML縮寫，代表非同步的JavaScript 和 XML，簡短地說就是在不重新整理網頁(Postback)的情況下，AJAX 透過非同步的方式與後端交換資料，並可立即在網頁上進行局部顯示。jQuery的AJAX是透過HTTP Post與HTTP Get來進行與後端服務的資料交換，包括呼叫別的網頁程式、取得XML或JSON格式資料等等，jQuery的AJAX非常簡潔好寫，使開發者更容易以AJAX開發出與USER互動又具有效能的網頁。

4. 本身jQuery就是屬於開放原始程式碼的免費自由軟體，在市場上你可以找到數以百計的社群或個人以jQuery為基礎開發各種不同的plug-in組件與程式庫供人下載，很多UI與特殊功能組件，基本上社群大都有人寫好了，只需拿來使用與整合即可，省時又方便。

5. 自己開發的JavaScript比較容易遇到各種不同瀏覽器的相容問題，透過jQuery的程式庫，基本上常用的瀏覽器(如IE、FireFox、Safari、Chrome、Opera等)都已經過眾多測試者驗證過了，比較不會遇到跨裝置或跨瀏覽器所沿生的相容問題。

6. jQuery算是一個輕量級的程式庫，簡潔不笨重，壓縮後大約21KB上下 (v1.7版)，即使這樣，引用jQuery的設備也是第一次使用才會被載入，之後就會Cache住，對網頁的效能影響非常小，反而因jQuery所提供的class與AJAX方式讓你的網頁更具有效能優勢。

7. 另有一個子集為jQuery Mobile，用來專門支援各種手機或平板的UI介面，同樣是基於jQuery的基礎，差別是jQuery Mobile規定使用HTML5為標準，主要還支援了多點觸控與不同螢幕大小的自動調整，透過jQuery Mobile即可輕易寫出手機平版的專用網頁。

結論

每一次軟體技術重大革命，總是有幾年的過程演進，商業的應用軟體系統，多數總是最晚的末班車，除了系統龐大、技術升級困難與重新開發的成本過高之外，主要還是Web的介面無法像Windows那樣靈活與親和，但隨著雲端概念的興起，加上Mobile與Pad崛起，愈來越多的企業不得不去思考，現代企業所要用的應用軟體系統是否侷限在公司內部作業而已，是否讓部分系統可以透過Web或手機平板也同時可以即時運作呢。 

可以預見HTML5將使技術門檻更低、應用在更多可跨平台的設備上，未來甚至可以開發一次就可涵蓋不同系統平台和不同形態的終端設備等等、然而HTML5只是個跨平台的超文字語言與標誌(Tag)而已，還要能讓網頁活潑具有高度的互動能力及各種特效處理等，就需要有一種程式語言來讓開發者盡情發揮，可以預見的未來，jQuery將成為前端網頁程式語言的中流砥柱與新標準，jQuery就值得我們投以關注的眼光多看它一眼了。