我以前很喜歡 jQuery，而且說實話，我是先學jQuery，再學 JavaScript 的，所以我寫這篇文章有點像是在背叛 jQuery，
我知道，關于為什么不應該用 jQuery 的文章已經汗牛充棟，但我只是想說下自己的親身體驗，
不用 jQuery 用什么？
隨著 web 的發展，新技術長江后浪推前浪，前浪死在沙灘上，就像有些編程語言曾經輝煌過，現在也消失不見了，我認為 jQuery 也不例外，是時候跟 它說再見了，雖然它曾經給我們帶來過美妙的編程體驗，
為什么要放棄 jQuery 呢？因為有 Vue 啊！如果你看過我之前的文章，你應該能猜到我是 Vue.js 粉，Vue.js 提供了非常多的工具，我敢說它比jQuery 方便多了，
DOM 與事件
讓我們來看一個點擊事件的例子，
請注意，我省略掉了框架的初始化部分
一個 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 組件替代品，
你們怎么看？歡迎在評論區留言！
交流
歡迎掃碼關注微信公眾號“1024譯站”，為你奉上更多技術干貨，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31450.html
標籤：jQuery