完全拋棄 jQuery ，否則還留着過年？

我之前很喜歡 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譯站」，爲你奉上更多技術乾貨。