如何写一个jQuery插件
jQuery 插件开发模式
jQuery 的插件开发模式主要有三种：
- 通过$.extend()来扩展jQuery
- 通过$.fn向jQuery添加新的方法
- 通过$.widget()应用jQuery UI 的部件工厂方式创建
这里我们选用第二种：
$.fn.myplugin = functin() {
// plugin code
}
因为这种方法是加在jQuery对象上，可以在jQuery选择器选择元素后直接调用：
$('body').myplugin();
若对其他两种方法有兴趣，请自行查看jQuery 官方文档。
一个非常简单的例子
改变元素的背景颜色插件：
$.fn.tinyPlugin = function(){
this.css('background-color','#fff'); // 这里的this是jQuery对象，而不是原生的js对象
}
这样写的话，颜色不能使用时定义，修改一下：
$.fn.tinyPlugin = function(bg){
this.css('background-color',bg);
}
以上是一个jQuery插件的基本结构。但编写更复杂的jQuery插件，借助面向对象的思想可以使插件具有更好的扩展性、可维护性。
面向对象开发插件
大体思路如下：
1.创建myplugin构造函数
2.定义myplugin的方法
3.添加到jQuery对象中
基本结构
首先将代码放到一个自执行的匿名函数中，防止全局对象污染：
根据上面的步骤，基本结构大致如下：
// 定义构造函数
function myplugin($element,options){
// ...
}
// 添加方法
myplugin.prototype = {
method1: function(){
// ...
},
method2: function(){
// ...
}
};
// 添加到jQuery对象中
$.fn.myplugin = function(options){
new myplugin(this,options);
}
后面将在这个结构上进行完善：
放到立即执行的匿名函数内部
放到匿名函数内部的主要作用是隔离作用域，避免变量污染，而自执行可以返回需要的函数或对象，而不需要每次通过条件判断为处理，只需要在首次加载的时候赋值给某个变量。更详细的信息参见知乎上的 这个问题。
;(function($){
// ...
})(jQuery);
留意到上面，函数前还加了分号，这是由于自执行函数前省略分号的表达式时，某些情况下会报错，可以看 这里。
在匿名函数里面还传入了jQuery对象，这样做的好处是美元符号 $ 在内部是一个私有变量，仅代表jQuery，可以防止和其他使用 $ 的库冲突。
有的自执行函数还将window对象、undefined对象传入，具体作用可以看 这里。
默认参数
options是提供给使用者定义的参数。一个好的插件，应该提供必要的参数给使用者，并且提供好默认的参数，因为很多情况下不是每个参数都需要自定义。之前在项目中写了一个加载更多 LoadMore 插件，就以这个插件为例：
function LoadMore($element,options){
this.$element = $element;
this._defaults = {
loadingSelector: ".zc_loading", //加载中的提示
overSelector: ".zc_loaded", // 加载完毕的加载
}
this.options = $.extend({},this._defaults,options||{}); // 合并参数
}
初始化方法
一般插件都会有一个 init() 方法，调用插件时做一些初始化操作：
function myplugin($element,options){
this.init();
}
// 添加方法
myplugin.prototype = {
init: function(){
// ...
}
};
防止多次初始化
为了防止用户多次在同一个元素上调用插件，有必要加一些已初始化的判断。通过在该元素上用 data() 方法缓存插件的实例对象，每次实例化时判断该缓存对象即可。
$.fn.myplugin = function(options){
if (!$.data(this, 'myplugin')) {
$.data(this, 'myplugin', new myplugin(this, options));
}
}
遍历所有元素
$ 选择器返回的有可能是多个元素，因此需要返回的所有元素添加插件，直接使用jQuery自带的 each() 方法：
$.fn.myplugin = function(options){
this.each(function(){
if (!$.data(this, 'myplugin')) {
$.data(this, 'myplugin', new myplugin(this, options));
}
});
}
注意这里的this 是jQuery对象，而不是原生JS对象。所以可以直接使用this.each()。
保持链式操作
由于jQuery有个链式操作的特性，在每个方法调用后都会返回该对象，因此只需要 return 该对象即可保持链式操作：
$.fn.myplugin = function(options){
return this.each(function(){
// ...
});
}
给插件添加方法
插件不仅有可配置的参数，很多时候还需要调用方法。比如说“加载更多”插件，可能需要知道现在加载到第几页，或者是否已经全部加载完毕。此时就需要调用方法来获得结果。
在前面我们知道是在 prototype 定义方法：
LoadMore.prototype = {
init: function(){},
// 重新加载
reload: function(){},
// 开始加载
startLoad: function(){},
// 本次加载完成
loadOver: function(){},
// 全部加载完毕
allLoadOver: function(){},
// 插入内容
insert: function(content){}
}
方法名可以通过options参数传入，只需在内部做字符串判断：
$.fn.LoadMore = function(options,para){
var instance;
instance = $.data(this,'LoadMore');
if(!instance){
instance = new LoadMore(this,options);
$.data(this,'LoadMore',instance);
}
// 如果是字符串则调用方法
if($.type(options) === 'string') {
return instance[options](para);
}
return this; // 保持链式
}
因此我们调用方法可以像下面这样：
$('#list').LoadMore('startLoad');
但是，当调用的方法需要传参怎么办？很简单，那就再加一个参数 para ：
$.fn.LoadMore = function(options,para){
// ...
// 如果是字符串则调用方法
if($.type(options) === 'string') {
return instance[options](para);
}
return this; // 保持链式
}
调用带参数的方法：
$('#list').LoadMore('insert','这是待插入的内容');
这里如果要使用回调函数，和上面也是一样的道理，只需在内部加个函数判断。不详述。若有更多的参数，请使用对象 {}。
配置参数中添加事件
在写 LoadMore 插件的过程中，还发现需要使用事件，比如说滚动到某个位置时，执行某些操作。也很简单，事件我们可以直接写在配置参数 options 中：
this._defaults = {
onScroll: null, // scroll中
onScrollBottom: null // scroll到底部
}
然后在内部 init() 函数中调用前判断：
init: function(){
var that = this,
$win = $(window),
$doc = $(document);
$win.on('scroll',function(){
(typeof that.options['onScroll'] == 'function') && that.options['onScroll']();
if($win.scrollTop() + $win.height() >= $doc.height()-10){
(typeof that.options['onScrollBottom'] == 'function') && that.options['onScrollBottom']();
}
});
}
兼容AMD规范
现在流行模块化开发，AMD是require.js在推广过程中的规范化产出，AMD说明见 这里。
下面的代码可以使你的插件兼容AMD规范，可以在require.js中直接调用，当然，没有使用require.js直接 <script> 引入也是可以的。
// amd support
(function(factory){
// amd support
if(typeof define === 'function' && define.amd){
define(['jquery'],factory);
}else {
factory(jQuery);
}
}(function($){
var exports = {};
// 这里写插件代码
return exports;
}));
上面的前一段是判断是否有define函数，有则调用define方法定义一个模块，否则直接执行。后一段的 exports 对象是模块的返回对象，模块对外的接口。关于AMD规范的具体信息，可参考阮一峰的 这篇文章。
结语
上面所写的就是写一个插件的大致流程，由于能力有限，还有很多要完善的地方。想要了解更多，这里推荐一篇文章 深入理解jQuery插件开发。另外，这里提供一个gitHub上面的某位大神写的插件 SlipHover供参考。
