浅谈被jQuery抛弃的函数及替代函数

简介

随着Web技术的不断进化，jQuery作为一种经典的JavaScript框架，虽然在特定的场景下仍然具有优势，然而随着原生JavaScript的不断完善，以及现代浏览器对于各种新特性标准的支持，我们发现许多jQuery高度封装并易用的函数已经有了更好的原生实现，并且因为不依赖于第三方库，越来越受到开发者的青睐。本文将对一些jQuery中已经被抛弃或不再必要的函数，以及可替代的原生实现进行简要介绍。

$.load() -> fetch()

$.load()函数是jQuery中最为常用的异步数据获取函数之一。它主要用来异步地加载HTML片段或者其他的数据。虽然简单易用，然而在许多业务场景中，它不断引发性能问题和安全问题，比如可能出现跨站脚本攻击（XSS）等情况。因此，在现代浏览器（edge, Firefox, chrome等）中，fetch()函数已经成为了一个更为优秀的异步请求方案。相较于$.load()函数，它拥有的优势有：

• 自带 Promise 支持，并且容易改写为 async/await 版本。
• 支持异步和同步两种请求模式，并且更加丰富的参数配置支持更灵活的请求。
• 无需引入 jQuery，避免出现版本冲突等问题。

以下是fetch()函数的代码示例：

fetch('url',{
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(payload)
}).then(res=>res.json())
.then(data=>{
  console.log(data)
});

$.each() -> Array.forEach()

$.each()函数是jQuery中一个非常实用的遍历函数，它通常用于对一个数组或者对象进行遍历操作。但是，相较于内置的 Array.forEach 方法而言，它存在一些明显的不足：

• $.each()除了对象和数组之外，还可以遍历类似数组的对象，然而这类对象通常不常见。
• $.each()在遍历一个空的数组或对象时会立即执行回调函数，相较于Array.forEach而言，这可让代码的复杂度和兼容性更差。
• Array.forEach自带this绑定，不需要传参。

以下是Array.forEach的代码示例：

let arr = [1, 2, 3];
arr.forEach(function(item, index, array) {
  console.log(item, index, array);
});

结论

虽然 jQuery 在其辉煌时期有着巨大的优势，但是使用它并一定是最佳选择。在现代浏览器提供了大量的原生函数的情况下，学习和使用它并不是必须的。本文介绍了两个常用jQuery函数的不同的替代实现，实际应用中，还需要根据具体的业务场景进行选择和搭配使用。