何时使用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>未在其value元素上设置<option>属性或无线电输入时，我知道的唯一问题是IE在Safari中。）
• this.className获取或设置整个“类”属性
• this.selectedIndex针对<select>获取所选索引
• this.options针对<select>获取<option>元素列表
• this.text针对<option>获取其文字内容
• this.rows针对<table>获取<tr>元素的集合
• this.cells针对<tr>获取其单元格（td＆amp; th）
• this.parentNode获得直接父母
• this.checked获取checkbox Thanks @Tim Down
的已检查状态
• this.selected获取option Thanks @Tim Down
的选定状态
• this.disabled获取input Thanks @Tim Down
的禁用状态
• this.readOnly获取input Thanks @Tim Down
的readOnly状态
• 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将设置它。在某些情况下是必要的。

以下句子覆盖了它。 See this answer以获得更好的治疗效果。

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])有一个无限循环，但是因为我们正在处理“实时列表”，所以当我们执行{{1 }}。这是一个非常漂亮的功能，我们在使用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比较，你可以看到DOM元素的ID元素几乎<强> 35X 更快。 ：）

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

  

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

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

Answer 4

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

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

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

当我开始认真编写网络应用程序时，我打印出所有DOM表格并将它们挂在墙上，以便我一眼就知道什么是安全使用和什么需要黑客。这些天，当我怀疑时，我只是像quirksmode parentNode compatibility那样谷歌。

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

---

PS：PPK（该网站的作者）也有一本非常好的书，我建议你阅读

Answer 5

当：

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

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

编辑：这个答案适用于选择使用整体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“快捷方式”实际上需要   更多代码）

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

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

再次编辑：鉴于直接访问属性的可读性/性能影响，我认为一个好的经验法则可能是尝试尽可能使用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并设置href
• this.images获取所有HTMLCollection s
的HTMLImageElement
• 与已弃用的小程序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。

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

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

Answer 13

$(this)与this不同：

使用$(this)确保将jQuery原型传递给对象。