jQuery插件创作和命名空间(jQuery Plugin Authoring and Namesp

我已经习惯了写像这样的插件：

;(function($){jQuery.fn.myPlugin=function(options){
    var defaults={
        'property':value
    },
    o=$.extend({},defaults,options||{});

   // INSERT AND CACHE ELEMENTS
   var $Element=$('<div></div>');
   $Element.appendTo($('body'));

function funFunction(){
  // I have access to $Element!
 $Element.hide(500);
};

this.each(function(i){
     var $this=$(this);
});
return this;
});};})(jQuery);

我知道这不是完美的，这就是为什么我现在想好好学学命名空间，更好的插件结构/模式。在过去的几本书我读过不幸的是引用jQuery插件制作教程一个字一个字，所以都没有太大的帮助。本教程似乎一切分裂和不显示相结合，这就是为什么我很困惑的一个很好的例子。在该教程，它显示了命名空间的例子。

jQuery插件命名空间教程

(function( $ ){
  var methods = {
    init : function( options ) { 
    },
    show : function( ) {
    },
    hide : function( ) { 
    },
    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();

我理解的结构以及如何访问命名空间中的对象，但它显示了默认设置/选项不包括任何命名空间的另一个例子。所以在努力写正确命名空间插件的开始，具有默认/选项和缓存HTML元素我插入了整个插件的使用，我想出了以下内容。

正确的组合？

;(function($,window,document,undefined){
var myPlugin={
    // METHODS
    init:function(options){

    },
    buildElements:function(){ 
        var $Elements=$('<div id="myElem"></div>')
                    .appendTo($('body'));
       }
};

$.fn.myPlugin=function(method,options){
    var defaults={

    },
    options=$.extend({},defaults,options||{});

    myPlugin.buildElements();

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

显然，当我建立/插入myElem也只会是可用的方法中，而不是任何其他人里面....我会建立它在错误的地方？
在默认/在正确的位置延伸？
如果我不从插件之外想接入方式，我需要的方法逻辑部分？
是否有使用.prototype VS .fn什么好处？

非常感谢任何人，每个人都！ :)

再看“工具提示”的例子更仔细插件。这是一个真正的大格局。

它，你永远需要的所有命名空间，并且已经你习惯的类型，至少在底部的广义的“监督员”块是 - 即这部分：

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

methods是在strightforward的JavaScript方面为私有变量，但其性能被暴露在由管理一个非常聪明的，非常规的方式插件的方法。

Pleeeease不要尝试移动默认设置/选项的代码了init方法的。这会搞砸一切侧身！按照久经考验的模式，一切都会好起来的。

编辑：

一定要坚持以图案的其他方面：

为了保持jQuery对象chainability，使用return this.each(function(){...})结构的每一个不返回特定结果的方法。
（一般），在初始化，建立一个.data('pluninName', {...})对象以容纳上初始化确立的任何数据，并且需要被访问/修改/后来由其他插件的方法增强。

该图案仅提供单个封闭件为插件本身（含有methods对象）; 封闭的命名空间不能用于特定元素的数据（包括初始化选项），因此需要使用.data('pluninName', ...)

这些不仅仅是约定 - 他们是绝对关键是使该模式的工作原理为目的。