首页 > 其他分享> > 彻底抛弃 jQuery ，不然还留着过年？

彻底抛弃 jQuery ，不然还留着过年？

2020-03-06 20:43:42 作者：互联网

作者简介：
尚珣老师，从事7年JAVA开发工作，
擅长 Javaweb，小程序物联网开发公众号开发
公众号：java后端技术精选
csdn专栏：https://blog.csdn.net/love468092550
主要分享JVM、Spring、Spring Boot、Cloud、IDEA、Dubbo、Redis、git、微服务、
MySQL、集群、分布式、中间件、消息队列、Linux、网络、多线程、公众号开发、小程序开发、面试题等。

不用 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,过年,api,fetch,抛弃,Vue,js,response
来源： https://blog.csdn.net/jnshu_it/article/details/104703604