1

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

我从官方指南开始，但很快发现了许多其他可能的模板。我将参考其中两个来问我的问题：

第一

第二个

第一个模式对我来说似乎更干净，我非常喜欢命名空间的想法。但是，这个怎么用？我是否将我的整个函数编写为命名空间的方法，然后在 IIFE 中调用所有这些函数，init()最后只在 IIFE 中调用这个方法init()，还是应该直接在IIFE中调用必要的方法？

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

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

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

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

可能性的多样性是压倒性的，我不知道从哪里开始或如何找到适合我的东西。

4

3 回答 3

1

查看Smashing Magazine上的这篇优秀文章。
它涵盖了多种 jQuery 插件模式并解释了其中的每一种。

编辑：
那里有一部分文章可以回答您的问题:)

于 2013-04-18T07:02:34.463 回答
1

尝试 Javascript 显示模块模式。

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

在Javascript Revealing Module Pattern上关注它

于 2013-04-18T06:58:37.837 回答
0

来自插件/创作的文档 - jQuery Wiki

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

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

以上是最简单的插件制作。虽然有一个特定的步骤要遵循，但使用闭包是避免任何$与任何其他库（如 mootools、原型等）发生任何美元符号冲突的最佳实践。

为了确保您的插件不会与可能使用美元符号的其他库发生冲突，最好将 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'
 });
于 2013-04-18T07:11:55.590 回答