何时使用Vanilla JavaScript vs.jQuery?

2020/10/11 05:21 · javascript ·  · 0评论

我注意到在监视/尝试回答常见的jQuery问题时,有一些使用javascript(而不是jQuery)的实践实际上使您可以编写更少的代码并且做得...相当。并且还可能产生性能优势。

一个具体的例子

$(this)this

在点击事件内,引用点击的对象ID

jQuery的

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

Java脚本

this.id;

还有其他类似的常规做法吗?无需将jQuery混用就可以更轻松地完成某些Javascript操作的地方。还是这是罕见的情况?(实际上是需要更多代码的jQuery“快捷方式”)

编辑:虽然我很欣赏有关jQuery与普通javascript性能的答案,但实际上我正在寻找更多定量的答案。 使用jQuery时,使用普通javascript而不是使用javascript可能会更好(可读性/紧凑性)的实例$()除了我最初提出的问题的例子。

  • this.id (如你所知)
  • this.value(对于大多数输入类型。当我<select>没有value在其<option>元素上设置属性或Safari中的单选输入时,我知道的唯一问题就是IE 。)
  • this.className 获取或设置整个“类”属性
  • this.selectedIndex针对<select>以获取选定的索引
  • this.options针对<select>以获取<option>元素列表
  • this.text反对<option>以获取其文本内容
  • this.rows反对<table>获取<tr>元素集合
  • this.cells反对a<tr>获得其细胞(td&th)
  • this.parentNode 得到直接父母
  • this.checked获取感谢@Tim Down的检查状态checkbox
  • this.selected获取感谢@Tim Down的选定状态option
  • this.disabled获取感谢@Tim Down的禁用状态input
  • this.readOnly获取感谢@Tim Down的readOnly状态input
  • 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]);这是一个非常漂亮的功能,当我们使用数组(或类似数组的对象)时,我们会错过它。

正确的答案是,当您使用jQuery而不是“普通的”原生JavaScript时,您将始终承受性能损失。那是因为jQuery是JavaScript库。它不是一些新奇的JavaScript版本。

jQuery之所以强大,是因为它使某些事情在跨浏览器的情况下过于繁琐(AJAX是最好的例子之一),并消除了众多可用浏览器之间的不一致,并提供了一致的API。它还可以轻松地促进链接,隐式迭代等概念,以简化一起处理元素组的工作。

学习jQuery不能代替学习JavaScript。您应该在后者中有一个坚实的基础,以便您充分了解了解前者使您更轻松的事情。

-编辑以包含评论-

由于评论很快指出了这一点(我同意100%),因此上述声明是指基准测试代码。一个“本机” JavaScript解决方案(假设它写得很好)将胜过几乎在每种情况下都能完成相同任务的jQuery解决方案(我很乐意看到一个例子)。jQuery确实加快了开发时间,这是一个很大的好处,但我并不是要淡化它。它促进了易于阅读,易于遵循的代码,这比某些开发人员能够自行创建的功能更多。

在我看来,答案取决于您要实现的目标。根据我对性能优势的引用,如果我认为自己正在以最快的速度离开应用程序,那么每次调用jQuery都会带来开销$()如果您要提高可读性,一致性,跨浏览器兼容性等,那么肯定有理由偏爱jQuery,而不是“本机” JavaScript。

有一个名为...的框架,哦,猜猜是什么?Vanilla JS希望您能开玩笑...:D它牺牲了代码的可读性以提高性能...相比之下,jQuery您可以看到,检索DOM元素的速度快了ID将近35倍。:)

因此,如果您想要性能,最好尝试使用Vanilla JS并得出自己的结论。也许您不会在for循环之类的密集代码期间遇到JavaScript挂起浏览器GUI /锁定UI线程的问题

Vanilla JS是一个快速,轻量级的跨平台框架,用于构建不可思议的,功能强大的JavaScript应用程序。

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

在此处输入图片说明

已经有一个可以接受的答案,但是我相信在此直接键入的答案在其实际上具有跨浏览器支持保证的本机javascript方法/属性列表中可能并不全面。为此,我可以将您重定向到quirksmode:

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

它可能是最有效的清单,列出了在任何地方的浏览器中什么有效,什么无效。请特别注意DOM部分。阅读内容很多,但重点不是要全部阅读而是将其用作参考。

当我开始认真地编写Web应用程序时,我打印了所有DOM表并将其挂在墙上,以便我一眼就知道什么是安全使用的,哪些需要进行黑客攻击。这些天,我只是用谷歌搜索类似的东西quirksmode parentNode compatibility

像其他任何事物一样,判断主要取决于经验。我真的不建议您阅读整个网站并记住所有问题以弄清楚何时使用jQuery和何时使用纯JS。请注意列表。搜索起来很容易。随着时间的流逝,您将逐渐了解何时首选纯JS。


PS:PPK(该网站的作者)也有一本非常不错的书,我建议您阅读

什么时候:

  1. 您知道您正在做什么的跨浏览器坚定支持,并且
  2. 键入的代码并不多,并且
  3. 它的可读性也不差,并且
  4. 您有理由相信jQuery不会基于浏览器选择不同的实现来获得更好的性能,然后:

使用JavaScript。否则,请使用jQuery(如果可以)。

编辑:此答案适用于选择整体使用jQuery而不是使用它,以及选择是否在jQuery中使用香草JS。选择attr('id').id倾向于JS,而选择removeClass('foo').className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' )倾向于jQuery。

其他人的答案则集中在“ jQuery与普通JS”这一广泛的问题上。从您的OP来看,我想您只是想知道,如果您已经选择使用jQuery,那么何时使用Vanilla JS更好。您的示例是何时使用Vanilla JS的完美示例:

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

在以下方面既慢又(我认为)可读性差:

this.id

速度较慢,因为您必须旋转一个新的JS对象才能以jQuery的方式检索该属性。现在,如果您打算用来$(this)执行其他操作,那么一定要将该jQuery对象存储在变量中并对其进行操作。但是,在很多情况下,我只需要元素中的属性(例如idsrc)。

还有其他类似的常规做法吗?无需将jQuery混用就可以更轻松地完成某些Javascript操作的地方。还是这是罕见的情况?(实际上是需要更多代码的jQuery“快捷方式”)

我认为最常见的情况是您在帖子中描述的情况;人们$(this)不必要地将其包装在jQuery对象中。我最常通过idvalue(而不是使用$(this).val()看到这种情况

编辑: 是一篇文章,解释为什么在这种attr()情况下使用jQuery速度较慢。告白:从标记Wiki上偷了它,但是我认为这个问题值得一提。

再次编辑:考虑到直接访问属性的可读性/性能影响,我想说一个好的经验法则是尽可能尝试使用this.<attributename>在某些情况下,由于浏览器不一致,这种方法将无法正常工作,但是最好先尝试一下,如果不可行,请改用jQuery。

如果您最关心的是性能,那么您的主要例子就是打钉子。恕我直言,不必要或多余地调用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();

我发现JS和JQ之间肯定存在重叠。您显示的代码就是一个很好的例子。坦率地说,在JS上使用JQ的最佳原因仅仅是浏览器兼容性。我总是倾向于JQ,即使我可以在JS中完成某些工作。

这是我的个人观点,但是由于jQuery还是JavaScript,因此从理论上讲,它的性能无法比Vanilla JS更好。

但是实际上,它的性能可能比手写JS好,因为一个人的手写代码可能不如jQuery高效。

底线-对于较小的东西,我倾向于使用香草JS,对于我喜欢使用jQuery而不是重新发明轮子的JS密集型项目-它也更具生产力。

this作为DOM元素的第一个答案的实时属性列表非常完整。

您可能会发现认识其他人也很有趣。

当这是文件时:

  • this.forms获取HTMLCollection当前的文档表格,
  • this.anchors得到的HTMLCollection所有的HTMLAnchorElementsname被设定,
  • this.links得到的HTMLCollection所有的HTMLAnchorElement与Shref是一套,
  • this.images得到HTMLCollection所有HTMLImageElement
  • 和不赞成使用的小程序一样 this.applets

当您使用时document.formsdocument.forms[formNameOrId]将获得如此命名或标识的表格。

当这是一种形式时:

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

当这是表单字段时:

  • this.type 获取字段类型

在学习jQuery选择器时,我们经常跳过学习已经存在的HTML元素属性,这些属性是如此之快地访问。

和往常一样,我来晚了。

并不是让我决定使用jQuery的额外功能是如此吸引人。毕竟没有什么可以阻止您编写自己的函数。

事实是,在修改DOM以避免内存泄漏时有很多技巧需要学习(我在谈论IE)。拥有一个能够为我解决所有此类问题的中央资源,由比我以前要好得多的JS编码人员编写,并且不断地对其进行审查,修订和测试是令人敬畏的。

我猜想这种情况属于跨浏览器的support / abstraction参数。

当然,当您需要jQuery时,它并不排除使用直接JS。我总是觉得两者似乎无缝地协同工作。

当然,如果jQuery不支持您的浏览器,或者您支持的是低端环境(旧手机?),那么大的.js文件可能是个问题。还记得jQuery曾经很小的时候吗?

但是通常情况下,性能差异不是问题。它只必须足够快。随着每秒千兆赫的CPU周期浪费,我更加关心编码器的性能,这是唯一的开发资源,它每18个月的功耗不会增加一倍。

就是说,我目前正在研究可访问性问题,显然.innerHTML对此有些反对。jQuery当然依赖于.innerHTML,所以现在我正在寻找一个框架,该框架将取决于所允许的有些乏味的方法。我可以想象这样的框架会比jQuery慢,但是只要它运行良好,我就会很高兴。

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

实际上,事实上,Google不允许在其任何代码中使用jQuery(也不是React,因为它是Facebook拥有的),在面试官说“对不起,但是您不能使用jQuery时,您可能还不知道它,所以您可能不知道XYZ公司批准的清单”。Vanilla JavaScript绝对可以在任何地方,每次都能工作,并且永远不会给您这个问题。如果您依赖库,则可以快速而轻松地工作,但是却失去了普遍性。

另外,谈到面试,另一个缺点是,如果您说您需要在代码测验中使用库来解决JavaScript问题,就会遇到问题,就像您实际上并不了解问题一样,这看起来有点不好。而如果您使用原始的JavaScript来解决它,则说明您真正理解并可以解决他们摆在您面前的任何问题。

$(this)不同于this

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

本文地址:http://javascript.askforanswer.com/heshishiyongvanilla-javascript-vs-jquery.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!