如何写一个jQuery插件

共计 2566 个字符，预计需要花费 7 分钟才能阅读完成。

1，定义作用域：定义一个 JQuery 插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。说了这么多，那要怎样定义一个插件的私有作用域？

//step01 定义 JQuery 的作用域
(function ($) {})(jQuery);

2，为 JQuery 扩展一个插件：当定义好了 JQuery 的作用域后，最核心也是最迫切的一步就是为这个 JQuery 的实例添加一个扩展方法。首先我们为这个 Jqury 插件命名一个方法，叫 easySlider，当在调用这个插件的时候，我们可以通过 options 来给这个插件传递一些参数。具体的定义方法看如下代码：

//step01 定义 JQuery 的作用域
(function () {//step02 插件的扩展方法名称.fn.easySlider = function (options) {}})(jQuery);

到现在为止，其实一个最简单的 JQuery 插件就已经完成了。调用的时候可以 (“#domName”).easySlider({})，或者(“.domName”).easySlider({}) 或者更多的方式来调用这个插件。

3，设置默认值：定义一个 JQuery 插件，就像定义一个.net 控件。一个完美的插件，应该是有比较灵活的属性。那准备开发一个 JQuery 插件时，在用户未指定属性时，应该有默认值，在 JQuery 可以分两步实现这样的定义, 看如下代码 step03-a，step03-b。

//step01 定义 JQuery 的作用域
(function () {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的扩展方法名称.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend({},defaults, options);
}
})(jQuery);

做程序的人都喜欢创新，改改变量名呀，换一个行呀这些。当看到用 var defaults = {}来表示一个默认属性时，在自己写 JQuery 插件时就想着与众不同，所以用 var default01 ={}，var default02 ={}来表示默认属性了。然后默认属性名五花八门，越来越糟。所以建议在写 JQuery 插件时，定义默认属性时，都用 defaults 变量来代表默认属性，这样的代码更具有可读性。

4，支持 JQuery 选择器：JQuery 选择器，是 JQuery 的一个优秀特性，如果我们的插件写来不支持 JQuery 选择器，确实是一个不小的遗憾。如了使自己的 JQuery 插件能支持多个选择器，我们的代码应该这样定义：

//step01 定义 JQuery 的作用域
(function () {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的扩展方法名称.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend({},defaults, options);
//step4 支持 JQuery 选择器
this.each(function () {});
}
})(jQuery);

5，支持 JQuery 的链接调用：上边的代码看似完美了，其实也不那么完美。到目前为止还不支持链接调用。为了能达到链接调用的效果必须要把循环的每个元素 return

//step01 定义 JQuery 的作用域
(function () {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的扩展方法名称.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend({},defaults, options);
//step4 支持 JQuery 选择器
//step5 支持链式调用
return this.each(function () {});
}
})(jQuery);

6，插件里的方法：往往实现一个插件的功能需要大量的代码，有可能上百行，上千行，甚至上万行。我们把这代码结构化，还得借助 function。在第一点已经说了，在插件里定义的方法，外界不能直接调用，我在插件里定义的方法也没有污染外界环境。现在就尝试着怎么样在插件里定义一些方法：

//step01 定义 JQuery 的作用域
(function () {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step06-a 在插件里定义方法
var showLink = function (obj) {(obj).append(function () {return "(" + (obj).attr("href") + ")" });
}

//step02 插件的扩展方法名称.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend({},defaults, options);
//step4 支持 JQuery 选择器
//step5 支持链式调用
return this.each(function () {
//step06-b 在插件里定义方法
showLink(this);
});
}
})(jQuery);