Javascript 关于jQuery模式的问题

所以我决定最终学习一些关于jQuery的知识，因为我的一个项目需要一个简单的函数，所以我开始寻找一个好的模式

我从官方开始，但很快就找到了许多其他可能的模板。我将参考其中两位来提问：

第一种模式对我来说似乎更清晰，我非常喜欢名称空间的概念。但是，这是如何使用的呢？我是将整个函数作为名称空间的方法编写，然后在

init（）

中调用所有函数，最后在IIFE中调用这个方法

init（）

，还是直接在IIFE中调用必要的方法

我觉得这个问题很愚蠢，但我就是不明白它的用法

第二种模式对我来说更复杂。看看这个：

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

所有这些参数是什么？我在哪里设置它们？为什么需要它们？第一个样本中包装的缺点是什么

---

可能性的多样性是压倒性的，我不知道从哪里开始，也不知道如何为我找到合适的方法。

尝试Javascript模块模式

根据我的经验，这是最好的

继续

---

查看这篇优秀的文章。
它涵盖了众多jQuery插件模式，并解释了每一种模式

编辑：
这篇文章的一部分回答了您的问题：）

来自 要编写jQuery插件，首先向jQuery.fn对象添加一个新的函数属性，其中属性的名称是插件的名称：

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

上面的一个是最简单的插件制作。尽管需要遵循特定的步骤，但使用闭包是避免与任何其他库（如mootools、prototype等）发生任何

$

美元符号冲突的最佳实践

为了确保您的插件不会与其他可能使用美元符号的库发生冲突，最佳做法是将jQuery传递给IIFE（立即调用的函数表达式），将其映射到美元符号，这样它就不会被执行范围内的其他库覆盖

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

现在在这个闭包中，我们可以使用美元符号来代替jQuery，只要我们愿意。

名称空间： 正确地给插件命名是插件开发中非常重要的一部分。正确地使用名称空间可以确保插件被同一页面上的其他插件或代码覆盖的几率非常低。名称空间还使插件开发人员的工作更轻松，因为它可以帮助您更好地跟踪方法、事件和数据

插件方法 这是一个不鼓励使用的名称空间，因为它会使

$.fn

名称空间变得混乱。要解决这个问题，您应该在

对象文本中收集插件的所有方法，并通过将方法的字符串名称传递给插件来调用它们

 (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'
 });

如果你想创建自己的插件，这是一个很好的教程，我正在使用第一个链接中的模式。太棒了！可重用性、可维护性大大提高。唯一需要注意的是名称空间之外的开放全局变量的名称。请检查此链接：
 (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'
 });