遗留Javascript DOM与现代javascript DOM vs jquery

Question

我只通过jQuery学习了网络开发。随着我的进步，我开始使用javascript为我的需求编写自定义代码。但是，如果我们需要支持旧的浏览器，我们必须使用jQuery。到目前为止，我们已经有了现代Javascript，其中有许多标准化的功能。例如，注册事件侦听器。

在遗留的javascript中，我们使用了hack或者使用jQuery来获取DOM的元素。

--我知道这是个宽泛的问题，但我想知道DOM的具体细节。考虑到当今web开发的巨大进步，我想知道什么是最好的方法。

我们都知道jQuery对于dom访问来说是多么的好，因为它解决了所有跨浏览器问题。我正在寻找详细的解释，跟踪当前的网络趋势。

如果答案是比较普通的旧javascript、jQuery和现代javascript，那将是一个额外的结果。

我们还有一个好消息，jQuery2放弃了对ie8及以下产品的支持。因此，任何关于这一点对我来说都更有用。。

我收集了很少的投入，并提出了以下几点。

1 -使用id获取div

与jQuery

$('#container');

这将使用所需的DOM元素创建jQuery对象。

普通旧Javascript

var container = document.getElementById('container');

现代JavaScript

var container = document.querySelector('#container');

querySelector是选择器API的一部分，它为我们提供了使用我们已经熟悉的CSS选择器查询DOM的能力。

2 -在另一个元素中查找所有特定的元素.

与jQuery

$('#container').find('li');

在这里，我们找到了容器的所有李氏后代。

普通旧Javascript

document.getElementsByTagName("li");

在这里，我们需要做额外的处理。

现代JavaScript

var lis = document.querySelectorAll('#container li');

querySelectorAll将返回与指定的CSS选择器匹配的所有元素。

3 -注册事件侦听器

如果我们想要将一个单击事件侦听器注册到页面上的所有锚标记。

与jQuery

$('a').on('click', fn);

普通旧Javascript

var anchors = document.getElementsbyTagName('a');

我们需要编写自定义代码来处理浏览器之间的差异。对于ie8和更低的版本，我们必须使用attachEvent，而其余的则必须使用addEventListener来注册侦听器。

现代JavaScript

[].forEach.call( document.querySelectorAll('a'), function(el) {
   el.addEventListener('click', function() {
     // anchor was clicked
  }, false);  

});

参考资料：

从jquery到javascript

Answer 1

最后，它归结为

1. 处理时间。
2. 跨浏览器兼容性。(多数)
3. 维修性

JavaScript是快速的。通常情况下，您编写的脚本不会太紧张，以致于运行时会受到影响。本机javascript显然是最快的，因为jQuery方法总是调用本机JS。

根据JSPerf的数据，querySelector比本地getElementByID慢了42%，但速度仍然令人印象深刻，如果我没记错的话，几乎比jQuery快6倍。

jQuery的好处:它非常跨浏览器兼容。我在一家要求我测试兼容性回到IE7的公司工作，我发现jQuery规范化非常有用，而不必记住哪些JS方法在IE7/8/9等中不起作用。

但是，如果您不需要支持IE7 (8没有那么糟糕，但仍然存在问题)，那么原生JS就是最好的选择。现在拥有一个普通的脚本几乎是很有声望的，随着现代的更新，它使得DOM遍历比jQuery更容易、更快。更不用说90 to的负载(33 to分钟)。您将通过应用适当的代码来避免。

至于Kevin所说的，“可维护性”可能很棘手。在您的情况下，您说您比jQuery更了解JavaScript (奇怪，但还好)。我个人的观点是有偏见的，因为我主张使用较少的jQuery，但老实说，jQuery比JS更容易维护，因为主要功能可能会改变，但是调用它的方式基本上是一样的(例如，bind() => live()的更改(或者是逆转了吗？) => on()。事件委托更改了，但是调用它的方式几乎与每次更新相同。因此，可维护性非常容易。