// 如果我们传入的是一个对象参数,或者根本没有参数,init方法会被调用
method = methods.init;
} else {
// 如果方法不存在或者参数没传入,则报出错误。需要调用的方法没有被正确调用
$.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );
return this;
}
// 调用我们选中的方法
// 再一次注意我们是如何将each()从这里转移到每个单独的方法上的
return method.call(this);
}
})(jQuery, window, document);
//方式4 面向对象的插件开发 将原型和构造函数组合使用,使得通过构造函数创建的每个实例都能继承相关属性与方法
;(function($, window, document, undefined){
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele;
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
};
this.options = $.extend({}, this.defaults, opt);
}
//定义Beautifier的原型方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}
})(jQuery, window, document);
调用方法:$.fn.pluginName();
3、通过$.widget()应用jQuery UI的部件工厂方式创建
用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等
四、编写JQuery插件需要注意的地方:
1、插件的推荐命名方法为:jquery.[插件名].js
2、所有的对象方法都应当附加到JQuery.fn对象上面,而所有的全局函数都应当附加到JQuery对象本身上。
3、可以通过this.each() 来遍历所有的元素
4、在jQuery开发中,this关键词通常引用的是当前正在操作的DOM元素,但在当前的jQuery插件上下文中,this关键词引用的是当前jQuery实例自身,唯一的例外是在当前jQuery集合中遍历所有元素时,$.each循环体内的this引用的是这一轮遍历所暴露的DOM元素
5、所有方法或函数插件,都应当以分号结尾,否则压缩的时候可能会出现问题。为了更加保险写,可以在插件头部添加一个分号(;),以免他们的不规范代码给插件带来 影响。
6、插件应该返回一个JQuery对象,以便保证插件的可链式操作。
以上就是jQuery插件开发的知识点汇总,希望对大家的学习有所帮助。










