設計模式幫助：jQuery使用多個元素

Question

我是jQuery的新手。我想知道當我在同一個.js文件中使用多個函數時，訪問元素的最佳方式是 下面是我能想到的兩種方法。我有範圍功能（F1 & F2）以及其他功能（F3，F4）。我想在部分或全部這些功能中使用元素。最好的方法是什麼。

其他注意事項方法1

var elm1 = $("#ID1") 
    var elm2 = $("#ID2") 
    var elm2 = $("#ID3") 

    $(function() { 

     function F1() { 
      // work with elm1,elm2,elm3 
     } 

     function F2() { 
      // work with elm1,elm2,elm3 
     }  
    }) 

    function F3() { 
     // work with elm1,elm2,elm3 
    } 

    function F4() { 
     // work with elm1,elm2,elm3 
    } 

方法2

var id1 = "#ID1"; 
    var id2 = "#ID2"; 
    var id3 = "#ID3"; 

    $(function() { 

     function F1() { 
      // get elements usings IDs 
      var elm1 = $(id1) 
      var elm2 = $(id2) 
      var elm3 = $(id1) 
     } 

     function F2() { 
      // get elements usings IDs 
      var elm1 = $(id1) 
      var elm2 = $(id2) 
      var elm3 = $(id1) 
     } 
    }) 

    function F3() { 
     // get elements usings IDs 
     var elm1 = $(id1) 
     var elm2 = $(id2) 
     var elm3 = $(id1) 
    } 

    function F4() { 
     // get elements usings IDs 
     var elm1 = $(id1) 
     var elm2 = $(id2) 
     var elm3 = $(id1) 
    } 

，我們用什麼術語的功能F3 F4 &？全局函數？

Answer 1

第一種方法更好，不僅在使用jQuery時。

Answer 2

方法＃1是兩個最好的方法，因爲您重新使用對jQuery對象的引用，並且不需要每次都查詢DOM。

BTW，你應該總是使用IIFE模式（立即調用的函數表達式），以這些範圍jQuery的參考，避免搞亂全球範圍內（即window對象）：

(function() { 
    // Your code here 
})(); 

其他筆記，有什麼我們用於功能的術語F3 & F4？全球 功能？

是的，就是這樣。或全局範圍的功能。無論如何，你應該避免搞亂全球範圍，更好地使用IIFE！

Answer 3

簡單答案：將元素的引用存儲在變量或對象屬性中。更像是辦法1.

方法2是非常重複的，當涉及到維護將是一個真正的頭痛。

就如何改善的方法1的一些建議：

1）定義的domready中的事件事件之外的功能，然後把它們叫做domready中事件中。通過等待定義你的函數/方法你沒有獲得任何東西。但暫緩初始化它們是明智的。

$(function() { /*do stuff*/}); //this is the shorthand for 
$(document).ready(function() {/*do stuff*/}); 

var function1 function() = { /*do stuff*/}; 
$(function() { function1(); }); 

2）刪除一切從全局範圍。我更喜歡使用IIFE（見下文）。

3）添加一個名稱空間（見下文）。

(function($) { //your local $ value is now a local reference, if you ever have a clash in the dollar sign globally, you don't have to worry working inside this function. 
    window.namespace = window.namespace || {}; 
    var namespace = window.namespace; //local reference to namespace obj. 
    namespace.elm1 = $("#elm1"); 
    //etc 
    namespace.function1 = function() { 
     //this == namespace. use dot notation to access properties/methods in this scope, i.e: 
     console.log(this.elm1) //Object - the jQuery collection object 
    }; 
    $(function() { 
     namespace.function1(); 
    } 
})(jQuery); //pass the jQuery object into your scope