jQuery插件开发前准备（一）

【前言】

　　关于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('MyPlugin');
        // 如果没有实例新建一个
        if (!instance) {
            // 新建实例,_this表示当前选中元素，options表示配置
            instance = new MyPlugin(_this, options); // 将当前实例保存到data数据中 _this.data('MyPlugin', 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会比较好。