有时刻须要用 jQuery，有时刻不须要用，该若何分辨？

jQuery 的优势在于它的 DOM 处理、Ajax，以及跨浏览器。如不雅在项目中惹人 jQuery，多半是因为对这些功能的需求。而对于不操作 DOM，也不须要推敲跨浏览器(比如用于转译对象)的部分，则推敲尽可能的用原生 JavaScript 实现。

jQuery 与原生 JavaScript 的结合

jQuery 对象实现了部分数组功能的伪数组

起重要留意的一点，就是 jQuery 对象是一个伪数组，它是对原生数组或伪数组(比如 DOM 节点列表)的封装。

如不雅要获得某个元素，可以用 [] 运算符或 get(index) 办法；如不雅要获得包含所有元素的数组，可以应用 toArray() 办法，或者经由过程 ES6 中惹人的 Array.from() 来转换。

留意 each/map 和 forEach/map 回调函数的参数次序

$.fn.each() 的回调定义如下：

Function(Integerindex,Elementelement)

而 Array.prototype.forEach() 的回调定义是

Function(currentValue,index,array)

回调的第一个参数是数组元素本身，第二个参数才是元素所有的地位(序号)。并且这个回调有第三个参数，即全部数组的引用。

请特别留意这两个回调定义的第一个参数和第二个参数，所表示的意义正好交换，这在混用 jQuery 和原生代码的时刻很轻易产生掉误。

对于 $.fn.map() 和 Array.prototype.map() 的回调也是如斯，并且因为这两个办法同名，产生掉误的概率会更大年夜。

$.fn.each() 和 $.fn.map() 回调中经常会应用 this，这个 this 指向的就是当前数组元素。恰是因为有这个便利，所以 jQuery 在定义回请贩时刻没有把元素本身作为第一个参数，而是把序号作为第一个参数。

不过 ES6 带来了箭头函数。箭头函数最常见的感化就是用于回调。箭头函数中的 this 与箭头函数定义的高低文相干，而不像通俗函数中的 this 是与调用者相干。

如今问题来了，如不雅把箭头函数作为 $.fn.each() 或 $.fn.map() 的回调，须要特别留意 this 的应用——箭头函数中的 this 不再是元素本身。鉴于这个问题，建议若非须要，仍然应用函数表达式作为 $.fn.each() 和 $.fn.map() 的回调，以保持原有的 jQuery 编程习惯。实袈溱须要应用箭头函数来引用高低文 this 的情况下，切切记得用其回调定义的第二个参数作为元素引用，而不是 this。

回调的第一个参数是数组元素地点的地位(序号，大年夜 0 开端)，第二个参数是元素本身。

$.fn.map() 返回的并不是数组

与 Array.prototype.map() 不合， $.fn.map() 返回的不是数组，而是 jQuery 对象，是伪数组。如不雅须要获得原生数组，可以采取 toArray() 或 Array.from() 输出。

jQuery Promise

jQuery 是经由过程 $.Deferred() 来实现的 Promise 功能。在 ES6 以前，如不雅引用了 jQuery，根本上不须要再专门引用一个 Promise 库，jQuery 已经实现了 Promise 的根本功能。

不过 jQuery Promise 固然实现了 then()，却没有实现 catch()，所以它不克不及兼容原生的 Promise，不过用于 co 或者 ES2017 的 async/await 毫无压力。

留意 each()/map() 中的 this

固然 jQuery 的 Promise 没有 catch()，然则供给了 fail 事宜处理，这个事宜在 Deferred reject() 的时刻触发。响应的还有 done 事宜，在 Deferred resovle() 的时刻触发，以及 always 事宜，不论什么情况都邑触发。

与一次性的 then() 不合，事宜可以注册多个处理函数，在事宜触发的时刻，响应的处理函数会依次履行。别的，事宜不具备传递性，所以 fail() 不克不及在写在 then() 链的最后。

结语

总的来说，在大年夜量操作 DOM 的前端代码中应用 jQuery 可以带来极大年夜的便利，也使 DOM 操作的相干代码更易读。另一方面，原生 JavaScript 带来的新特点确切可以替代 jQuery 的部分对象函数/办法，以降低项目对 jQuery 的依附法度榜样。

jQuery 和原生 JavaScript 应当是共生关系，而不是互斥关系。应当在合适的时刻选用合适的办法，而不是那么绝对的非要用谁代替谁。

【编辑推荐】

1. 蜜斯姐们怒怼法度榜样员！法度榜样员独身单身的原因竟然是这个......
2. 百万开辟者查询拜访告诉你：法度榜样员最憎恶什么编程说话？
3. 法度榜样员花1小时写JavaScript 常用办法总结
4. 蜜斯姐，你的法度榜样员男同伙已经参加购物车！
5. 看看60万码农怎么评论：这世界上还有没有月薪低于3万的法度榜样员？

【义务编辑：张燕妮 TEL：（010）68476606】

　　推荐阅读

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

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

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

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

 1/2    1