我以前很喜歡 jQuery，而且說實話，我是先學(xué)jQuery，再學(xué) JavaScript 的。所以我寫這篇文章有點像是在背叛 jQuery。

我知道，關(guān)于為什么不應(yīng)該用 jQuery 的文章已經(jīng)汗牛充棟，但我只是想說下自己的親身體驗。

隨著 web 的發(fā)展，新技術(shù)長江后浪推前浪，前浪死在沙灘上。就像有些編程語言曾經(jīng)輝煌過，現(xiàn)在也消失不見了。我認(rèn)為 jQuery 也不例外，是時候跟 它說再見了，雖然它曾經(jīng)給我們帶來過美妙的編程體驗。

為什么要放棄 jQuery 呢？因為有 Vue 啊！如果你看過我之前的文章，你應(yīng)該能猜到我是 Vue.js 粉。Vue.js 提供了非常多的工具，我敢說它比jQuery 方便多了。

讓我們來看一個點擊事件的例子。

請注意，我省略掉了框架的初始化部分

一個 Vue SFC（別慌，意思就是Single File Component，單文件組件）：

<template> <button @click='handleClick'>點我，用力</button></template><script> export default {methods: { handleClick() {alert(’老鐵，你點擊了按鈕’); }} } </script>

用 jQuery 是這樣寫的：

<button id='myButton'>點吧</button><script> $(’button#myButton’).click({alert(’這次用 jQuery’); });</script>

你可能會覺得 Vue.js 的代碼更多啊，你說的沒錯，但也不對！Vue.js 并不是有更多代碼，實際上除了handleClick() { ... }之外的部分只是框架的結(jié)構(gòu)，跟其他行為是共用的。我覺得 Vue.js 看起來更整潔，代碼可讀性更高。

你心里可能還有一個疑問，你還是用了 Vue.js 啊，五十步笑百步？有本事別用！實際上你完全可以用原生 JavaScript 實現(xiàn)：

<button id='myButton'>來點我呀</button><script> document.getElementById(’myButton’).addEventListener(’click’, function() { alert(’來自原生js的問候’); });</script>

所以你看，jQuery 只是背著我們把代碼翻譯成原生 JavaScript 而已，假裝自己很特別。

至于 DOM 元素的選擇操作，用原生 JavaScript 可以輕松做到：

document.getElementById(’myButton’); // jQuery => $(’#myButton’);document.getElementsByClassName(’a’); // jQuery => $(’.a’);document.querySelectorAll(’.parent .a’); // jQuery => $(’.parent .a’);AJAX 請求

jQuery 被用得最多的方面可能就是 AJAX 了。我們都知道 jQuery 提供了$.ajax()，也可以分別用具體的 $.post()和$.get()。這些 API 可以幫你發(fā)送 AJAX 請求，獲取結(jié)果等等。

你可以用原生 JavaScript 的兩個方法，那就是 XMLHttpRequest和fetch。

XMLHttpRequest也算是個老古董了，跟 fetch 相比還不太一樣。

fetch更加時新，也比 XMLHttpRequest更常用，而且是基于 promise 的。

fetch默認(rèn)不發(fā)送 cookies，并且如果 HTTP 狀態(tài)碼返回錯誤碼，比如404或500，它不會 reject，因此基本上 .catch()不會運行，而是 response.ok變成 false。

在這里就不詳細(xì)對比它們了。

我們還是來看兩段代碼。

這是 jQuery：

$.ajax({ method: 'POST', url: 'http://localhost/api', data: { name: 'Adnan', country: 'Iran' }}).done(response => console.log(response)) .fail(() => console.log(’error’));

示例代碼來自 jQuery 官方文檔

這是 fetch：

fetch( ’http://localhost/api’, {method: ’POST’body: { name: 'Adnan', country: 'Iran' } } ).then(response => console.log(response));

兩段代碼做的事情是一樣的，但fetch不屬于任何庫。

請注意，fetch也可以跟 async/await 結(jié)合使用，如下所示：

async function getData() { let response = await fetch(’http://localhost/api’ {method: ’POST’body: { name: 'Adnan', country: 'Iran' } }); return response;}

那我自己用fecth嗎？實際上沒有，因為我不太信任它，原因有很多。因此我在用一個叫 axios 的庫，也是基于 promise 的，同時非常可靠。

上面的代碼用axios 寫是這樣的：

axios({ method: ’POST’, url: ’http://localhost/api’, data: { name: 'Adnan', country: 'Iran' }}).then(response => console.log(response)) .catch(err => console.log(err));

axios也可以跟 async/await 結(jié)合使用：

async function getData() { let response = await axios.post(’http://localhost/api’ {name: 'Adnan',country: 'Iran' }); return response;}總結(jié)

我現(xiàn)在自已經(jīng)不再用 jQuery 了，盡管我曾經(jīng)非常喜歡它，那個時候項目初始化后的第一件事就是安裝 jQuery。

我相信我們已經(jīng)不再需要 jQuery 了，因為其他庫和框架實際上能比 jQuery 更方便、更簡潔地完成任務(wù)。

可能還有大量的插件基于 jQuery，但基本上都有相應(yīng)的 Vue.js 或者 React.js 組件替代品。

以上就是到底該拋不拋棄JQuery的詳細(xì)內(nèi)容，更多關(guān)于JQuery的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！