jquery插件机制中提供了两种开发开式：

一.jQuery.fn.extend(object)     对象级别

    实现jQuery方法的代码一般都是放在以下代码块中的:

     (function( $ ){

                //your code….

})(jQuery)

   这种匿名函数在加载的时候就直接运行,这条做的好处是可以避免与第三方插件冲突

 

 例1.

  (function($){

$.fn.setColor=function(color){

return this.each(function(){  //——————-a

$(this).css("color",color);

})  

}

})(jQuery)

 

使用方法如:  $("div").setColor("red");

a处使用了return,这样就可以让这个方式满足了链式,我们可以继续调用jquery方法:如

$("div").setColor("red").html("new words~~~~!");

 

优化参数:在js中我们喜欢用json格式的optionsc以控制插件的行为

例2.

 

(function($){

$.fn.setColor=function(options){

var defaults={                    //设定默认值

color:'blue',

backgroundColor:'yellow'

};

var opts=$.extend(defaults,options);

return this.each(function(){

$(this).css("color",opts.color);

$(this).css("background",opts.backgroundColor);

})

}

})(jQuery)

使用方法如:  $("div").setColor({color:'red'});

                       或$("div").setColor({color:'red',backgroundColor:'gray'});

                       

一般来说,一个插件对外只有一个接口,当要实现多个方法时,根据jquery建议的机制,把上面两种方法分开:

例3.

 

(function($){

var methods={

font:function(color){

return this.each(function(){

$(this).css('color',color);

})

},

background:function(color){

return this.each(function(){

$(this).css('background-color',color);

})

}

}

$.fn.setColor=function(method,color){

    if ( methods[method] ) {

     return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));

   } else {

     $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );

   }

}

})(jQuery)

使用的方法如:$(".div_one").setColor('font','red');

        $(".div_two").setColor('background','blue')

 

2.jQuery.extend(object)   类级别的

 

(function($){

$.myFun=function(){

alert('do sth here!');

}

})(jQuery)

调用方法：$.myFun();

Related postscoded by nessus