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);
这样的定义才能支持链接调用。比如支持这样的调用：$(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color": "red", "border-bottom-style": "dotted" });
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);