javascript - Legacy Javascript DOM vs 现代 javascript DOM vs jquery DOM

Question

关闭。这个问题需要更多 focused .它目前不接受答案。












想改进这个问题？更新问题，使其仅关注一个问题 editing this post .


8年前关闭。







Improve this question




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

在旧版 javascript 中，我们使用了 hacks 或使用 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 是 Selectors API 的一部分，它为我们提供了使用我们已经熟悉的 CSS 选择器查询 DOM 的能力。

2 – 在另一个元素中查找所有特定元素。

使用 jQuery

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

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

普通的旧 Javascript

document.getElementsByTagName("li");

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

现代 JavaScript

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

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

3 – 注册事件监听器

如果我们想为页面上的所有 anchor 标签注册一个点击事件监听器。

使用 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);  

});

引用:

from jquery to javascript

Answer 1

最后，归结为

处理时间。

跨浏览器兼容性。 (更多)

可维护性

JavaScript 很快。通常来说，您不会编写如此密集的脚本以至于运行时受到影响。原生 javascript 显然是最快的，因为 jQuery 方法总是调用原生 JS。

根据 JSPerf , querySelector比原生 getElementByID 慢约 42% ，但仍然是一个令人印象深刻的速度，如果我没记错的话，几乎比 jQuery 快 6 倍。

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

但是，如果您不必支持 IE7(8 还不错，但仍然存在问题)，则可以使用原生 JS。现在拥有一个 vanilla 脚本几乎是享有盛誉的，并且通过现代更新，它使 DOM 遍历比 jQuery 更容易和更快。更不用说 90kb 的负载(最少 33kb)，您可以通过应用正确的代码来避免。

至于凯文所说的，“可维护性”可能很棘手。在您的情况下，您说您比 JavaScript 更了解 jQuery(很奇怪，但还可以)。我个人的观点是有偏见的，因为我是少 jQuery 的拥护者，但老实说 jQuery 比 JS 更容易维护，因为主要功能可能会改变，但调用它的方式基本相同(例如，从 bind() 更改 => live() (或者它是否颠倒了？) => on() 。事件委托(delegate)发生了变化，但调用方式几乎与每次更新相同。因此可维护性非常容易。