JQ与原生JS的细节问题

81 阅读 0 评论 54 点赞

我是靠谱客的博主迅速鸭子，最近开发中收集的这篇文章主要介绍JQ与原生JS的细节问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

2018.03.29

学习JS原生代码和JQ代码的时候，JQ代码相对于JS代码更短小精悍，也符合JQ创建的口号——write less do more！实际上不管什么方法什么语言，用最少的代码不断优化程序是很好的选择。（当然我们也应该看到JQ代码执行的局限性——需要引入JQ库从而影响browser的时间）。

JQ是JS的一个library，当然在JQ中的方法和语法不能直接移植到JS中使用。那么在实际coding过程中需要分清楚两种方法微小的差别（onmouseclick——mouseclick）。

$(node).hide();
$(node).show();

document.getElementById("btn").style.display = "block";

$(node).text("hello")；
document.getElementById("btn”).innerText = "hello";

小细节：使用 getElementsByTagName 寻找的结果是一个伪数组（注意是elements复数形式，自己之前写错好几次），使用eq（num）确定具体的元素，这里的伪数组和数组的下标规则一致，从0开始，同样可以获得伪数组的length，进一步实现循环。

细节决定成败，程序中的每一个小细节会决定程序整体的执行效率。

小白一枚，不对之处请各位技术大牛批评指正。

2019-3-1

一年过去了，继续写一下上面的感触。

1. JQ 在很多项目中很笨重，所以在前六个月的开发过程中基本没有使用jquery。主要使用的就是 React 和 Vue 框架，其他操作就是原生的JS代码。在React的设计思路中，不需要直接操纵 DOM，通过数据驱动界面，所以改变 props 和 state 就可以改变界面的内容。当然一部分样式（界面元素的尺寸）需要使用 this.refs.node 获取具体的DOM元素，进一步获取样式改变样式。

2. JS原生代码的改变。ES6 现在已经成为主流，ES8的新标准正在发展。可以预测，未来新的内容会改变传统的JS语言，面向对象的编程模式更突出。