方法和原理在这篇博文中非常详细易懂 http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
下面整理下基本知识点和基本的代码段：
jQuery插件开发方式主要有三种：
- 通过$.extend()来扩展jQuery
- 通过$.fn 向jQuery添加新的方法
- 通过$.widget()应用jQuery UI的部件工厂方式创建
extend()的作用和用法
extend()中可以传入一个或多个对象，依次往前覆盖，最终第一个对象会添加到jQuery自身，直接看代码：
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用
extend()会在第二种方法中用来传入参数
一个基本的插件编写方式
js:
$.fn.pig = function(options){
var defaults = {
'color' : 'red',
'fontsize' : '12px'
};
var settings = $.extend({}, defaults, options);
this.css({
'color': settings.color,
'font-size': settings.fontsize
});
return this.each(function(){
$(this).append(' ' + $(this).attr('href'));
})
}
html:
<ul>
<li>
<a href="http://www.baidu.com/">百度</a>
</li>
<li>
<a href="http://www.google.com/">谷歌</a>
</li>
<li>
<a href="http://www.360.com/">360</a>
</li>
</ul>
<p>我是PPP</p>
<script type="text/javascript">
$(function() {
$('a').pig({
'color': '#2c9929'
});
})
</script>
上面的代码，已经可以让使用者传入对象或不传对象，能编写出健壮而灵活的插件了。
但是，当插件内容复杂时，代码面临组织问题，可以用面向对象的思维来做：
面向对象的插件开发
js定义对象后调用，然后包裹自调用匿名函数防止污染全局变量
(function() {
//定义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.pig = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}
})();
html不变
<ul>
<li>
<a href="http://www.baidu.com/">百度</a>
</li>
<li>
<a href="http://www.google.com/">谷歌</a>
</li>
<li>
<a href="http://www.360.com/">360</a>
</li>
</ul>
<p>我是PPP</p>
<script type="text/javascript">
$(function() {
$('a').pig({
'color': '#2c9929'
});
})
</script>
目前为止似乎接近完美了。
如果再考虑到一些潜在的问题，那么balabalabala，最后是这个样子：
;(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);
开始写一个自己的jQuery插件吧，发布jQuery插件到github的详细步骤这里也有：http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html