使用jQuery缓存DOM元素

Question

我正在为命名约定而苦苦挣扎，我想为作为DOM元素的缓存变量的任何变量想出一个约定。

到目前为止，我已经使用了以下内容：

window.x = $('#x');

当然，这将它放在全局范围内，但根据我的约定，这是可以的。

但问题是，查看window.x并不能告诉我它是一个缓存变量$('#x')。所以现在我想要尝试的是使用jQuery插件技术来存储这些值。类似于：

;(function($, window, undefined) {
    $.fn.x = function() {
        return $('#x');
    }
})(jQuery, window);

这样，我就可以引用$x.val()，它会立即告诉我$x是$('#x') DOM元素的缓存。

问:我如何创建一个名为x的插件，它是$('#x')选择器的返回值？我做得对吗？现在，你可能会说(在你最好的Office Space配音中)“这是一个可怕的想法”，但我只是在试验。

Answer 1

我想不出缓存DOM元素的理由。对于初学者来说，如果您使用的是jQuery id选择器，那么它们是最快类型的选择器，因此不需要缓存DOM元素。当您在示例中添加到全局名称空间时，您只是创建了一个快捷方式或别名，用于选择id为"x“的元素。在我的代码中，我使用立即调用的函数表达式(IIFE)来封装代码的单个作用域部分。如果要重复引用全局变量，我会将它们放在开头。下面是一个例子：

// An immediately-invoked function expression wraps all JavaScript code to keep it scoped to this module.
(function ($) {
    // Closure-local variables.
    var $grid;
    var $table;
    // etc.

    // Bind an initialize event. Will be called when this code needs to execute.
    $(document).on('initialize', initialize);

    // Initialize the global variables.
    function initialize() {     
        $grid = $('#grid');
        $table = $('#table');

        // other setup...
    }

})(jQuery);

我使用了一个初始化事件，该事件在页面初始加载时触发，它设置全局变量和生命周期。IIFE使您的代码与所有其他代码分离，“缓存”元素只是在initialize事件中设置的全局变量，因此您不必重复调用它们。