有關jQuery模式的問題

Question

因此，我決定最終學習一些有關jQuery的知識，由於我需要為我的一個項目提供一個簡單的功能，因此我開始尋找一種好的模式。

我從官方指南開始，但很快發現了許多其他可能的模板。 我將參考其中兩個提出我的問題：

第一

第二個

第一種模式對我來說似乎更加干凈，我非常喜歡名稱空間的想法。 但是，如何使用？ 我是否將整個函數編寫為命名空間的方法，然后在init()調用所有函數，最后只在IIFE中調用此方法init() ，還是應該在IIFE中直接調用必要的方法？

我覺得這個問題很白痴，但我只是不明白用法。

第二種方式對我來說更加復雜。 看看這個：

;(function ( $, window, document, undefined ) {
    //...
})( jQuery, window, document );

這些參數是什么，我在哪里設置它們，為什么需要它們？ 第一個樣本中包裝紙的缺點是什么？

可能性的多樣性是壓倒性的，我不知道從哪里開始或如何找到適合我的東西。

Answer 1

嘗試使用JavaScript揭示模塊模式。

根據我的經驗，這是最好的。

在Javascript揭示模塊模式上關注它

Answer 2

在Smashing Magazine上查看這篇出色的文章。
它涵蓋了許多jQuery插件模式，並解釋了每種模式。

編輯：
那里有一部分文章回答了您的問題:)

Answer 3

來自插件/創作文檔-jQuery Wiki

要編寫jQuery插件，請在jQuery.fn對象中添加一個新的function屬性，其中該屬性的名稱為您的插件的名稱：

jQuery.fn.myPlugin = function() {
  // Do your awesome plugin stuff here
};

上面的是最簡單的插件制作。 雖然具體執行的步驟，使用閉包是避免任何的最佳做法$有喜歡Moot，樣機等任何其他圖書館美元符號沖突

為了確保您的插件不會與其他可能使用美元符號的庫發生沖突，最好的做法是將jQuery傳遞給IIFE（立即調用函數表達式），該IIFE將其映射到美元符號，因此不會被覆蓋由另一個庫在其執行范圍內執行。

 (function( $ ) {
   $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
   };
})(jQuery);

現在在該閉包中，我們可以根據需要使用美元符號代替jQuery。

命名空間：

正確命名插件空間是插件開發的重要組成部分。 正確命名空間可確保您的插件被同一個頁面上的其他插件或代碼覆蓋的可能性很小。 Namespacing還使您作為插件開發人員的生活更加輕松，因為它可以幫助您更好地跟蹤方法，事件和數據。

插件方法

(function( $ ){
  $.fn.tooltip = function( options ) { 
    // THIS
  };
  $.fn.tooltipShow = function( ) {
    // IS
  };
  $.fn.tooltipHide = function( ) { 
    // BAD
  };
  $.fn.tooltipUpdate = function( content ) { 
    // !!!  
  };
})(jQuery);

不建議這樣做，因為它會使$.fn名稱空間$.fn 。 為了解決這個問題，您應該將所有插件方法收集到一個object literal ，並通過將方法的字符串名稱傳遞給插件來調用它們。

 (function( $ ){
     var methods = {
        init : function( options ) { 
              // THIS 
        },
        show : function( ) {
              // IS
        },
        hide : function( ) { 
              // GOOD
        },
        update : function( content ) { 
              // !!! 
        }
     };

  $.fn.tooltip = function( method ) {
   // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    
   };
 })( jQuery );

// calls the init method
 $('div').tooltip(); 

 // calls the init method
 $('div').tooltip({
    foo : 'bar'
 });