我以前很喜歡 jQuery，而且說(shuō)實(shí)話(huà)，我是先學(xué)jQuery，再學(xué) JavaScript 的。所以我寫(xiě)這篇文章有點(diǎn)像是在背叛 jQuery。

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

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

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

讓我們來(lái)看一個(gè)點(diǎn)擊事件的例子。

請(qǐng)注意，我省略掉了框架的初始化部分

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

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

用 jQuery 是這樣寫(xiě)的：

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

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

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

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

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

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

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

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

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

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

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

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

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

我們還是來(lái)看兩段代碼。

這是 jQuery：

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

示例代碼來(lái)自 jQuery 官方文檔

這是 fetch：

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

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

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

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

那我自己用fecth嗎？實(shí)際上沒(méi)有，因?yàn)槲也惶湃嗡蛴泻芏唷Ｒ虼宋以谟靡粋€(gè)叫 axios 的庫(kù)，也是基于 promise 的，同時(shí)非常可靠。

上面的代碼用axios 寫(xiě)是這樣的：

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)非常喜歡它，那個(gè)時(shí)候項(xiàng)目初始化后的第一件事就是安裝 jQuery。

我相信我們已經(jīng)不再需要 jQuery 了，因?yàn)槠渌麕?kù)和框架實(shí)際上能比 jQuery 更方便、更簡(jiǎn)潔地完成任務(wù)。

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

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