技術雜談:為什麼要用 (或不用) jQuery

PUBLISHED ON AUG 5, 2018
FacebookTwitter LinkedIn LINE Skype EverNote GMail Yahoo Email

    在 Netscape vs. Internet Explorer 的瀏覽器大戰時代中,jQuery 的確幫助許多開發人員解決瀏覽器不相容的議題。然而,近幾年來 jQuery 過時的呼聲不斷高張,一方面是現在瀏覽器在標準化已有改善,jQuery 的角色相對弱化;另一方面,jQuery 的範式 (paradigm) 是以 DOM 為中心,而現在新的思維是以資料為中心。那麼,是不是我們已經不再需要 jQuery 了呢?

    我們可以從以下數個面向來考量是否要使用 jQuery:

    • 市佔率
    • 函式庫大小
    • 對 Internet Explorer 的支援度
    • DOM 導向 vs. 資料導向
    • 難易度

    市佔率

    現在新的網頁前端學習教材通常會著重在 Anguar、React、Vue 等新興工具,而不會把重心放在 jQuery 等出現較久的函式庫,某種程度也代表了這些新興工具比較有話題性。不過,jQuery 仍然在全世界的網站中占有八成的市佔率,而一些新興框架的使用率其實遠遠不及 jQuery (可看這裡)。

    另外,Bootstrap 也依賴 jQuery,如果要接手他人寫的案子,完全沒用到 jQuery 和 Bootstrap 的機率應該很小;已有 jQuery 的案子,用其他工具把 jQuery 換掉的機會更小,因為這樣做整個網站要大改,反而不划算。

    函式庫大小

    雖然有些程式人會覺得 jQuery 很肥,但實際上並不是如此。我們這裡以壓縮過的函式庫大小來進行比較如下:

    LibraryVersionSize
    jQuery1.12.495 kb
    jQuery3.3.185 kb
    Zepto1.2.026 kb
    Angular6.0.13123 kb
    React + DOM16.4.199 kb
    Vue2.5.1685 kb

    在實際上線的網站中,這些函式庫通常會用壓縮過的版本,故我們以這個版本為準。

    由此可以看出,Angular 是超重量級的框架,而 jQuery 和 React 差不多,Vue 又相對輕量一點。至於 Zepto 是一個和 jQuery 部分相容的函式庫,主要是用在 Cordova 等資源相對受限的應用程式中,平常用到機會相對少。

    對 Internet Explorer 的支援度

    當初 jQuery 就是要解決 Internet Explorer (IE) 所帶來的問題,如果我們仍要支援舊版的 IE,就會需要使用 jQuery。各個瀏覽器對 IE 的支援度如下:

    LibraryVersionSupport
    jQuery1.12.4IE 6+
    jQuery3.3.1IE 9+
    Zepto1.2.0IE 10+
    Angular6.0.1IE 9+
    React + DOM16.4.1IE 9+
    Vue2.5.16IE 9+

    除了做一些 (台灣或大陸) 政府或公營單位的案子,還需要支援 IE 8 (甚至 IE 6) 的機會應該很少,如果真的碰到了,大概就是要用舊版的 jQuery,也沒太多好的選擇。要注意新版的 jQuery 對 IE 的支援程度其實和其他框架差不多,這時候就看開發團隊的需求和偏好。

    我們可以利用 IE conditionals 來動態載入不同版本的 jQuery:

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>
    <![endif]-->
    <!--[if gt IE 8]> <!-- -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <!-- <![endif]-->
    

    對於較舊的瀏覽器,我們載入低版本的 jQuery 以保持相容性;對於較新的瀏覽器,我們載入新版的 jQuery,來享受新版本所帶來的改進。

    DOM 導向 vs. 資料導向

    jQuery 的寫法是以 DOM 為中心點來操作網頁,對於傳統的網頁表單來說遊刃有餘。但若沒有好好地整理程式碼,資料很容易四散在程式碼各處。隨著網頁程式變複雜,以 jQuery 為中心的寫法就會感到不足;這些新興框架的特色之一在於強調 data binding,就是要補強 jQuery 的不足。使用這些新興工具的代價就是一開始的學習時間。

    為了補強 jQuery 本身的不足,JsRender/JsViews 應運而生。這套框架以 jQuery 為基礎,JsRender 是模板語言的部分,而 JsViews 則是以 JsRender 為基礎的前端框架。對熟悉 jQuery 的程式人來說,這套框架的入門較快;但這樣框架需要的樣板程式碼稍微多一點。目前這套框架相對冷門,範例不多,需要自己多加嘗試。

    另外一個替代的選擇是使用 Backbone.js,因該框架相依於 jQuery 或 Zepto,可最大化重用程式碼。然而,Backbone.js 近年來發展有些停滯,網路上範例程式碼也偏舊,讀者需自行評估是否要使用該框架。

    難易度

    比起前端三雄,jQuery 相對簡單得多。這兩者的差別在於用函式庫寫程式和用框架寫程式,後者需要的起始學始成本往往較高。根據程式類型不同,我們有時候不需要前端網頁框架,使用 jQury 來操作網頁就足夠了。如同使用其他的函式庫,使用 jQuery 可以自主組織程式碼,相對來說較自由,但也有可能寫出不好維護的程式碼。

    小結

    經過本文的比較,相信大家應該心中都有自己的一把尺。筆者目前仍偏好 jQuery,有時會搭配 JsRender/JsViews。如果讀者不想再用 jQuery,現在 React 和 React Native 的授權已改為 MIT,先前使用 React 的疑慮大抵上消除了;除了 React 以外,讀者也可以自己嘗試其他的前端框架。