网站建设、公众号开发、微网站、微商城、小程序就找牛创网络 !

7*24小时服务专线: 152-150-65-006 023-68263070 扫描二维码加我微信 在线QQ

前端开发技术团结互助,让我们共同进步!

当前位置:主页 > 技术资讯 > 开发技术 > 前端开发技术 >

我们的优势: 10年相关行业经验,专业设计师量身定制 设计师一对一服务模式,上百家客户案例! 企业保证,正规流程,正规合作 7*24小时在线服务,售后无忧

Jquery为什么越来越多的人选择逃离?

文章来源:重庆网站建设 发布时间:2019-07-13 22:39:32 围观次数:
分享到:

摘要:大多数最早的开发都使用了jQuery,它为我们带来了很多便利:快速选择元素,轻松访问DOM元素的API,浏览器之间的完美兼容性,链操作,动画,ajax等。两者都是jQuery的优点 前端开发人员。

大多数最早的开发都使用了jQuery,它为我们带来了很多便利:快速选择元素,轻松访问DOM元素的API,浏览器之间的完美兼容性,链操作,动画,ajax等。两者都是jQuery的优点 前端开发人员。 为什么现在使用它的人越来越少? 让我分清以下几点并解释我的想法:

一,现代框架对jQuery的影响:


  如今,国内的React,Vue和Angular框架都在MV *框架的范围内。 设计特征主要基于数据。 可以说DOM的操作留给了框架。 这比传统的jQuery开发更有效,具有高代码可维护性,可伸缩性和性能。


  例如:


  我让jQuery买了一瓶酱油给了他100元。 这时候,我们需要告诉他怎么去小店,怎么告诉老板买酱油,买多少酱油,找多少变化,还是要告诉他怎么回来 (命令)。


  这时,我让Vue去买酱油。 这时,我只需要给他钱,并告诉他目的地在哪里,买什么酱油,而不需要教他(功能)。


  这是传统发展与现代框架发展之间的差异。


  使用现代框架开发,您可以使用Webpack(当然使用jQuery或Webpack),您可以使用其他人提供的现成脚手架,例如create-react-app,vue-cli。 大大提高了开发效率,并且可以使用最新的ES6,ES7语法进行开发,在编码体验方面,它提升了一个档次。


  现在jQuery完全退出了历史舞台,他已经完成了他必须完成的任务。



  二,性能问题:


  在最初的开发中,工程师们并没有过多地纠缠于性能问题。 但现在情况有所不同。 为了改进用户的实施例,首先要解决浏览器绘图带来的性能问题。 最经典的是重绘和回流的概念。


  重绘:重绘页面,例如,修改元素的背景颜色。


  回流:通常,浏览器在进入页面时已经执行了重排。  Reflow实际上是指页面的重新布局。


  由于我们希望提高性能,我们可以从这两个概念开始,并且确保以最低成本更新页面是提高性能的最佳方法。 但不幸的是,jQuery没有。 为什么这么说,请看以下分析:


  当我们得到一组要呈现到ul标签中的新闻数据时,我们通常首先将新闻数据逐个连接起来,然后使用$ character选择ul元素,并将ul的innerHTML的值修改为stitched 字符。 字符串(使用html API)完成此时的第一次渲染。 这个页面已被重绘(此时不可避免),首先,不要分析第一次表现的好坏,接下来的描述会更加强大。


例如,我们此时还有一个更改按钮。 在传统的开发模式中,此时的更改按钮仍然必须执行上面的代码,获取元素,修改元素的innerHTML,但现在出现问题,是否有必要再次删除所有元素,然后添加它 再次?  ? 绝对不需要答案(如下图所示,创建元素的成本有多高)。



  li节点上的所有属性

  因为此时我们只需要修改每个li中的文本和a标签中的链接,显然没有必要像上面那样重新添加li。 由于DOM元素,它可能包含数百个属性,这是一个很大的性能开销。


  然后新概念Virtual DOM(虚拟DOM)可以解决这个问题。 实际上,Virtual DOM是对真实DOM节点的描述。 通过更改Virtual DOM以最小的更改来更改真正的DOM(Virtual DOM不一定比jQuery性能更好)。


  尤玉玺:网上说真正的DOM很慢,但测试结果比React快,为什么呢?


  第三,JS更新的影响:


  1.快速选择DOM节点


  对于大多数使用jQuery的开发工程师来说,快速选择DOM节点的能力无疑是一个重要原因,但在目前的情况下,这种优势显然已经消失,为什么呢? 我们来谈谈两个API。 这两个API已经被很多人使用,即document.querySelector和document.querySelectorAll方法。 通过以css选择器的形式传入字符串,可以将这两个方法与预期的DOM节点进行匹配。 以下是两个API的当前兼容性:



  querySelector兼容性


  querySelectorAll兼容图

  从图中可以看出,这两个API与每个浏览器都很兼容。


  此API还用于Vue中的元素检索:

image.png


  因此,jQuery快速选择DOM节点的优势已不复存在。


  2.易于操作的DOM元素API


  可以轻松操作DOM元素的API,例如addClass,removeClass和toggleClass。 现在也支持原生JS。 此API称为classList。



  尽管IE兼容性并不完美,但也实现了最基本的实现。


  3.动画


  现在CSS3动画技术非常成熟,它可以完全取代jQuery制作的动画,并且可以实现比jQuery的动画方法更复杂的动画,兼容性好,性能消耗小,为什么不呢? 例如,如果你获得过多的背景颜色,CSS3可以完美实现,但jQuery将无法正常工作。 现在已经有很多优秀的CSS3动画库,必须听到着名的Animate.css库。



  当前的CSS3动画兼容性


image.png

  4.Ajax操作


  jQuery的ajax操作使我们免于兼容的浏览器问题,并且还提供了一个简洁的API来调用get和post,从而使开发人员免于繁琐的兼容性和使用本机API。 但现在,这个优势已经非常小了。 无论是原生JS Fetch API还是axios。 两者都为我们提供了强大的ajax使用,而axios具有拦截器的优势。 这时,jQuery的ajax确实无法与之匹敌。


  当然,Fetch在IE中绝对没用。



  获取兼容性

  但已经有Fetch的Polyfill解决方案:github / fetch


  这只需要参考这个小JS,就可以使用方便的ajax。 与jQuery相比,它要小得多。


本文由 重庆网站建设 整理发布,转载请保留出处,内容部分来自于互联网,如有侵权请联系我们删除。

相关热词搜索:jquey jquey入门 前端开发

上一篇:JavaScript 不容错过的八大优化建议,来自Google Chrome 工程师
下一篇:2019前端热门技术汇总整理

热门资讯

鼠标向下滚动