根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种：
通过$.extend()来扩展jQuery，添加的是静态方法，用得不多。
通过$.fn 向jQuery添加新的方法，常用方法，下面要介绍的写法。
通过$.widget()应用jQuery UI的部件工厂方式创建，用得不多。
;(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);
调用
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px',
'textDecoration': 'underline'
});
})
注释
- ; 用来防止上一行没有用 ; 结尾导致程序无法执行
- (function( ){ })( );自调用匿名函数用来避免污染全局作用域
- jQuery, window, document将系统变量以参数形式传递到插件内部window等系统变量在插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能的提升
- undefined我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined’那个位置接收到的就是真实的'undefined'了
- 使用面向对象的方法进行插件开发，使得代码易维护和扩展
- $.extend方法用来合并用户配置和默认配置，参数中使用{}空对象是为了避免修改默认defaults配置在插件中的值
- 最后用return返回起到插件链式调用的作用
