彻底抛弃 jQuery ,不然还留着过年?

幸运
185
文章
0
评论
三月 12, 202012:20:33 评论 103 2753字阅读9分10秒

我之前很喜爱 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 组件替代品。

你们怎么看?欢迎在评论区留言!

本文来源于:彻底抛弃 jQuery ,不然还留着过年?-幸运草博客
特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。

  • 本站QQ群
  • weinxin
  • 捐赠本站
  • weinxin
jquery中cookie用法介绍 jQuery

jquery中cookie用法介绍

cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使用方法。 使用JQuery操作cookie时 发生取的值不正确的问题: ...
jQuery事件:bind、delegate、on的区别 jQuery

jQuery事件:bind、delegate、on的区别

「内容简介」本文详解各种jQuery事件绑定方法:on,bind,delegate,live,unbind,trigger。 同时总结一下常用的jQuery事件技术:如何阻止事件冒泡、阻止浏览器默认行...
jQuery入门讲解-jQuery样式操作 jQuery

jQuery入门讲解-jQuery样式操作

css 操作 通过css()的方法设置或者获取样式,无论样式属性是从外部导入的,还是直接写在HTML标签里面的,css()方法都可以获取到。。 1、设置单个样式: 2、设置多个样式: 操作多个样式的时...
Jquery Notes jQuery

Jquery Notes

1.什么是jQuery 2.如何使用jQuery 3.查找元素 1.什么是jQuery jQuery是第三方开发的执行DOM操作的极简化的函数库 第三方:下载 执行DOM操作:jQuery还是执行DO...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: