什么是javascript/jquery映射？

我目前正在读一本关于构建单页web应用程序的书。该应用程序目前处于非常早期的阶段，但作者将两个函数合并到shell代码中，

stateMap

和

jqueryMap

stateMap

用于放置跨模块共享的动态信息……我想我理解这一点。但是，

jqueryMap

用于“缓存jquery集合。我们编写的几乎每个shell和功能模块中都应该有此功能。使用

jqueryMap

缓存可以大大减少jquery文档的遍历次数并提高性能。”

---

有人熟悉这项技术吗？你能进一步解释一下吗

即使是JavaScript中的基本DOM查找（按元素ID或类名），也需要浏览器花费相当长的时间，尤其是在文档很大的情况下

考虑以下几点：

<div id="my-window"> ... </div>

（请注意，

$（“…”）

始终表示jQuery中的集合，即使只有一个元素与选择器匹配。）

如果在页面的整个生命周期中，您需要在脚本中多次引用该DIV，那么这种重复查找会消耗额外的CPU周期，从而导致页面速度变慢，最终降低最终用户体验。作者建议只执行一次如此昂贵的查找，并将结果存储在一个本地缓存中，该缓存只是一个包含大量引用的JavaScript对象。然后，可以根据需要快速重用这些引用：

var jqueryMap = {}, setJqueryMap;

setJqueryMap = function () {
  jqueryMap = {
        $my_window: $('#my-window'),
        // store other references here 
  };
};

您只需在加载模块时调用一次函数

setJqueryMap

。然后，您可以通过“缓存”引用来引用所需元素：

setJqueryMap();

...

jqueryMap.$my_window  // do something with the element

---

这样可以避免重复遍历，使脚本的执行速度更快。

出于性能原因，作者似乎只是在讨论（复杂）jQuery选择器（

$（'#foo>ul>li.bar small span'）

等）的缓存结果。的确，人们通常会试图缓存这些东西，特别是当它被多次使用时，但对每一个小选择这样做似乎有点过头了。此外，如果将新元素附加到DOM中，则可能会出现问题。在这种情况下，如果要获取包括新元素在内的所有元素，则必须再次运行此类选择器。@CBroe是正确的。我们已经见过很多次人们使用缓存选择器，但没有意识到当他们使用它们时，集合不是DOM的当前表示形式。是一个有时很难发现的bug。您夸大了元素查找的代价。特别是按id查找。当然，根据文档和选择器的不同，某些查找可能会比较慢。但是，按id查找元素一点也不贵。很可能，谢谢。关键是，使用缓存引用，如

jqueryMap.$my_window

通常比反复使用

$（“#my window”）

遍历DOM要快。这是另一个故事。但是，当涉及到重复查找时，这一切都会累加起来。

setJqueryMap();

...

jqueryMap.$my_window  // do something with the element