jQuery插件编写规范
众所周知，jQuery不仅仅是一个十分优秀的javaScript库，它还提供了十分方便而标准的插件拓展接口，使我们编写的插件拥有统一的使用接口、事件机制，大大降低了开发者学习和集成插件的成本。
1. 声明插件
声明jQuery插件的方法十分简单，就是往jQuery.fn追加一个属性即可
// myPlugin就是你要声明的插件的名称
jQuery.fn.myPlugin = function () {
// 在这里书写插件的相关代码
}当然，我们一般更习惯使用美元符号$而不是jQuery。但是如果$已经被占用了，那么为了避免产生冲突，我们一般会利用 IIFE:（Immediately Invoked Function Expression,立即调用的函数表达式），在函数体内使用$指代jQuery。这也应该我们最常见的插件声明方式：
(function($) {
$.fn.myPlugin = function () {
// 在这里编写插件的实现代码
};
})(jQuery);2. 简单示例
下面演示一个返回当前页面中div元素的最大高度的插件（请注意插件内各个this分别指代的是什么）
(function ($) {
$.fn.maxHeight = function () {
var max = 0;
// 这里的this是DOM元素列表
this.each(function() {
// 这里的this是单个DOM元素，下面将它封装成一个jQuery对象
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);var tallest = $('div').maxHeight();3. 方法调用链
jQuery的许多函数会返回调用时传入的this，主要目的是为了方便编写流水线处理过程，因此我们的插件最好也遵循此规范：
(function($) {
$.fn.lockDimensions = function(type) {
return this.each(function() {
var $this = $(this);
if ( !type || type == 'width' ) {
$this.width( $this.width() );
}
if ( !type || type == 'height' ) {
$this.height( $this.height() );
}
});
};
})(jQuery);$('div').lockDimensions('width').css('color', 'red');4. 配置参数默认值
一些较为复杂、高度可定制的插件会有一堆配置参数，此时配置这些参数的默认值就变得十分重要了，这时jQuery本身提供的extend()函数就十分有用了。
(function( $ ){
$.fn.tooltip = function( options ) {
// 合并默认配置与用户传入的配置
var settings = $.extend( {
'location' : 'top',
'background-color' : 'blue'
}, options);
return this.each(function() {
// 插件的主要逻辑代码
});
};
})( jQuery );$('div').tooltip({
'location' : 'left'
});那么最终生效的参数配置就为：
{
'location' : 'left',
'background-color' : 'blue'
}5. 使用命名空间
假如我们要编写的插件不再只有一个函数了，而是有多个函数，之前的那种写法就很难再行得通了，例如：
(function( $ ){
$.fn.tooltip = function( options ) {
};
$.fn.tooltipShow = function( ) {
};
$.fn.tooltipHide = function( ) {
};
$.fn.tooltipUpdate = function( content ) {
};
})( jQuery );不仅大大增加了命名冲突的风险，还大大增加了管理的难度，推荐的做法是引入命名空间，把所有的插件函数集中起来进行管理，例如：
(function( $ ){
// 将所有的接口函数统统用methods对象封装起来
var methods = {
init : function( options ) {
},
show : function( ) {
},
hide : function( ) {
},
update : function( content ) {
}
};
// tooltip就是我们暴露出去的命名空间
$.fn.tooltip = function( method ) {
// 调用接口函数
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 );// 插件初始化（使用默认配置）
$('div').tooltip();
// 插件初始化（使用自定义配置）
$('div').tooltip({
foo : 'bar'
});// 调用hide方法
$('div').tooltip('hide');// 调用update方法
$('div').tooltip('update', 'This is the new tooltip content!');此种做法，充分利用了javaScript的闭包机制，也是jQuery插件社区的标准做法，我们使用各种jQuery插件时应该也对这种写法有些印象吧
6. 事件
同样地，插件相关的专属事件也都应该由命名空间统一管理
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
$(window).on('resize.tooltip', methods.reposition);
});
},
destroy : function( ) {
return this.each(function(){
$(window).off('.tooltip');
})
},
reposition : function( ) {
},
hide : function( ) {
$(window).trigger('hidden.tooltip');
}
};
})( jQuery );$('#fun').tooltip();
$('#someObj').on('hidden.tooltip', function(){···})
$('#fun').tooltip('hide');
$('#fun').tooltip('destroy');这样，在插件初始化后，每次浏览器的窗口大小发生变化时就会触发它的reposition函数，销毁时会自动把该事件监听解绑；而我们的someObj元素也只会对tooltip的hidden事件发生响应，而无视其他组件或者插件的hidden事件
7. 数据
如果我们的插件需要维护一些动态数据，或者我们需要确认我们的插件是否在对应元素上已经进行过初始化，如果已经进行过则无需再次进行初始化。。我们可以充分利用jQuery的dataAPI
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text : $this.attr('title')
});
// 如果还没进行初始化，则立即进行初始化
if ( ! data ) {
$(this).data('tooltip', {
target : $this,
tooltip : tooltip
});
}
});
},
destroy : function( ) {
return this.each(function(){
var $this = $(this),
data = $this.data('tooltip');
data.tooltip.remove();
$this.removeData('tooltip');
})
},
};
}
};
})( jQuery );