作家
登录

程序员总结分析:为什么要用原生 JavaScript 代替 jQuery?

作者: 来源: 2017-11-08 13:07:17 阅读 我要评论


跟着 JavaScript 本身的完美,越来越多的人开端爱好应用原生 JavaScript 开辟代替各类库,个中不少人发出了用原生 JavaScript 代替 jQuery 的声音。这并不是什么坏事,但也不见得就是功德。如不雅你真的想把 jQuery 早年端依附库中移除掉落,我建议你慎重推敲。

jQuery 的感化

起首 jQuery 是一个第三方库。库存在的价值之一在于它能极大年夜地简化开辟。一般情况下,第三方库都是由原生说话特点和基本 API 库实现的。是以,理论上来说,任何库第三方库都是可以用原生说话特点代替的,问题在于是否值得?

引用一段 jQuery 官网的话:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

这一段话很谦虚的介绍了 jQuery 在处理 DOM 和跨浏览器方面做出的供献。而事实上,这也恰是我们选用 jQuery 的重要原因,并顺带应用了它带来的一些对象,比如数组对象,Deferred 等。

对于我来说,最常用的功能包含

  • 在 DOM 树中进行萌芽

  • 事宜处理

  • Ajax

  • Deferred 和 Promise

  • 对象和数组处理

  • 还有一个一向在用却很难在列清单时想到的——跨浏览器

到底是谁在替代谁?

jQuery 定义在 $.fn 上的 each() 和 map() 办法与定义在 Array.prototype 上的原生办法 forEach() 和 map() 对应,它们的参数都是回调函数,但它们的回调函数定义有一些细节上的差别。

膳绫擎提到的所有功能都能用原生代率攀来实现。大年夜本质上来说,jQuery 就是用来代替原生实现,以达到削减代码,加强可读性的目标的——所以,到底是用 jQuery 代替原生代码,照样用原生代码代替 jQuery?这个先后因不雅关系可否搞明白?

我看到说用 querySelectorAll() 代替 $() 的时刻,不禁在想,用 jQuery 一个字符就能解决的,为什么要写十六个字符?大年夜部分浏览器是有实现 $(),然则写原生代码的时刻你会推敲 $() 的浏览器兼容性吗?jQuery 已经推敲了!

我看到一大年夜堆创建 DOM 构造的原生 JavaScript 代码的时刻,不禁在想,用 jQuery 只须要一个办法链就解决了,我甚至可以用和 HTML 构造类似的代码(包含缩进),比如

法度榜样员总结分析:为什么要用原生 JavaScript 代替 jQuery?

这段代码用 document.createElement() 来实现完全没有问题,只不过代码量要大年夜得多,并且会出现大年夜量反复(或类似)的代码。当然是可以把这些反复代码提掏出来写成函数的……不过 jQuery 已经做了。

注,拼 HTML 的办法实袈溱弱爆了,既轻易掉足,又不易浏览。如不雅有 ES6 的字符串模板之后,用它来写 HTML 也是个不错的主意。

修改 DOM 树及 DOM 相干操作

  • 就 DOM 操作这一部分来说,jQuery 仍然是一个异常好用的对象。这是 jQuery 替代了原生 JavaScript,以前如斯,如今仍然如斯。

    没落的 jQuery 对象函数

    jQuery 2006 年被创造出来的时刻,还没有 ES5(2011年6月宣布)。即使在 ES5 宣布之后很长一段时光里,也不是所有浏览器都支撑。是以在这一时代,除 DOM 操作外,jQuery 的巨大年夜供献在于解决跨浏览器的问题,以及供给了便利的对象和数组操尴尬刁难象,比如 each()、 index() 和 filter 等。

    如今 ECMAScript 方才宣布了 2017 的标准,浏览器标准纷乱的问题也已经获得了很好的解决,前端界还出现了 Babel 如许的转译对象和 TypeScript 之类的新说话。所以如今大年夜家都尽可宁神的应用各类新的说话特点,哪怕 ECMAScript 的相干标准还在制订中。在这一时代,jQuery 供给的大年夜量对象办法都已经有了原生替代品——在应用上差别不大年夜的情况下,确切宁愿用原生实现。

    事实上,jQuery 也在极尽可能地采取原生实现,以进步履行效力。jQuery 没有放弃这些已有原生实现的对象函数/办法,重要照样因为向下兼容,以及一如既往的供给浏览器兼容性——毕竟不是每一个应用 jQuery 的开辟者都邑应用转译对象。

    如斯以来,必定会存在 jQuery 和原生 JavaScript 的交集,那么,就不得不说说须要留意的处所。

    那么,对于 JavaScript 开辟者而言,jQuery 确切有很多对象办法可以被原生 JavaScript 函数/办法替代。比如

    • $.parseJSON() 可以用 JSON.parse() 替代,并且 JSON.stringify() 还弥补了 jQuery 没有 $.toJSON() 的不足;

    • $.extend() 的部分功能可以由 Object.assign() 替代`

    • $.fn 的一些数据处理对象办法,比如 each()、 index() 等都可以用 Array.prototype 中响应的对象办法替代,比如 forEach()、 indexOf() 等。

    • $.Deferred() 和 jQuery Promise 在某些情况下可以用原生 Promise 替代。它们在没有 ES6 之前也算是个不错的 Promise 实现。

    • ......

    $.fn 就是 jQuery.prototype,也就是 jQuery 对象的原型。所以在其上定义的办法就是 jQuery 对象的办法。

    这些对象办法在原生 JavaScript 中已经逐渐弥补完美,但它们仍然只是在某些情况下可以被替代……因为 jQuery 对象是一个特有的数据构造,针对 jQuery 自身创建的对象办法在感化于 jQuery 对象的时刻会有一些针对性的实现——既然 DOM 操作仍然不克不及把 jQuery 抛开,那这些办法也就弗成能被完全调换掉落。


      推荐阅读

      洞察存储趋势,建设高效存储系统

    简单地说,在任何存储上运行的应用都可以或许在用户定义的策略的驱动下主动工作,这种理念就叫软件定义存储(SDS,Software Defined Storage)。 >>>详细阅读


    本文标题:程序员总结分析:为什么要用原生 JavaScript 代替 jQuery?

    地址:http://www.17bianji.com/lsqh/38620.html

  • 关键词: 探索发现

    乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

    网友点评
    自媒体专栏

    评论

    热度

    精彩导读
    栏目ID=71的表不存在(操作类型=0)