Question

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

我从官方guide开始，但很快就找到了许多其他可能的模板。我会引用其中两个来问我的问题：

第一个模式对我来说似乎更清晰，我非常喜欢命名空间的想法。但是，这是如何使用的？我是否将整个函数编写为命名空间的方法，然后在init()中调用所有函数，最后在 IIFE 中调用此方法init()，或者我应该直接在 IIFE 中调用必要的方法？

我觉得这个问题非常愚蠢，但我无法理解其用法。

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

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

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

可能性的多样性势不可挡，我不知道从哪里开始，或者如何为我找到合适的东西。

Answer 1

尝试使用Javascript Revealing Module Pattern。

根据我的经验，这是最好的一个。

跟着它 Javascript Revealing Module Pattern

Answer 2

在Smashing Magazine上查看这篇优秀文章它涵盖了大量的jQuery插件模式，并解释了它们中的每一个。

编辑：
那里有一篇文章回答了你的问题：）

Answer 3

来自Plugins/Authoring - jQuery Wiki

的文档

要编写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。

命名空间：

正确命名插件是插件开发的一个非常重要的部分。命名空间正确地确保您的插件很可能被生活在同一页面上的其他插件或代码覆盖。作为插件开发人员，命名空间也使您的生活更轻松，因为它可以帮助您更好地跟踪您的方法，事件和数据。

插件方法

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

这是不鼓励的，因为它使$.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'
 });

关于jQuery模式的问题

3 个答案:

来自Plugins/Authoring - jQuery Wiki

命名空间：

插件方法