到底該拋不拋棄JQuery

第到底該拋不拋棄JQuery目錄前言不用jQuery用什么？DOM與事件AJAX請求總結

前言

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

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

不用jQuery用什么？

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

為什么要放棄jQuery呢？因為有Vue??！如果你看過我之前的文章，你應該能猜到我是Vue.js粉。Vue.js提供了非常多的工具，我敢說它比jQuery方便多了。

DOM與事件

讓我們來看一個點擊事件的例子。

請注意，我省略掉了框架的初始化部分

一個VueSFC（別慌，意思就是SingleFileComponent，單文件組件）：

template

button@click="handleClick"點我，用力/button

/template

script

exportdefault{

methods:{

handleClick(){

alert('老鐵，你點擊了按鈕');

/script

用jQuery是這樣寫的：

buttonid="myButton"點吧/button

script

$('button#myButton').click({

alert('這次用jQuery');

/script

你可能會覺得Vue.js的代碼更多啊，你說的沒錯，但也不對！Vue.js并不是有更多代碼，實際上除了handleClick(){...}之外的部分只是框架的結構，跟其他行為是共用的。我覺得Vue.js看起來更整潔，代碼可讀性更高。

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

buttonid="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可以幫你發(fā)送AJAX請求，獲取結果等等。

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

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

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

fetch默認不發(fā)送cookies，并且如果HTTP狀態(tài)碼返回錯誤碼，比如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結合使用，如下所示：

asyncfunctiongetData(){

letresponse=awaitfetch('http://localhost/api'{

method:'POST'

body:{name:"Adnan",country:"Iran"}

returnresponse;

}

那我自己用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結合使用：

asyncfunctiongetData(){

letresponse=awaitaxios.post('http://localhost/api'{

name:"Adnan",

country:"Iran"

returnresponse;

}

總結

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

我相信我們