React Vue等盛行还使用jQuery的几个理由

据统计， jQuery 全球网站使用量目前依然高企。但一个不争事实，随着Web技术现代化，jQuery 已经被边缘化，也有不少人直接认为 jQuery 已经过时，不必再考虑使用。这部分人可能很少用，或不用 jQuery，使不使用jQuery，还有得探讨。

首先， jQuery 在开发现代前端UI上，的确失去了曾经的优势，因为Web标准成熟化，不必过多考虑兼容一致性，DOM操作API也有了替代；另外，又出现了新技术市场（如MVVM），可以声明式的自动化UI功能的开发。

其实，是否学用一个工具（在新项目里使用），需要考虑很多因素。就jQuery而言，我认为还有学习和使用它的地方。

使用

为一个商业项目选择技术栈，都要考虑投入成本和回报比率。反对使用jQuery的人一般是担心它会过时，学了用不上，也怀疑它的开发效率。任何技术都会过时的，所以在可预期的项目上，技术是否过时不是考虑的首要因素。首要考虑的是学习、开发维护成本，以及其回报的比率。

每一种工具都是有学习成本，在使用上也有其适用性的。原生DOM，React 的学习成本并不低，也有其独特的适用范围。

原生DOM API作为一种标准，它一定是具有通用性的，DOM操作是比较原始
MVVM 其实只适用于状态更新的UI，不适用一些细微的DOM操作，例如动画，窗口操作

其实 jQuery 就是一个DOM操作的工具库，你的原生或React项目一定会有一些自定义的工具库，用来提高开发效率，因为原生操作是很原始的，React 的抽象不适用所有交互功能的需求。

用不用jQuery，要考虑项目性质，和具体开发任务。就目前而言，一些中小项目，数据交互功能不多的，引用 jQuery 投入回报比应该是不错的。

学习

除了使用的角度，从学习的角度，我的观点是，研习 jQuery使用和源码，对于提高 JS水平，和前端水平依然有帮助。

Atypic 认为依然使用 jQurey 的六个理由

以下简译一下 Atypic 团队总结的使用 jQuery的几个理由

第一，jQurey 的 DOM节点选择器比较原生的强

现在原生querySelector也是使用 CSS 选择器的，但是jQurey 在CSS标准之上更加的“高级”。所谓高级是指针对某种 节点查询任务 更加的直接，和方便。这些部分选择器语法并没被纳入CSS标准。例如：伪类 :visible ：

$('a[href^="http://"]:visible')

这个查询是选择所有前缀是 http:// 这个不安全协议名，且可见的a标签。

如果你有大量这种高级查询，原生满足不了（必须写大量原始操作），没有jQuery，你得自己封装。

第二，jQurey 支持链式语法，可将多个DOM操作写成一句

jQurey构造函数（$()）创建并返回一个 jquery对象，这个对象实例的所有 DOM 操作方法都会修改当前实例后返回它（新的修改过后jquery实例）^注1，这样，多个 DOM操作就可以连写在一起，这就是有名的 链式语法。例如

$('a[href^="http://"]').addClass(‘insecure').attr('target', '_blank');

以上语句选中的DOM节点执行了两次操作：添加样式类（insecure）和属性（target）。如果用原生得这么写：

 const insecure_links = document.querySelector(‘a[href^=“http://“]’);
  insecure_links.classList.add(‘insecure’);
  insecure_links.addAttribute(’target’, ‘_blank’);

这里比较明显的看出jQuery的优势。

第三，jQurey支持自动批量处理节点数组，语法更简洁

jQuery对象的DOM操作方法默认是批量处理，无论是你选一个或是多个；但是如果是多个，原生必须使用 querySelectorAll，并且选中后还要手动循环处理每个节点：

  const insecure_links = document.querySelectorAll(‘a[href^=http://“]’);
  for (let i = 0; i < insecure_links.length; i++) {
      insecure_links[i].classList.add(‘insecure’);
      insecure_links[i].addAttribute(’target’, ‘_blank’);
  }

无论是一个还是多个，jQuery 都是一条语句（没变化）：

$('a[href^="http://"]').addClass('insecure').attr('target', '_blank');

jQuery 一个中间变量都不用，代码简洁易读，这就是效率。

第四，浏览器无关

现代浏览器普及率已经相当不错，但不绝对，且如果你有老项目需要维护，目前还是有学用jQuery的必要。如果你想用最新技术，又不得不维护兼容性，则得自己处理兼容问题，这可能不比直接使用 jQuery 更有效率。尤其是 AJAX 和事件检测这两个兼容问题。

第五，丰富的插件库

大家都很喜欢 jQuery的一个点，是它有很多非常有用的插件。这些插件不但多样，且成熟。一个典型例子就是轮播插件（carousel）。不使用插件，要我们自己写一个，我们得花一到两个工作日，轮播展示功能很复杂。

使用jQuery，则有多种轮播插件可选择，灵活且成熟，可满足任何轮播展示的需求。

小结

以上理由都为了——开发者效率，而效率要靠专注，需要抽象来维护一个较小的工作环境，忽略不必要的细节。jQuery 的抽象是有效率的。

不过，就是因jQuery是有抽象的，也作为一种依赖是有大小的，所以，会有性能（运行和加载）损耗。这些都是项目成功的可能因素。

参考

https://love2dev.com/blog/jquery-obsolete/https://oscarotero.com/jquery/https://jquery.cuishifeng.cn/
jquery中的$（）详解 https://www.cnblogs.com/insane-Mr-Li/p/9219277.html
Cheat sheet for moving from jQuery to vanilla JavaScript https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript

Describe your new note here.

Promise 也是这么设计的↩