工作之余，对Jquery插件做了一点尝试，想着之前总用别人写的插件，自己要是也写一个用岂不是很cool。于是说干就干，动手开始写。
首先是模仿，从一个简单的功能进行入手，了解一下插件开发的流程和结构。
第一个尝试是做一个表格的隔行变色插件，相对简单。
首先是基本的框架结构：
自己的插件要定义在自己的命名空间中，不污染全局的命名空间，因此最外层应该是这样的结构：
(function ($) {
})(jQuery);
由于这种类型的插件是建立在对已有元素的功能扩展，因此大体格式如下：
function ($) {
$.fn.fnName = function (options) {
}
})(jQuery);
为自己的插件命名一个方法，同时给这个方法传递一个options的参数。
有了这个结构，就可以完成调用了，类似这样的方式：$("#domName"). fnName ({})
接下来就是设置插件的参数默认值和自定义值了。
由于插件需要提供一定的灵活性给用户，因此设置参数是必须的，但在用户做demo或者简单方便来说，要提供一个默认值也是必须的。因此，需要在插件内部声明默认值：
(function ($) {
$.fn.dannyTableUI = function (options) {
//定义默认值
var defaults = {
evenRowClass: 'evenc',
oddRowClass: 'oddc',
hoverRowClass: 'hoverc'
};
}
})(jQuery);
有了默认值，那么如果用户传递过来了自定义的参数值，如何处理呢？首先想到的是把用户自定义的参数值对默认值进行覆盖。如何覆盖呢？
Jquery提供了一个方法：
var options = $.extend(defaults, options);
这个方法可以把后面的参数覆盖到前面的参数中去，返回覆盖（合并）后的结果，非常方便。
有了这个方法，我们就能处理好自定义参数和默认值的关系了。
接下来，我们就要开始核心功能的编写了，要注意写法上如果要支持Jquery选择器和链式调用，需要这样：
//支持JQuery选择器
//支持链式调用
return this.each(function () { });
这样，整体的结构就完毕了。
最后把我们需要做的功能加进去，就可以了。
//隔行变色
this.each(function () {
var table = $(this);
table.find("tr:even").addClass(options.evenRowClass);
table.find("tr:odd").addClass(options.oddRowClass); table.find("tr").bind("mouseover", function () {
$(this).addClass(options.hoverRowClass);
});
table.find("tr").bind("mouseout", function () {
$(this).removeClass(options.hoverRowClass);
});
});
基本步骤就是：
- 定义命名空间。
- 定义插件扩展方法
- 定义默认值
- 处理默认参数和自定义参数的关系
- 链式调用和选择器框架
- 定义功能实现
- 添加注释，文档，示例
参考：http://www.cnblogs.com/xcj26/p/3345556.html