在最早的开发中,大部分都是使用jQuery,这给我们带来了很多便利:快速选择元素,API方便操作DOM元素,浏览器间完美兼容,链式操作,动画,ajax等等,这些都是jQuery给前端开发者带来的好处。为什么现在用的人越来越少了?让我从以下几点来阐述我的想法:
1.JS更新的影响
1.快速选择DOM节点
对于大多数使用jQuery的开发工程师来说,能够快速选择DOM节点无疑是一个重要原因,但就目前的情况来看,这个优势显然已经消失了。为什么?我给大家讲两个API,已经有很多人用了,分别是document.querySelector和document.querySelectorAll方法。这两个方法可以通过以css选择器的形式传入一个字符串来匹配预期的DOM节点。以下是这两种API的当前兼容性:
从图中可以看出,这两个API很好的兼容了各种浏览器。
该API也用于Vue中的元素采集:
所以jQuery快速选择DOM节点的优势已经不存在了。
2.便于操作DOM元素的API
可以方便操作DOM元素的API,比如addClass,removeClass,toggleClass。现在也支持原生JS,这个API叫做classList。
虽然IE兼容性并不完美,但最基本的实现已经实现。
3.动画
现在CSS3动画技术已经非常成熟,完全可以替代jQuery制作的动画,可以实现比jQuery的animate方法更复杂的动画。兼容性好,性能消耗低,何乐而不为呢?比如背景颜色过度,CSS3可以完美实现,而jQuery不能。而且现在有很多优秀的CSS3动画库,大家一定听说过著名的Animate.css库。
4.Ajax操作
jQuery的ajax操作为我们省去了浏览器兼容的问题,还提供了简洁的API来调用get和post,让开发者从繁琐的兼容和使用原生API中解脱出来。然而现在,这个优势已经很小了。不管是原生JS还是axios的Fetch API。都为我们提供了强大的ajax能力,axios有拦截器的优势。这个时候jQuery的ajax真的是无与伦比。
当然,Fetch在IE上肯定是没用的。
但是已经有了Fetch的Polyfill方案:github/fetch。
所以只要引用这个小JS,就可以使用方便的ajax了。与jQuery相比,它要小得多。
第二,性能问题
在最初的开发中,工程师并不太担心性能。但现在不同了。为了提高用户表现,首先要解决浏览器渲染带来的性能问题。最经典的概念是重绘和回流。
* *重绘:* *是指重绘页面,比如修改某个元素的背景色。
* *回流:* *一般来说,浏览器进入页面的时候,已经回流过一次了。回流其实是指页面的重新布局。
既然要提升性能,可以先从这两个概念入手。可以肯定的是,以最低的成本更新页面是提高性能的最佳手段。可惜jQuery没有做到。为什么这么说?请看下面的分析3360。
当我们得到一组要渲染到ul标签中的新闻数据时,我们通常会将新闻数据的字符串一个一个拼接起来,然后使用$符号选择ul元素,将ul的innerHTML的值修改为拼接后的字符串(使用html API)。此时,第一次渲染完成。这一页已经重绘(此时不可避免)。首先不分析第一次的表现,接下来的解释会更有力度。
例如,我们现在有一个更改按钮。在传统的开发模式下,此刻的change按钮一定会执行上面的代码,获取元素并修改元素的innerHTML,但现在问题来了,我们有必要把元素全部删除重新添加吗?答案肯定是否定的(如下图,创建一个元素要花多少钱)。
这时,我们只需要修改每个li中的文本和A标签中的链接。显然,没有必要像上面那样再加上李。因为一个DOM元素可能包含数百个属性,所以这是一个很大的性能开销。
那么新概念虚拟DOM (Virtual DOM)就可以解决这个问题。实际上,虚拟DOM是真实DOM节点的描述,可以通过改变虚拟DOM(虚拟DOM不一定比jQuery好)来进行最小的改变。
尤雨溪:网上说real DOM运行很慢,但是测试结果比React快。为什么?
第三,现代框架对jQuery的影响
目前国内流行的React、Vue、Angular框架都属于MV*框架的范畴,设计特点主要集中在数据上。可以说,DOM的操作是留给框架的。与传统的jQuery相比,它具有更高的开发效率、更高的代码可维护性、更强的可扩展性和更好的性能。
例如:
我让jQuery买了瓶酱油,给了他100块钱。这时候就需要告诉他小店怎么走,怎么跟老板说买什么酱油,买多少,找多少零钱,怎么拿回* *(祈使)* *。
这时候我让Vue去买酱油。这时候我只需要给他钱,告诉他目的地在哪,买什么酱油就行了。没必要手把手教他* *(函数式)* *。
这就是传统开发和现代框架开发的区别。
使用现代框架开发,可以使用Webpack(当然jQuery也可以使用Webpack),可以使用别人提供的现成脚手架,比如create-react-app、vue-cli等。开发效率大大提高,可以使用最新的ES6和ES7语法进行开发,将编码体验提升了一个层次。
现在jQuery已经完美退出历史舞台,他完成了自己的任务。
暂无讨论,说说你的看法吧