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

Question

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

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

即使速度没有显着提高，这样做是否也是最佳实践？

简而言之 - 以下 2 个函数中哪个更快和/或表现出最佳实践？

//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
    });
  }
});

或

//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
    });
  }
});

Answer 1

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

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