JQuery插件开发初探——结构熟悉

工作之余，对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);            });        });

 

基本步骤就是：

1. 定义命名空间。
2. 定义插件扩展方法
3. 定义默认值
4. 处理默认参数和自定义参数的关系
5. 链式调用和选择器框架
6. 定义功能实现
7. 添加注释，文档，示例