何时使用Vanilla JavaScript与jQuery？

Question

我注意到在监控/尝试回答常见的jQuery问题时，有一些使用javascript而不是jQuery的实践，实际上可以让你写得更少，并做 ...相同的数量。 并且还可以产生性能优势。

一个具体的例子

$(this) vs this

在单击事件中引用单击的对象id

jQuery的

$(this).attr("id");

使用Javascript

this.id;

还有其他类似的常见做法吗？ 可以更轻松地完成某些Javascript操作，而无需将jQuery添加到组合中。 或者这是一个罕见的情况？ （jQuery“快捷方式”实际上需要更多代码）

编辑：虽然我很欣赏有关jQuery与普通javascript性能的答案，但实际上我正在寻找更多的定量答案。 在使用jQuery时 ，使用普通javascript代替使用$()实际上会更好（可读性/紧凑性）的实例。 除了我在原始问题中给出的例子。

Answer 1

• this.id （如你所知）
• this.value （在大多数输入类型上。当<select>没有在其<option>元素上设置value属性或Safari中的无线电输入时，我知道的唯一问题是IE。）
• this.className获取或设置整个“class”属性
• this.selectedIndex对<select>获取所选索引
• this.options针对<select>获取<option>元素列表
• this.text反对<option>获取其文本内容
• this.rows针对<table>获取<tr>元素的集合
• this.cells反对<tr>获取其单元格（td＆th）
• this.parentNode获取直接父级
• this.checked以获取checkbox的选中状态谢谢@Tim Down
• this.selected得到一个option的选择状态谢谢@Tim Down
• this.disabled获取input的禁用状态谢谢@Tim Down
• this.readOnly获取input的readOnly状态谢谢@Tim Down
• this.href针对<a>元素获取其href
• this.hostname对<a>元素获取其href的域
• this.pathname针对<a>元素获取其href的路径
• this.search针对<a>元素获取其href的查询字符串
• this.src对一个有src的元素

...我想你应该已经明白了。

有时性能至关重要。 就像你在循环中多次执行某些操作一样，你可能想抛弃jQuery。

一般来说，您可以替换：

 $(el).attr('someName'); 

有：

上面的措辞很差。 getAttribute不是替换，但它确实检索从服务器发送的属性的值，并且其对应的setAttribute将设置它。 在某些情况下是必要的。

下面的句子有点覆盖它。 请参阅此答案以获得更好的治疗。

el.getAttribute('someName');

...以便直接访问属性。 请注意，属性与属性不同（尽管它们有时会互相镜像）。 当然也有setAttribute 。

假设你遇到一个情况，你需要打开一个页面，你需要打开某个类型的所有标签。 使用jQuery简单易行：

$('span').unwrap();  // unwrap all span elements

但是如果有很多，你可能想做一些原生的DOM API：

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

此代码非常简短，它的性能优于jQuery版本，并且可以轻松地在您的个人库中实现可重用的功能。

看起来我有一个无限循环与外部while因为while(spans[0]) ，但因为我们正在处理一个“实时列表”，它会在我们执行parent.removeChild(span[0]);时更新parent.removeChild(span[0]); 。 这是一个非常漂亮的功能，我们在使用Array（或类似Array的对象）时错过了这个功能。

Answer 2

正确的答案是，在使用jQuery而不是“普通旧”本机JavaScript时，您总是会受到性能损失。 那是因为jQuery是一个JavaScript库。 它不是一些奇特的新版JavaScript。

jQuery功能强大的原因在于它在跨浏览器的情况下会产生一些过于繁琐的东西（AJAX是最好的例子之一），并且平滑了无数可用浏览器之间的不一致性并提供了一致的API。 它还可以轻松地促进诸如链接，隐含迭代等概念，以简化对元素组的处理。

学习jQuery不能替代学习JavaScript。 你应该在后者中有一个坚实的基础，这样你才能完全理解前者对你更容易的了解。

- 编辑包含评论 -

由于评论很快指出（我同意100％），上述陈述是指基准代码。 一个“本机”JavaScript解决方案（假设编写得很好）将胜过jQuery解决方案，几乎在所有情况下都能完成同样的事情（我很乐意看到一个例子）。 jQuery确实加快了开发时间，这是一个重要的好处，我并不打算淡化。 它易于阅读，易于遵循代码，这比一些开发人员能够自己创建的更多。

在我看来，答案取决于你想要实现的目标。 如果，正如我根据您对性能优势的引用所假设的那样，您可以在应用程序之后获得最佳速度，那么每次调用$()时使用jQuery都会引入开销。 如果您想要提高可读性，一致性，跨浏览器兼容性等，那么肯定有理由支持jQuery优于“本机”JavaScript。

Answer 3

有一个框架叫做......哦，猜怎么着？ Vanilla JS 。 希望你得到这个笑话......：D它牺牲了代码的易读性......与jQuery相比，你可以看到通过ID检索DOM元素的速度提高了近35倍。 :)

因此，如果你想要表现，你最好尝试Vanilla JS并得出你自己的结论。 也许你不会遇到JavaScript挂起浏览器的GUI /在强化代码中锁定UI线程，比如在for循环中。

Vanilla JS是一个快速，轻量级的跨平台框架，用于构建令人难以置信的强大JavaScript应用程序。

在他们的主页上有一些性能比较：

Answer 4

已经有一个已接受的答案，但我相信这里没有直接输入的答案可以在其原生javascript方法/属性列表中全面，这些方法/属性实际上保证了跨浏览器支持。 为此，我可以将您重定向到quirksmode：

http://www.quirksmode.org/compatibility.html

它可能是最全面的列表，其中包含哪些有效，哪些无效。 特别注意DOM部分。 要阅读的内容很多，但重点不在于阅读全部内容，而是将其作为参考。

当我开始认真地编写Web应用程序时，我打印出所有DOM表并将它们挂在墙上，这样我就可以一眼就知道什么是安全的，什么需要黑客攻击。 这些天我只是有点像quirksmode parentNode compatibility东西，当我有疑虑。

像其他任何事情一样，判断主要是经验问题。 我不会真的建议你阅读整个网站并记住所有问题，以确定何时使用jQuery以及何时使用普通JS。 请注意清单。 搜索很容易。 随着时间的推移，你会发展出一种当普通JS更受欢迎的本能。

---

PS：PPK（该网站的作者）也有一本非常好的书我推荐阅读

Answer 5

什么时候：

1. 你知道对于你正在做的事情有坚定的跨浏览器支持
2. 键入的代码并不多，而且
3. 它的可读性并没有那么低，而且
4. 你有理由相信jQuery不会选择基于浏览器的不同实现来实现更好的性能，那么：

使用JavaScript。 否则使用jQuery（如果可以的话）。

编辑 ：这个答案适用于选择使用jQuery整体而不是将其遗漏，以及选择是否在jQuery中使用vanilla JS。 选择attr('id')和.id倾向于支持JS，同时在removeClass('foo')和.className = .className.replace( new Regexp("(?:^|\\\\s+)"+foo+"(?:\\\\s+|$)",'g'), '' )倾向于支持jQuery。

Answer 6

其他人的回答集中在“jQuery vs.普通JS”的广泛问题上。 从您的OP来看，我认为您只是想知道如果您已经选择使用jQuery，最好使用vanilla JS。 您的示例是何时应该使用vanilla JS的完美示例：

$(this).attr('id');

是慢还是（在我看来）可读性低于：

this.id

它的速度较慢，因为你必须启动一个新的JS对象，只是为了以jQuery的方式检索属性。 现在，如果你打算使用$(this)来执行其他操作，那么无论如何，将jQuery对象存储在变量中并使用它进行操作。 但是，我遇到了许多需要元素属性的情况（比如id或src ）。

还有其他类似的常见做法吗？ 可以更轻松地完成某些Javascript操作，而无需将jQuery添加到组合中。 或者这是一个罕见的情况？ （jQuery“快捷方式”实际上需要更多代码）

我认为最常见的情况是你在帖子中描述的情况; 人们不必要地在jQuery对象中包装$(this) 。 我经常看到id和value （而不是使用$(this).val() ）。

编辑： 这里的解释了为什么在使用jQuery的文章attr()情况下慢。 忏悔：从标签维基中偷走它，但我认为这个问题值得一提。

再次编辑：鉴于直接访问属性的可读性/性能影响，我会说一个好的经验法则可能是尝试使用this.<attributename> 。 可能有些情况下由于浏览器的不一致而无法正常工作，但是如果它不起作用，最好先尝试这个并回到jQuery上。

Answer 7

如果你最关心的是表现，那么你的主要例子就会击中头部。 不必要地或冗余地调用jQuery是，恕我直言，性能缓慢的第二个主要原因（第一个是糟糕的DOM遍历）。

这不是真的你正在寻找一个例子，但我看到这个如此频繁，它蕴藏着提：其一，以加快您的jQuery脚本性能的最好方法是缓存jQuery的对象，和/或使用链接：

// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });

// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });

// poor
$('.something').load('url');
$('.something').show();

// excellent
var something = $('#container').children('p.something');
something.load('url').show();

Answer 8

我发现JS和JQ之间肯定存在重叠。 您展示的代码就是一个很好的例子。 坦率地说，使用JQ而不是JS的最佳理由就是浏览器兼容性。 我总是倾向于JQ，即使我可以在JS中完成某些事情。

Answer 9

这是我个人的观点，但是无论如何jQuery都是JavaScript，我认为理论上它不能比vanilla JS表现更好。

但实际上它可能比手写JS更好，因为一个人的手写代码可能没有jQuery那么高效。

底线 - 对于较小的东西我倾向于使用vanilla JS，对于JS密集型项目我喜欢使用jQuery而不是重新发明轮子 - 它也更有效率。

Answer 10

的第一个答案的实时属性列表this是一个DOM元素还是比较齐全的。

你可能会发现其他人也很有趣。

当这是文件时：

• this.forms获取当前文档表单的HTMLCollection ，
• this.anchors得到一个HTMLCollection所有的HTMLAnchorElements与name被设置，
• this.links得到一个HTMLCollection所有的HTMLAnchorElement s的href存在集，
• this.images得到一个HTMLCollection的所有HTMLImageElement小号
• 与this.applets一样，弃用的applet也是this.applets

使用document.forms ， document.forms[formNameOrId]将获得如此命名或标识的表单。

当这是一个形式：

• this[inputNameOrId]来获取如此命名或标识的字段

当这是表单字段时：

• this.type获取字段类型

在学习jQuery选择器时，我们经常跳过学习已经存在的HTML元素属性，这些属性的访问速度非常快。

Answer 11

像往常一样，我迟到了这个派对。

这并不是让我决定使用jQuery的额外功能，就像那样有吸引力。 毕竟没有什么能阻止你编写自己的功能。

事实上，在修改DOM以避免内存泄漏时需要学习很多技巧（我在谈论你的IE）。 有一个中央资源为我管理所有这些问题，由那些比我以前更好的JS编码人员写的，正在不断审查，修改和测试的是上帝发送。

我猜这种情况属于跨浏览器支持/抽象参数。

当然，jQuery并不排除在需要时使用直接JS。 我总觉得这两个似乎无缝地协同工作。

当然，如果jQuery不支持您的浏览器，或者您支持低端环境（旧手机？），那么大型.js文件可能会出现问题。 还记得jQuery过去很小吗？

但通常情况下，性能差异不是一个值得关注的问题。 它只需要足够快。 随着Gigahertz的CPU周期每秒都在浪费，我更关心的是我的编码器的性能，这是唯一一个每18个月不会增加一倍功率的开发资源。

这就是说我目前正在研究可访问性问题，显然.innerHTML对此有点不对。 jQuery当然取决于.innerHTML，所以现在我正在寻找一个框架，它将取决于允许的有些繁琐的方法。 我可以想象这样一个框架会比jQuery运行得慢，但只要它表现得足够好，我就会高兴的。

Answer 12

这是一个非技术性的答案 - 许多工作可能不允许某些库，例如jQuery。

事实上，事实上，谷歌不允许在他们的任何代码中使用jQuery（也不是React，因为它由Facebook拥有），在面试官说“对不起，但你不能使用jQuery，它不是XYZ公司批准的名单“。 Vanilla JavaScript每次都可以在任何地方使用，并且永远不会给你这个问题。 如果你依赖图书馆是的，你会得到速度和轻松，但你失去了普遍性。

另外，谈到面试，另一个缺点是，如果你说你需要使用一个库来解决代码测验中的JavaScript问题，那就会发现你实际上并没有理解这个问题，这看起来有点糟糕。 然而，如果你用原始的vanilla JavaScript解决它，它表明你实际上理解并且可以解决他们面前抛出的任何问题的每一部分。

Answer 13

$(this)与this不同：

通过使用$(this)您可以确保将jQuery原型传递给对象。