我们先用最常用的插件方法创建一个库
jQuery.fn.redhome = function() {
//库的内容
};
那么，如果要调用redhome这个方法，直接可以$obj.redhome(args)
这里解释下jQuery.fn是啥东西
jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor ‘enhanced’
return new jQuery.fn.init( selector, context );
}jQuery.fn = jQuery.prototype = {
init: function( selector, context ) { …… }, ……
};
那么，其实很明显，$.fn.redhome其实就是jQuery.prototype.redhome,对jquery原型的扩展
这时，问题出现了，如果$符号已经被其他类库使用，那么冲突在所难免，这个时候，我们需要来创建一个闭包closure来防止$被其他库重写
(function( $ ){//闭包
$.fn.redhome = function() {
// Do your awesome plugin stuff here};
})( jQuery );
插件的环境
我们在调用插件的环境内，需要让this指针指向激活插件的对象。但是在一些实例中，如果调用了回调函数，this指针会指向正常的dom对象而不是jquery对象。这样经常会让程序员多余地把this指针包装一下。
(function( $ ){
$.fn.redhome = function() {
// 这里的this指向的就是jquery对象
// $(this) 在这里就像是 $((‘#element’));
this.fadeIn(‘normal’, function(){// this也是一个dom元素
});
};
})( jQuery );
参数的传递
(function( $ ){
$.fn.redhome = function( options ) { //传入的参数options
return this.each(function() {
var defaults = {
‘location’ : ‘top’,
‘background-color’ : ‘blue’
};
if ( options ) {
$.extend( defaults, options );//扩展方法原型，可以参考jQuery.extend 函数详解
}//插件要执行的代码
});
};
})( jQuery );
这样，我们就可以调用这个方法
$(‘div’).tooltip({
‘location’ : ‘left’//很熟悉吧，是不是想起了css()方法
});
接下来就是命名空间的问题了
我们不推荐通过这样的方法扩展
(function( $ ){
$.fn.redhome = function( options ) { // THIS };
$.fn.redhomeShow = function( ) { // IS };
$.fn.redhomeHide = function( ) { // BAD };
$.fn.redhomeUpdate = function( content ) { // !!! };})( jQuery );
这样很明显，直接占用了$.fn.的命名空间，更好的方法我们可以通过$.fn.redhome.show或者$.fn.redhome(“show”)这样的方式来调用对应的方法。
在这个选择上，jquery ui使用了后一种
(function( $ ){
var methods = {//这个是定义redhome内部方法的类
init : function( options ) { // THIS },
show : function( ) { // IS },
hide : function( ) { // GOOD },
update : function( content ) { // !!! }
};$.fn.redhome = function( method ) {
// 调用方法
if ( methods[method] ) {//把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.redhome’ );
}
};})( jQuery );
那么，我们就可以用$obj.redhome(“update”)来激活对应的方法,调用起来就比较方便。