Question

我使用jQuery选择器$("#main-nav)在函数中多次选择和操作HTML元素。

将$("#main-nav")返回的jQuery对象分配给函数开头的变量并使用该变量对其进行操作会更快吗？

即使它没有明显加快，最好还是这样做吗？

简而言之 - 下面两个函数中哪一个更快和/或展示最佳实践？

＆＃13;

//MOBILE MENU ANIMATION
$("#menu-icon").click(function() {
  $("#main-nav").toggleClass("display");
  if ($("#main-nav").hasClass("display")) {
    $("#main-nav").velocity("transition.slideDownBigIn", {
      duration: 300
    });
  } else {
    $("#main-nav").velocity("transition.slideUpBigOut", {
      duration: 300
    });
  }
});

＆＃13;

OR

＆＃13;

//MOBILE MENU ANIMATION
$("#menu-icon").click(function() {
  var navMenu = $("#main-nav");
  navMenu.toggleClass("display");
  if (navMenu.hasClass("display")) {
    navMenu.velocity("transition.slideDownBigIn", {
      duration: 300
    });
  } else {
    navMenu.velocity("transition.slideUpBigOut", {
      duration: 300
    });
  }
});

＆＃13;

Answer 1

无论为这种特殊情况优化了多少jQuery，它每次调用时都必须处理选择器字符串（即使它只是检查它与之前使用的选择器是否相同）。使用变量的版本可以避免这种成本，因此当然会更有效率。

就最佳实践而言，在这种情况下将结果存储在变量中总是更好。使用相同输入多次调用相同函数的唯一原因是，如果您希望结果发生变化，或者函数具有某些副作用。另一方面，如果您需要该功能每次都给您相同的结果，并且不关心/不希望它的副作用多次发生，那么您必须存储结果

Answer 2

第二个更快，因为它只遍历DOM一次，并且是最佳实践，因为任何消除代码中的redundency的东西几乎都是可取的。

另请注意，使用$：

为jQuery选择器/对象添加前缀是习惯的（但并不重要）

var $navMenu = $("#main-nav");

修改：在回答时扩大。

Answer 3

也不要忘记jQuery链。

$("#menu-icon").click(function() {
  //var navMenu = //survive without it
  $("#main-nav")
    .toggleClass(function(){
       //optionally var $this = $(this);
       $(this).hasClass("display") ? 
         $(this).velocity("transition.slideUpBigOut", {duration: 300}) :
         $(this).velocity("transition.slideUpBigIn", {duration: 300});
       return "display";
     });
/*
  if (navMenu.hasClass("display")) {
    navMenu.velocity("transition.slideDownBigIn", {
      duration: 300
    });
  } else {
    navMenu.velocity("transition.slideUpBigOut", {
      duration: 300
    });
  }
*/
});

多次使用jQuery选择器的最有效/最快的方法是什么？

3 个答案: