到底該拋不拋棄JQuery

更新時(shí)間：2021年05月08日 09:27:04 作者：李中凱

這篇文章主要介紹了到底該拋不拋棄JQuery，對(duì)JS框架感興趣的同學(xué)，可以參考下

前言

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

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

不用 jQuery 用什么？

隨著 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 方便多了。

DOM 與事件

讓我們來(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;
}