久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術文章
文章詳情頁

到底該拋不拋棄JQuery

瀏覽:173日期:2024-07-12 10:01:47
前言

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

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

不用 jQuery 用什么?

隨著 web 的發(fā)展,新技術長江后浪推前浪,前浪死在沙灘上。就像有些編程語言曾經輝煌過,現在也消失不見了。我認為 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 可以幫你發(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 結合使用,如下所示:

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的資料請關注好吧啦網其它相關文章!

標簽: jQuery
相關文章:
主站蜘蛛池模板: 赞皇县| 延寿县| 北辰区| 社旗县| 安乡县| 黄梅县| 和田市| 金坛市| 永仁县| 皋兰县| 南汇区| 临澧县| 西乌| 北辰区| 台南市| 通江县| 文登市| 古田县| 旬阳县| 山阳县| 高邮市| 东安县| 莒南县| 丹江口市| 中阳县| 定安县| 肥西县| 凭祥市| 饶阳县| 抚州市| 滁州市| 安顺市| 综艺| 崇明县| 馆陶县| 象州县| 霍林郭勒市| 商丘市| 铜鼓县| 彩票| 都昌县|