使用jQuery來緩存DOM元素

我很努力地使用命名約定，我想爲DOM元素的緩存變量提供一個約定。使用jQuery來緩存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'）選擇器的返回值？我在做對吧？現在，你可能會說（在你最好的辦公場所的聲音）「這是一個可怕的想法」，但我只是在試驗。

來源

2013-03-21 Phillip Senn

哦，我不知道這是否是一個可怕的主意。但是我有一個更簡單的方法 - 我只在一個正常變量的開頭放置了一個美元符號（我也使用$作爲jQuery的別名）：'$ this = $（this）'或'$ widget = $（'＃widget'）' – 2013-03-21 19:12:59

將您的變量範圍侷限於您的函數，請勿將它們保留在全局範圍內。如果它們是jQuery集合，則用'$'作爲變量名稱的前綴。這整個緩存廢話**是一個可怕的想法。緩存用於提高性能，但由於JavaScript是異步運行的，99％的時間性能不是問題，因爲您會花費太多時間閒置。 – zzzzBov 2013-03-21 19:14:26

我想不出緩存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);

我用得到觸發的initialize事件當頁面最初加載，它設置全局變量，並設置了IIFE。 IIFE保持你的代碼獨立於所有其他代碼，並且「緩存」的元素僅僅是初始化事件中設置的全局變量，所以你不必重複地調用它們。

來源

2013-03-21 19:21:55 Halcyon

使用jQuery來緩存DOM元素

回答

相關問題