都9102年了，還須要用到 jQuery 嗎？

時間 2019-11-06

標籤 9102年還須用到 jquery 欄目 JQuery 简体版

原文原文鏈接

做者：Anjolaoluwa Adebayo-Oyetoro
翻譯：瘋狂的技術宅javascript

原文：https://blog.logrocket.com/us...css

未經容許嚴禁轉載html

介紹

關於 jQuery 這個流行的 JavaScript 庫如何死亡的問題一直在不斷的被討論。前端

隨着現代庫和框架的出現，瀏覽器 API 的標準化以及須要 jQuery 技能的職位減小，開發人員仍然須要繼續學習 jQuery 嗎。java

在本文中，我將介紹 jQuery 的歷史、優勢、缺點以及爲何你仍要用它。jquery

什麼是jQuery？

根據 jQuery 的官方文檔：ios

jQuery 是一個快速、小巧、功能豐富的 JavaScript 庫。它經過易於使用的API在大量瀏覽器中運行，使得 HTML 文檔遍歷和操做、事件處理、動畫和 Ajax 變得更加簡單。經過多功能性和可擴展性的結合，jQuery 改變了數百萬人編寫 JavaScript 的方式。

基本上它是一個 JavaScript 庫，它使在訪問 DOM 的同時對 DOM 操做成爲可能，並能在舊瀏覽器中用 JavaScript 執行某些幾乎不可能作到的操做。它使編寫 JavaScript 和 HTML 變得更容易，更簡單。git

在2008年9月微軟和諾基亞宣佈公衆對它的支持時，庫的流行度有所提升，直到如今，它仍然在開發者的 JavaScript 庫和框架中保持領先地位。許多著名的公司和庫使用 jQuery 做爲依賴（GitHub，Bootstrap 5）。程序員

jQuery 可以提供什麼？

遍歷DOM - jQuery 使遍歷 DOM 變得更容易（由於沒有標準的方法）。在舊瀏覽器中遍歷 DOM 是一件複雜的事情。
操做DOM元素 - jQuery 經過使用選擇器引用目標元素幷包含應用所需更改的方法，能夠更輕鬆地更改元素的樣式和行爲。
動畫元素 - 動畫頁面內容是 jQuery 的主要賣點之一。
更好的HTTP請求 - jQuery 的 AJAX 方法可以輕鬆處理HTTP請求，這得到了許多粉絲。在 JavaScript 中發出 HTTP 請求的舊方法 —— 使用XMLHttpRequest(XHR) 是一個繁瑣的過程。
跨瀏覽器兼容性問題的解決方案 - jQuery 的主要賣點是其跨瀏覽器兼容性問題的解決方案。舊瀏覽器的工做方式是徹底不一樣的，由於沒有標準的處理方式，開發人員必須進行屢次檢查以確保 JavaScript 在IE、Firefox、Opera、Safari 和 Chrome 中正確運行。 jQuery 確保不管用戶使用哪一種瀏覽器都能正確呈現網頁。
大量的文檔 - jQuery的文檔，資源及其生態系統能夠幫助開發人員重新手很快升級到專家。 jQuery 是開源的（任何人均可以貢獻、修改代碼或建議更新的功能），它在互聯網上有一個很是大的用戶社區。

爲何開發人員仍然使用jQuery？

它有一些很好的功能，人們以爲有用。其中包括：github

jQuery 有一個可擴展的插件系統 - jQuery 有一個即插即用插件系統。你所須要作的就是下載插件並使用或自定義它們來知足你的需求。
「Write less, do more「 - 正如其標語中所述，使用 jQuery，你能夠用更少的代碼行完成更多工做。各類複雜的操做都很容易完成，它鼓勵編寫模塊化代碼。
jQuery提供簡單性 - jQuery 不須要學習任何依賴知識。它具備較低的學習曲線，而且比較容易讓人在很短的時間內學會併成爲它的專家。它知足了開發人員和設計人員的需求，由於它大大減小了構建時間。
跨瀏覽器兼容性 - jQuery 支持舊瀏覽器，它們與現代工具、框架或庫不相容。 jQuery 驅動的應用適用於全部瀏覽器。
jQuery 是穩定的 - 它是穩定的，由於有一個專門團隊，他們自願將該工具保持在最佳狀態生態系統。

開發人員對 jQuery 的吐槽

使用 jQuery 須要付出必定的成本：

渲染性能 - jQuery 爲了實現大量很棒的功能犧牲了性能。它使網站變得更慢，由於它不斷地直接操做 DOM ，並在處理咱們的代碼以前加載整個庫，這一般會致使延遲。在一些簡單的或普通的網站中，性能緩慢幾乎不會引發注意，而且多是爲了更多功能所作的折衷，可是在每一毫秒都很重要的大型複雜網站中，jQuery 通常會下降此類網站的性能。
相對易用性 - jQuery 的一個缺點是很容易寫出麪條代碼。因爲對 jQuery 的選擇鏈使用不當，使用非描述性變量名並嘗試編寫複雜函數時，jQuery 可能會致使寫出最終沒法維護的代碼。
增長了包大小 - 當被壓縮時，其大小爲 86.1 Kb 或 28 kb，jQuery 爲你的網站增長了更多的大小，即便大多數狀況下只須要其中一部分功能。
現代瀏覽器和不斷髮展的 Web 趨勢 - 儘管 jQuery 解決了大量跨瀏覽器兼容性問題以及標準化問題，可是由於對 Web 瀏覽器進行了改進，如今大部分已經沒有必要了。最引人注目的是 ECMAScript 2015 （即ES6）的引入，新框架和專用庫的建立，這些都使 jQuery 嚴重過期。

jQuery 死了嗎？

根據 BuiltWith 的數據顯示，jQuery 爲世界上前 100 萬個網站中的79％提供了支持，並且有65％的 JavaScript 庫依賴它。

它仍受歡迎的一個緣由是許多項目仍然依賴它（例如：Bootstrap 4.0 及如下版本，大量的 WordPress 插件和主題都是使用 jQuery 構建的）而且還有許多依賴 jQuery 的遺留代碼庫。

jQuery 函數的現代替代品

下面是一些 jQuery 流行函數的替代品。

DOM 選擇

要在 jQuery 中選擇一些東西，咱們一般會這樣作：

// The selector name can be replaced with either an ID, a Class name or tag name
$("selectorName")  //  #selectorName or .selectorName

這能夠經過使用 HTML5 DOM API 來實現：

document.querySelector("selectorName") //gets a single item

或者

document.querySelectorAll("selectorName") //gets a group of items

DOM 操做

.append() 方法將括號內的內容插入到選擇器指定的元素的末尾。

$("selectorName").append( "Your content goes here")

與它等價的原生 js 代碼能夠像這樣：

let element = document.querySelector('selectorName');
let text = document.createTextNode("your content");
element.appendChild(text);

.addClass()方法把指定的類添加到由選擇器指定的元素集中的每一個元素。

$('selectorName').addClass('className');

與它等價的原生 js 代碼：

let element = document.querySelector("selectorName");
element.classList.add('className')

Events

偵聽 click 事件：

$('selectorName').on('click',function(e) {
    //do something
});

與它等價的原生 js 代碼：

let clickedMe = document.querySelector('button');

clickedMe.addEventListener('click', (e) => {
    //do something
})

HTTP 請求

jQuery Ajax HTTP 請求是這樣的：

$.ajax({
  url: 'http://example.com/movies.json',
  type: 'GET'
  success: (response) => {
    console.log(response)
  }
  error: (errors) => {
    console.log(error)
  }
})

這能夠用 JavaScript fetch API 替換，該 API 容許你發出異步請求。它將數據做爲「Promise」返回。

Fetch

fetch('http://example.com/movies.json',
          {method: 'GET',
          headers: {'Content-Type': 'application/json'},
          }){
        .then(response => response.json())
        .catch(error => console.log(error))
    }

雖然 Fetch 比 AJAX 更好，但它們是不同的，由於 Fetch 使用 promise，而且返回的 promise 不會拒絕 HTTP 狀態錯誤。 Fetch 也不會從服務器發送或接收 cookie。

HTTP 請求也可使用像 axios 這樣的專用庫來實現。

Axios 是一個基於 Promise 的開源庫，用於發出 HTTP 請求。

要使用 axios，你能夠經過 npm 安裝：

npm install axios --save-dev

而後你能夠在本身的文件中導入它，以下所示：

import axios from 'axios'

你也可使用 axios 的 CDN 。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

實現

axios({
  method: 'get',
  url: 'http://example.com/movies.json',
  responseType: 'json'
})
  .then(function (response) {
  });

瀏覽器支持和兼容性

要想在不一樣瀏覽器中支持你的應用或網站，以及在舊版瀏覽器上工做，可使用轉換工具，例如Babel 將 ES6 代碼轉換爲與瀏覽器兼容的代碼，能夠在 polyfills 的幫助下經過瀏覽器瞭解特定功能以及其餘工具,如 Autoprefixer 、PostCSS 等。

動畫

jQuery 中的動畫是經過 .animate 方法實現的。

$(selectorName).animate(
    {parameters},
    speed,
    callback
);

經過使用 CSS 動畫能夠實現網站上的動畫內容。

@keyframes 是一個用於動畫內容的重要工具，用來定義要在舞臺上應用的樣式以及 animation 屬性或其子屬性，它被綁定到選擇器，指定如何用關鍵幀樣式及其應用的時機。

p{
    animation-name: animated;
    animation-duration: ;  
}

@keyframes animated{
    0% {
    opacity: 0;
  }        
  
  50% { 
    opacity: 1;
  }
  100%  {
    opacity: 0;
  }
}

jQuery 與現代前端庫和框架進行比較

jQuery 被較少使用的一個主要緣由是 JavaScript 庫和框架（例如ReactJS、AngularJS 和 VueJS）的興起，在本節中咱們將看看它們的區別。

	jQuery	React JS	Angular JS	Vue JS
類型	庫	UI庫	全功能框架	在庫和功能齊全的框架之間進行擴展。
結構體系	模塊化	基於組件的庫，僅處理應用的View	完善的基於組件的MVC框架	基於組件，側重於 MVVM 模式的 ViewModel 層
DOM交互	直接更新 DOM	使用與真實 DOM 鏈接的虛擬 DOM	直接更新 DOM	使用與真實 DOM 鏈接的虛擬 DOM
數據綁定	帶插件的數據綁定方法實現雙向數據流	單向數據流	用 ngModel 能夠實現雙向數據綁定	響應式數據綁定系統可使用 V-model 實現雙向數據
狀態管理	可使用專門的庫來實現	Context API，Redux	第三方庫，如NGRX，NGXS等	Vuex
模板	JavaScript	JavaScript（JSX）	TypeScript 和 Angular 指令	HTML，CSS，JavaScript 和 Vue 指令
學習曲線	低	低，但須要較高水平的 JavaScript 知識	高	僅須要 JavaScript 的基礎知識便可入門

爲何在2019年你可能仍會使用 jQuery

在設計原型產品時 - 因爲 jQuery 有助於快速製做原型並當即完成新功能，所以你無需對其進行深刻了解便可完成任務。經過使用文檔就能夠當即得到工做原型。
用原生 js 製做動畫內容仍然比較困難。若是你的項目須要大量動畫，jQuery 多是一個合適的選項，由於有大量可自定義的插件可以幫助補充易於使用的 .animate 方法。
爲多個瀏覽器構建。若是你正在構建一個能夠無縫地在多個瀏覽器上運行的網站或 Web 應用，那麼 jQuery 可能最適合你的需求。它支持全部現代瀏覽器並在解叉兼容性問題方面作得更好，它還解決了 IE6 等舊瀏覽器的問題。
bootstrap 小項目和不須要框架的簡單站點。
使用 jQuery 構建的遺留代碼庫時。

如何在2019年使用jQuery

要在項目中使用jQuery，有幾種方法能夠入門。

在撰寫本文時的最新版本是 3.4.1 壓縮的生產版本或未壓縮的開發版本。

你能夠將它包含在項目中，以下所示：

<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>

做爲替代方案，你可使用包管理器：

npm install jquery
或者
yarn add jquery

並像這樣導入：

import * as jQuery from 'jquery';

或者在項目中使用 CDN版本：

Google CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Microsoft CDN

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"> </script>

結論

雖然趨勢顯示了開發人員從 jQuery 遷移到更新的庫和框架的轉變，可是它仍然很是活躍而且被積極使用，由於它與原生方法相比更容易實現你所要的功能。

技能需求率低也代表用更新的庫或框架可能會更好，由於有更多的就業機會。

我建議學習 jQuery 以及在項目中用它實現一些基本的功能（技多不壓身）。文檔可以幫你很快入門。

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

更多文章...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。