jquery 自定义插件开发整理

jQuery插件的开发包括两种：

一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，

另一种是对象级别的插件开发，即给jQuery对象添加方法。

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。

方式1：

jQuery.foo = function() {    
  alert('This is a test. This is only a test.');   
};   
jQuery.bar = function(param) {    
  alert('This function takes a parameter, which is "' + param + '".');   
};    

jQuery.foo();jQuery.bar();或者$.fo();$.bar('bar');   

方式2：使用jQuery.extend(object)

jQuery.extend({       
  foo: function() {       
         alert('This is a test. This is only a test.');       
},       
  bar: function(param) {       
         alert('This function takes a parameter, which is "' + param +'".');       
}      
});  

方式3： 使用命名空间
虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = {           
   foo:function() {           
         alert('This is a test. This is only a test.');           
   },           
   bar:function(param) {           
         alert('This function takes a parameter, which is "' + param + '".');     
   }          
};   
采用命名空间的函数仍然是全局函数，调用时采用的方法：   
$.myPlugin.foo();          
$.myPlugin.bar('baz');  

2、对象级别的插件开发

对象级别的插件开发需要如下的两种形式：

形式1：    
(function($){   
$.fn.extend({      
pluginName:function(opt,callback){      
          // Our plugin implementation code goes here.        
}      
})    
})(jQuery);     
   
形式2： 
(function($) {        
$.fn.pluginName = function() {      
     // Our plugin implementation code goes here.      
};      
})(jQuery);

上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.
方式1：在JQuery名称空间下申明一个名字

通常当我们编写一个插件时，力求仅使用一个名字来包含它的所有内容。

$.fn.hilight = function() {     
  // Our plugin implementation code goes here.     
};     
我们的插件通过这样被调用：   
$('#myDiv').hilight();       

方式2：接受options参数以控制插件的行为

$.fn.hilight = function(options) {     
  var defaults = {     
    foreground: 'red',     
    background: 'yellow'     
  };     
  // Extend our default options with those provided.     
  var opts = $.extend(defaults, options);     
  // Our plugin implementation code goes here.     
};     
我们的插件可以这样被调用：   
$('#myDiv').hilight({     
  foreground: 'blue'     
});  

方式3：暴露插件的默认设置

让插件的使用者更容易用较少的代码覆盖和修改插件。接下来我们开始利用函数对象

// plugin definition    
 
$.fn.hilight = function(options) {     
  
    
  
 var opts = $.extend({}, $.fn.hilight.defaults, options); 
    
  // Our plugin implementation code goes here. 
    

}; 
    

// plugin defaults - added as a property on our plugin function     
$.fn.hilight.defaults = { foreground: 'red', background: 'yellow' 
};

//这个只需要调用一次，且不一定要在ready块中调用   
$.fn.hilight.defaults.foreground = 'blue';     
//接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色：   
$('#myDiv').hilight();   

<p>$('#green').hilight({  foreground: 'green'  });  </p>

方式4：适当的暴露一些函数

这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件（同时让其他人扩展你的插件）。

// plugin definition     
$.fn.hilight = function(options) {     
  // iterate and reformat each matched element     
  return this.each(function() {     
    var $this = $(this);     
    // ...     
    var markup = $this.html();     
    // call our format function     
    markup = $.fn.hilight.format(markup);     
    $this.html(markup);     
  });     
};     
// define our format function     
$.fn.hilight.format = function(txt) {     
return '<strong>' + txt + '</strong>';     
};     

我们很容易的支持options对象中的其他的属性通过允许一个回调函数来覆盖默认的设置。这是另外一个出色的方法来修改你的插件。这里展示的技巧是进一步有效的暴露format函数进而让他能被重新定义。
方式5：保持私有函数的私有性
需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的兼容性，那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢？这就是闭包的功能

 (function($) {     
  // plugin definition     
  $.fn.hilight = function(options) {     
    debug(this);     
    // ...     
  };     
  // private function for debugging     
  function debug($obj) {     
    if (window.console && window.console.log)     
      window.console.log('hilight selection count: ' + $obj.size());     
  };     
//  ...     
})(jQuery);