為什麼要用 (或不用) jQuery

在 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 很肥,但實際上並不是如此。我們這裡以壓縮過的函式庫大小來進行比較如下:

Library Version Size
jQuery 1.12.4 95 kb
jQuery 3.3.1 85 kb
Zepto 1.2.0 26 kb
Angular 6.0.1 3123 kb
React + DOM 16.4.1 99 kb
Vue 2.5.16 85 kb

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

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

對 Internet Explorer 的支援度

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

Library Version Support
jQuery 1.12.4 IE 6+
jQuery 3.3.1 IE 9+
Zepto 1.2.0 IE 10+
Angular 6.0.1 IE 9+
React + DOM 16.4.1 IE 9+
Vue 2.5.16 IE 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 以外,讀者也可以自己嘗試其他的前端框架。

上篇建立前後端分離的前端專案
下篇以 C 語言實作龍與地下城 (Dragons and Dungeons) 風格的骰子