何时使用Vanilla JavaScript与jQuery？

 

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

一个具体的例子

$(this) vs this

在引用点击的对象ID的点击事件中

jQuery的 

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

使用Javascript 

this.id;

还有其他常见的做法吗？ 在某些Javascript操作可以更容易完成的情况下，无需将jQuery加入组合。 或者这是罕见的情况？ （实际上需要更多代码的jQuery“快捷方式”）

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

  • this.id （如你所知）
  • this.value （在大多数输入类型中，我知道的唯一问题是当<select>在其<option>元素中没有设置value属性或Safari中的无线电输入时，IE）。
  • this.className来获取或设置整个“class”属性
  • this.selectedIndex对一个<select>来获取选定的索引
  • 对<select> this.options来获取<option>元素的列表
  • this.text与<option>获取其文本内容
  • this.rows对<table>来获取<tr>元素的集合
  • this.cells对<tr>获取其单元格（td＆th）
  • this.parentNode获得一个直接的父母
  • this.checked获取checkbox的选中状态Thanks @Tim Down
  • this.selected获取option的选择状态Thanks @Tim Down
  • this.disabled获取input的禁用状态Thanks @Tim Down
  • this.readOnly获取input谢谢@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将设置它。 在某些情况下是必要的。

    下面的句子涵盖了它。 看到这个答案更好的治疗。 

    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]); 。 这是一个非常漂亮的功能，我们错过了使用Array（或类似数组的对象）的方式。

    正确的答案是，如果使用jQuery而不是“普通旧式”原生JavaScript，你总是会受到性能损失。 这是因为jQuery是一个JavaScript库。 这不是一些花哨的JavaScript新版本。

    jQuery功能强大的原因在于它在跨浏览器的情况下（AJAX是最好的例子之一）使得一些事情过于繁琐，并且平滑了大量可用浏览器之间的不一致性并且提供了一致的API。 它还可以轻松实现链接，隐含迭代等概念，从而简化在一组元素上的工作。

    学习jQuery不能代替学习JavaScript。 你应该在后者中有一个坚实的基础，以便你充分理解知道前者对你更容易。

    - 编辑包含评论 -

    由于评论很快指出（并且我同意100％），以上陈述是指基准代码。 一个'本地'JavaScript解决方案（假设它写得很好）将胜过jQuery解决方案，几乎在每种情况下都能完成同样的任务（否则我很乐意看到一个例子）。 jQuery的确加快了开发时间，这是一个重要的好处，我并不是故意淡化的。 它便于阅读，易于遵循代码，这比一些开发人员能够自己创建的代码更容易。

    在我看来，答案取决于你试图达到的目标。 如果根据您对性能优势的参考推测出来，那么您的应用程序的速度超出了最佳速度，那么每次调用$()时，使用jQuery都会引入开销。 如果你想提高可读性，一致性，跨浏览器兼容性等，那么肯定有理由支持jQuery而不是'原生'JavaScript。

    有一个框架叫...哦，猜猜看是什么？ Vanilla JS 。 希望你得到这个笑话...：D它牺牲了代码的易读性......与jQuery波纹管相比，你可以看到通过ID检索一个DOM元素快了将近35倍。 :)

    所以如果你想要表演，你最好试试Vanilla JS并且得出你自己的结论。 也许你不会遇到JavaScript挂在浏览器的图形用户界面上/在密集代码中锁定UI线程，就像在for循环中一样。

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

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

    在这里输入图像描述

    链接地址: http://www.djcxy.com/p/64671.html

    上一篇: When to use Vanilla JavaScript vs. jQuery?

    下一篇: use a nodejs web server to serve a full rails application