前端新米

Heidi's Blog

0%

[2023 15th鐵人賽] Day17 - 告別 jQuery：現代開發不可或缺的 JavaScript 方法

發表於 更新於 分類於 ，
9k 8 分鐘

原文連結：jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita

有時在工作上，需要維護一些比較早期的專案，或開發小型不需使用到框架的案子，jQuery 提供的功能與便利性，通常能快速滿足各種需求。但自從 ES6 的出現，引入箭頭函數、模組化、非同步操作等語法功能，考慮到性能優化、行動裝置開發、可維護性等因素，原生 JavaScript 已逐漸取代 jQuery 。

透過這篇文章，除了複習 jQuery 中常用的方法，同時對照原生 JavaScript 對應的方法，以達成相同目的。

以下正文開始。

前言

長期以來，我一直與遺留程式碼（Legacy Code）共事，但 jQuery 的重要性仍是經常被討論的話題之一。雖然這個 Library 本身依舊方便，完美地滿足不同時代的需求。
現今大多在談論的是 ES2023，但過去 jQuery 所涵蓋的大部分功能，早已被納入 2015 年發布的 ES6 版本中。

ES6 的標準已經得到廣泛支援，支援度達到 96％（來源：caniuse.com）。因此，針對像是元素選擇、樣式設定、動畫和數據取得等的基本任務，現在或許是重新審視使用這個 Library 的好時機。

以下主題將舉出一些標準的 jQuery 使用模式，以及相對應的原生 JavaScript 方法，希望能作為參考資料。

元素選取

透過 CSS Selector，能夠選取一個或多個 DOM 元素。

在 JavaScript 中，有許多方法可以用於選擇元素，其中一個常用的方法是 Query Selector。透過 Query Selector，可基於 CSS Selector 模式選取 Document 中的特定元素。

// jQuery 和原生 JavaScript: 選擇所有具有 .item 的實例
$(".item");
document.querySelectorAll(".item");

上方程式碼，展示使用 jQuery 和原生 JavaScript 方法，選取具有 .item 類別的所有元素。在jQuery 中，使用 $ 函數並將 CSS Selector 作為參數。在原生 JavaScript 中，使用 document.querySelectorAll 方法，返回與指定 Selector 匹配的元素集合。

以下是使用不同 Selector 來選取元素的範例：

// 基於類別查詢
$(".item");
document.querySelectorAll(".item");
document.getElementsByClassName("item");

// 基於 ID 查詢
$("#item");
document.querySelector("#item");
document.getElementById("item");

// 基於屬性查詢
$('a[target=_blank]');
document.querySelectorAll('a[target=_blank]');

上述範例中，透過不同的 Selector，基於類別、ID 和屬性條件來選取元素。使用 jQuery 和原生 JavaScript 提供的方法，均得到相同的結果。

透過這些選取元素的技巧，能夠有效選取 DOM 中所需的元素，並進行更進一步操作和互動。

對元素執行函數的方法

在 jQuery 中，可以很容易對選取的所有元素執行某個函數，但原生 JavaScript 的步驟則略有不同。在原生 JavaScript 中，為了迭代處理 NodeList 中的元素，需要使用 NodeList.forEach() 方法。

以下程式碼，是使用 jQuery 和原生 JavaScript 來隱藏元素的範例：

// jQuery: 隱藏所有 .item 的實例
$(".item").hide();

// JavaScript: 迭代處理 NodeList 中的元素，隱藏所有 .item 的實例
document.querySelectorAll(".item").forEach(item => {
  item.style.display = "none";
});

上述程式碼中，在 jQuery 使用 hide() 方法來隱藏所有 .item 的實例。另一方面，在原生 JavaScript 使用 document.querySelectorAll(".item") 來選取所有 .item 的實例，接著使用NodeList.forEach() 方法，在每個元素加上隱藏的樣式。

在原生 JavaScript 中，使用 NodeList.forEach() 方法，可以輕鬆對 NodeList 中的元素執行函數。透過這個步驟，即使是原生 JavaScript 也能對元素執行操作和處理。

選取元素內的元素的方法

當需要在特定範圍內選取元素時，在 jQuery 通常會使用 .find() 方法；而在 JavaScript 則可以使用 querySelector 或 querySelectorAll 方法選取元素的子元素，以達到相同的效果。

以下程式碼，示範如何在 jQuery 和 JavaScript 中選取 .container 內的第一個 .item 元素。在 jQuery 會先將 .container 元素儲存在變數中，接著使用 .find(".item") 來查找子元素。在 JavaScript 則是使用 document.querySelector(".container") 選取 .container 元素，接著使用 querySelector(".item") 來查找子元素。

// jQuery: 選取 .container 內的第一個 .item
var container = $(".container");
container.find(".item");

// JavaScript: 選取 .container 內的第一個 .item
var container = document.querySelector(".container");
container.querySelector(".item");

// JavaScript: 選取 .container 內的所有 .link
var container = document.querySelector(".container");
container.querySelectorAll(".link");

父元素和相鄰元素的遍歷

接著介紹如何根據元素的階層結構，從目標元素選取父元素或相鄰元素。在 JavaScript 中，可以使用以下屬性：nextElementSibling、previousElementSibling 和 parentElement。

以下程式碼，示範如何使用 jQuery 和 JavaScript 來選取元素的相鄰元素或父元素。

// jQuery: 選取 .item 的下一個元素、前一個元素、父元素
$(".item").next();
$(".item").prev();
$(".item").parent();

// JavaScript: 選取 .item 的下一個元素、前一個元素、父元素
var item = document.querySelector(".item");
item.nextElementSibling;
item.previousElementSibling;
item.parentElement;

這個範例，是以具有 .item 類別的元素作為目標。在 jQuery 中，使用 .next() 方法選取下一個元素，使用 .prev() 方法選取前一個元素，使用 .parent() 方法選取父元素。在 JavaScript 中，使用 nextElementSibling 屬性選取下一個元素，使用 previousElementSibling 屬性選取前一個元素，使用 parentElement 屬性選取父元素。

透過這些方法，使元素之間的遍歷成為可能，實現靈活的 DOM 操作。

事件處理

在 jQuery 可使用 .on()、.bind()、.live()、.click() 等多種方法來監聽事件，而在 JavaScript 則使用 .addEventListener() 方法來實現相同的功能。

// jQuery: 處理 click、moustenter 和 keyup 事件
$(".button").click(function(e) { /* 處理 click 事件 */ });
$(".button").mouseenter(function(e) {  /* 處理 mouseenter 事件 */ });
$(document).keyup(function(e) {  /* 處理 keyup 事件 */  });

// JavaScript: 處理 click、moustenter 和 keyup 事件
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });

Click 事件

使用 jQuery 的 .on() 方法，可以為動態新增的元素註冊事件處理（EventHandler）。在 JavaScript 中，想要實現事件委派（Delegation），可透過事件冒泡（Bubbling）在父元素上捕獲事件（Capture），並判別目標元素。

// jQuery: 處理 .container 内 .active 元素的 click 事件
$(".container").on("click", ".active", handleClick);

// JavaScript: 處理 .container 内 .active 元素的 click 事件
document.querySelector(".container").addEventListener("click", function (event) {
  if (event.target.matches(".active")) {
    handleClick(event);
  }
});

動態新增元素的監聽事件

使用 jQuery 的 .on() 方法，可以為動態新增到 DOM 的元素進行事件處理。即使不使用 jQuery，也可以在將元素新增到 DOM 時，將事件處理新增到元素，以實現相同的功能。

// jQuery: 處理動態新增的 .active 元素的 click 事件
$(".search-container").on("click", ".active", handleClick);

// JavaScript: 建立元素，放入 DOM 並加上 eventListener
var searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);
searchElement.addEventListener("click", handleClick);

觸發和建立事件

觸發和建立事件，可使用 JavaScript 的 dispatchEvent() 方法。dispatchEvent() 方法可在任何元素上調用，並且以 Event 作為第一個參數。

// jQuery: 在 document 以及 .item 上觸發 myEvent
$(document).trigger("myEvent");
$(".item").trigger("myEvent");

// JavaScript: 建立 myEvent 並 dispatch event
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".item").dispatchEvent(new Event("myEvent"));

元素的樣式設定

在 jQuery 中，要改變元素的 Inline CSS，可使用 .css() 方法，而在 JavaScript 中，可使用 .style 將值分配給不同的屬性，以實現相同的效果。

// jQuery: 將 .item 的文字顏色設為 #000
$(".item").css("color", "#000");

// JavaScript: 將第一個 .item 的文字顏色設為 #000
document.querySelector(".item").style.color = "#000";

若是想要設定多個屬性的情況：

// jQuery: 設定多個樣式
$(".item").css({
  "color": "#000",
  "background-color": "red"
});

// JavaScript: 設定 color 為 #000，background 為 red
var item = document.querySelector(".item");
item.style.color = "#000";
item.style.backgroundColor = "red";

// 一次設定所有樣式（覆蓋現有樣式）
item.style.cssText = "color: #000; background-color: red";

fadeIn() 與 fadeOut()

在 jQuery 中使用 .fadeIn() 方法，能使具有 .item 類別的元素實現淡入效果。

// jQuery: 將 .item 淡入
$(".item").fadeIn();

為了在 JavaScript 中實現相同效果，這裡建立一個名為 fadeIn() 的函數，該函數以元素作為參數，透過修改元素樣式來實現淡入效果。

在函數中，設定 transition 屬性，並將 opacity 屬性改為 1 使元素可見，透過動態調整元素的不透明度，實現淡入效果。

// JavaScript: 透過樣式實現 .item 淡入效果
function fadeIn(element) {
  element.style.transition = "opacity 1s";
  element.style.opacity = "1";
}

fadeIn(document.querySelector(".item"));

hide() 與 show()

.hide() 和 .show()，可透過設定元素的 display 屬性為 none 和 block 的方法來實現。

// jQuery: 隱藏或顯示元素
$(".item").hide();
$(".item").show();

// JavaScript: 隱藏或顯示元素（修改 display 屬性）
document.querySelector(".item").style.display = "none";
document.querySelector(".item").style.display = "block";

等待 DOM 完成加載

若需要等待 DOM 完全加載的情況（例如：要附加事件到 DOM 上的對象時），通常會使用 jQuery 的 $(document).ready() 或簡寫 $()。而在 JavaScript 中，可透過監聽 DOMContentLoaded 事件來實現相同的功能。

// jQuery: 在 DOM 完全加載後執行某些操作
$(document).ready(function() {
  /* todo... */
});

// JavaScript: 在 DOM 完全加載後執行某些操作
document.addEventListener("DOMContentLoaded", (event) => {
  /* todo... */
});

操作類別

在 jQuery 中，可使用 .addClass()、.removeClass()、.toggleClass() 等方法來操作類別。在 JavaScript 中，可使用 classList 屬性來實現相同的功能。

// jQuery: 新增、移除、切換 "active" 類別
$(".item").addClass("active");
$(".item").removeClass("active");
$(".item").toggleClass("active");

// JavaScript: 新增、移除、切換 "active" 類別
var item = document.querySelector(".item");
item.classList.add("active");
item.classList.remove("active");
item.classList.toggle("active");

若要新增或移除多個類別的情況：

// 新增或移除 "active" 和 "highlighted" 類別
var item = document.querySelector(".item");
item.classList.add("active", "highlighted");
item.classList.remove("active", "highlighted");

當需要切換兩個不同類別時，可透過 classList 屬性並調用 .replace() 方法，將一個類別替換為另一個類別。

// 刪除 "active1" 類別，並將其替換為 "active2"
document.querySelector(".item").classList.replace("active1", "active2");

檢查類別是否存在

若要檢查元素是否具有特定類別，可使用 JavaScript 的 .classList.contains() 方法。

// jQuery: 檢查 .item 是否具有 "active" 類別，並執行某些操作
if ($(".item").hasClass("active")) {
  // 執行某些操作...
}

// JavaScript: 檢查 .item 是否具有 "active" 類別，並執行某些操作
if (document.querySelector(".item").classList.contains("active")) {
  // 執行某些操作...
}

透過 .get() 或 .ajax() 進行網路請求

在 jQuery 中，可使用 .get() 或 .ajax() 進行網路請求。在 JavaScript 中，可使用具有相似功能的 fetch()，這個方法將會返回 Promise 以處理 Response。

// jQuery: 進行 AJAX 請求
$.ajax({
    url: "data.json"
  }).done(function(data) {
    // ...
  }).fail(function() {
    // 錯誤處理
  });

// JavaScript: 使用 fetch 進行網路請求
fetch("data.json")
  .then(data => {
    // 資料處理
  }).catch(error => {
    // 錯誤處理
  });

建立元素

若要在 JavaScript 動態建立元素，可使用 document 物件的 createElement() 方法。

// jQuery: 建立 div 元素和 span 元素
$("<div/>");
$("<span/>");

// JavaScript: 建立 div 元素和 span 元素
document.createElement("div");
document.createElement("span");

更新 DOM

當需要更改元素的文字，或將新元素放到 DOM 時，通常會使用 .innerHTML 屬性，但這可能會面臨跨網站指令碼攻擊（XSS）的風險，以下介紹更安全的替代方法。

若要讀取或更新元素文字，可使用 textContent 屬性。

// jQuery: 更新 .item 的文字
$(".item").text("新しいテキスト");
// 讀取 .item 的文字
$(".item").text(); // 返回 "新的文字"

// JavaScript: 更新 .item 的文字
document.querySelector(".item").textContent = "新しいテキスト";
// 讀取 .item 的文字
document.querySelector(".item").textContent; // 返回 "新的文字"

若要將元素新增到 DOM，可透過 appendChild：

// jQuery: 建立 div 元素並新增到 .container
$(".container").append($("<div/>"));

// JavaScript: 建立 div 元素並新增到 .container
var element = document.createElement("div");
document.querySelector(".container").appendChild(element);

總結

以上只是概略介紹方法，未提及 jQuery 的負面影響，或轉移到原生 JavaScript 的好處。

可將本篇文章，作為轉移到原生 JavaScript 時的參考。此外，注意這並不是全面的指南，建議參考官方文件，並搭配這裡介紹的原生 JavaScript 方法。

參考資料

可閱讀 Mozilla Web 文檔，以更深入瞭解 JavaScript：

  • https://developer.mozilla.org/ja/docs/Web/JavaScript

從 jQuery 轉移到原生 JavaScript 的相關資訊，可參考下方連結：

  • https://youmightnotneedjquery.com/
  • https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/
  • https://dev.to/rfornal/-replacing-jquery-with-vanilla-javascript-1k2g

15th鐵人賽目錄傳送門：https://ithelp.ithome.com.tw/users/20135558/ironman/6290