為什麼不再使用jQuery

hemingwaylee

Bootstrap 5不再使用jQuery，而改用原始的JavaScript (vanilla JavaScript)重寫。從面上這個pull request的截圖可以看出，Util, Alert, Button, Carousel, …等等Plugins也涵蓋在內。

Bootstrap並非唯一移除jQuery的知名專案，根據網上搜到的文章顯示Github也在慢慢地移除jQuery。這到底是為什麼呢？我們將在這篇文章中做簡短的說明。

  1. jQuery的好處是什麼？當年為何選擇jQuery？
  2. jQuery被vanilla JavaScript所取代
  3. jQuery被其他framework取代
  4. 我該如何用vanilla JavaScript取代jQuery？

jQuery的好處是什麼？當年為何選擇jQuery？

簡單易用：用jQuery寫的程式往往比用vanilla JavaScript寫的程式較短，而且可讀性好。在2006年誕生的jQuery確實是一時之選。比方說舊browser中不使用jQuery的程式碼：

function withoutJquery(type, url, callback) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == XMLHttpRequest.DONE && xmlhttp.status == 200) {
      var data = xmlhttp.responseText;
      if (callback) callback(data);
    }
  };
  xmlhttp.open(type, url, true);
  xmlhttp.send();
}

withoutJquery(
  "GET",
  "https://127.0.0.1:8000/api/index.php?type=SELECT",
  function (data) {
    document.getElementById("outputHere").innerHTML = data; //Place data at #outputHere
  }
);

使用jQeury後的程式碼：

$.ajax({
  type: 'GET',
  url: 'https://127.0.0.1:8000/api/index.php?type=SELECT',
  success: function(data) {
    $('#outputHere').html(data);
  }
});

跨瀏覽器(cross-browser compatibility)：不同瀏覽器支援的JavaScript語法不盡相同，就算是同一個瀏覽器，不同版本之間支援的JavaScript語法也不盡相同。所以用jQuery這個通用的語法來支援所有的瀏覽器其實非常方便。

jQuery被vanilla JavaScript所取代

隨著時代的演進，幾乎所有jQuery的功能用原始的JavaScript也可以完成，下面舉幾個例子：

如此一來，還要再下載大約55k的jQuery library就變得不再有吸引力了；因為很多時候你只用到jQuery一小部分的功能，卻下載了很多你用不到的程式碼。

而寫過網頁程式的都知道，一般來說網頁程式慢，其中一個瓶頸是下載笨重的javascript library。(當然還有其他因素，像是存取資料庫或是後端servers之間的溝通)

除了需要額外下載jQuery library，另一個原因是用原始的JavaScript寫的話，執行的速度更快。因為jQuery畢竟也是原始JavaScript的一層wrapper。

jQuery被其他framework取代

現在新專案的開發，通常都用更為先進的framework (像是React，Angular和Vue…等等)，這也是jQuery另一個被慢慢取代的理由。但是現在還是有很多使用jQuery的舊專案需要維護，所以jQuery還是會存在很長的一段時間。

我該如何用vanilla JavaScript取代jQuery？

可以參考You might not need jQuery這個網站，裡面列有詳細的說明jQuery語法該如何替換成JavaScript語法。或是這個Github page。

Leave a comment