1.一次声明一个函数
$.fn.函数名 = function([options]){}
$.fn.red=function(options){
var defaults = {
'color': 'red'
};
var settings = $.extend(defaults, options);
this.css(settings);
return this;
}
2.一次声明多个函数
$.fn.extend({
函数名:function(){}
});
$.fn.extend({
big:function(options){
var defaults = {
'fontSize': '22px'
};
var settings = $.extend({},defaults, options);
this.css(settings);
return this;
},
normal:function(options){
var defaults = {
'fontSize': '12px'
};
var settings = $.extend({},defaults, options);
this.css(settings);
return this;
}
});
3.通常是结合命名空间搭配使用,将需要用到的功能块整合进来,然后确定好输入与输出,同时保证传入参数的可扩展性(有默认值,复合对象),和传出的链式调用(return this);
4. 扩展
4.1
//定义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(); } $(function() { $('a').myPlugin({ 'color': '#2C9929', 'fontSize': '20px' }); })
4.2