不定义JQuery插件 不要说会JQuery(2)

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);

步骤step06-a:在插件里定义了一个方法叫showLink(); 这个方法在插件外是不能直接调用的,有点像C#类里的一个私有方法,只能满足插件内部的使用。步骤step06-b演示了怎样调用插件内部的方法。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgyxdf.html