标签：
【前言】
关于jQuery的插件，网上一搜一大把，一开始在项目中使用别人写的插件的时候，真是佩服的五体投地，调用的时候简简单单的几句代码，就能实现很复杂的功能。那么如何开发自己的插件呢？其实并不难，从简单的开始，一步一步网上添加功能，最后咋们也能写出功能强大的插件。
【jQuery插件开发模式】
jQuery插件开发模式有三种：
（1）通过$.extend()来扩展jQuery
多用于拓展工具方法，比如给一个数组封装一个方法，功能是将其中的重复元素删除：$.removeSameItem([1,1,2,3]);
（2）通过$.fn 向jQuery添加新的方法
用于对jQuery对象操作的拓展，比如给元素设置背景颜色，$("#body").setRed();
（3）通过$.widget()应用jQuery UI的部件工厂方式创建
可以自己写一个完整的对象，通过挂件模式挂载在jquery对象上，其实本质上也就是用了$.fn.extend和$.extend的扩展，不过挂件比较大得不同是本身是一个比较独立的单元，跟其他的部分耦合性较低，内聚性较高。
（第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，还没有学会(*^__^*) ……。第二种则是一般插件开发用到的方式，也是目前我最擅长的。）
【设置作用域】
为了不让自己开发的插件中的变量被污染或者污染别人，只想安安静静的做好自己的事情，那么闭包肯定是必不可少的，咋们插件的核心代码就写在这个闭包中。
(function($) {
//安安静静的做自己应该做的事情，不想被打扰，也不想打扰别人
})(jQuery);
【插件定义】
咋们现在需要给DOM添加拓展，那么就需要使用第二种拓展方法，如下：
$.fn.myPlugin= function(options) {
return this.each(function() {
var _this = $(this),
// 从当前对象下读取实例
instance = _this.data(‘CircularLoading‘);
// 如果没有实例新建一个
if (!instance) {
// 新建实例,_this表示当前选中元素，options表示配置
instance = new CircularLoading(_this, options);
// 将当前实例保存到data数据中
_this.data(‘CircularLoading‘, instance);
}
if ($.type(options) === ‘string‘) {
return instance[options]();
}
});
};
上面这代码，很多人看了是不是很懵呀(*^__^*) ……
哈哈，谁让jQuery这么强大呢！
下面这几个问题是不是你想问的？不要问我为什么知道你想的，因为一开始，我和你们一样懵O(∩_∩)O~
【问题解答】
问题（1）：为什么要有个return？
答：我们都知道jQuery一个时常优雅的特性是支持链式调用，选择好DOM元素后可以不断地调用其他方法。要让插件不打破这种链式调用，只需return一下即可。
像这样：$("body").myPlugin().html().css().....
问题（2）：this.each() 又是什么鬼？
答：首先在JQ中，each是遍历一个数组，比如你$(‘.some‘)返回的不一定只是一个jq对象，有可能是个数组，好多个elements。
所以return this.each(){}是把所有你索引的对象都作用到这个插件下，你若保证你的插件每次都只会用一个JQ对象，那么你可以直接return this，很明显不能保证呀！所以还是使用this.each会比较好。
标签：
原文地址：http://www.cnblogs.com/songxiaoyu/p/5778154.html
