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

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

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

為什么要放棄 jQuery 呢？因為有 Vue 啊！如果你看過我之前的文章，你應該能猜到我是 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() { ... }之外的部分只是框架的結構，跟其他行為是共用的。我覺得 Vue.js 看起來更整潔，代碼可讀性更高。

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

<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 可以幫你發送 AJAX 請求，獲取結果等等。

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

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

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

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

在這里就不詳細對比它們了。

我們還是來看兩段代碼。

這是 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 結合使用，如下所示：

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 結合使用：

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

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

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

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

以上就是到底該拋不拋棄JQuery的詳細內容，更多關于JQuery的資料請關注好吧啦網其它相關文章！