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

2020-03-06 20:43:42 阅读：302 来源： 互联网

标签：jQuery 过年 api fetch 抛弃 Vue js response

作者简介：
尚珣老师，从事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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

不用 jQuery 还能用什么？

DOM 与事件

AJAX 请求