我以前很喜欢 jquery,而且说实话,我是先学jquery,再学 javascript 的。所以我写这篇文章有点像是在背叛 jquery。
我知道,关于为什么不应该用 jquery 的文章已经汗牛充栋,但我只是想说下自己的亲身体验。
随着 web 的发展,新技术长江后浪推前浪,前浪死在沙滩上。就像有些编程语言曾经辉煌过,现在也消失不见了。我认为 jquery 也不例外,是时候跟 它说再见了,虽然它曾经给我们带来过美妙的编程体验。
为什么要放弃 jquery 呢?因为有 vue 啊!如果你看过我之前的文章,你应该能猜到我是 vue.js 粉。vue.js 提供了非常多的工具,我敢说它比jquery 方便多了。
让我们来看一个点击事件的例子。
请注意,我省略掉了框架的初始化部分
一个 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');
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译站”,为你奉上更多技术干货。
如对本文有疑问, 点击进行留言回复!!
网友评论