到底该抛不抛弃JQuery

2024-04-02 19:04:59 518人浏览安东尼

摘要

目录前言不用 Jquery 用什么？DOM 与事件ajax 请求总结前言我以前很喜欢 jQuery，而且说实话，我是先学jQuery，再学 javascript 的。所以我写这篇文

前言

我以前很喜欢 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;
}