jquery插件 · CDBlog

说jQuery插件之前，先看看jQuery的几个关键点。

jQuery.fn = jQuery.prototype
jQuery = $
jQuery.extend() = $.extend()

前两个就别名关系，第三个才是主要要说的。 $.extend(param a, param b) 作用是将参数b的中key值复制到a中，同key的话b将覆盖a的值。。
例如， $.extend({a:111, b:222, c:333}, {a:222, b:333, d:444}) 将得到对象{a:222, b:333, c:333, d:444}。

进入正题， jQuery插件的写法。

$.extend

(function($){ 
    $.extend({ 
        functionA: function(){},
        functionB: function(){}
    });
})(jQuery);

自执行函数引入jQuery参数，调用 $.extend()，将functionA functionB 复制到jQuery对象中，也就相当于 jQuery这个对象本身有了 functionA 和 functionB 一样。

$.fn.extend

同理, 可以用$.fn.extend() 方法。

(function($){ 
        $.fn.extend({ 
            functionA: function(){},
            functionB: function(){}
        });
    })(jQuery);

区别是， functionA functionB 复制到了jQuery.fn, 即 jQuery.prototype 上了。

一些技巧

参数

functionA: function(options){
    var defaults = { 
        a: 11,
        b:222,
        ...
    };

    $.extend(defaults, options)  // or  $.extend(options, defaults)  or  params = $.extend(options, defaults)
}

defaults存储了默认参数， $.extend() 就将用户的参数覆盖默认参数，用户可以传入options来个性化使用插件。

插件返回值

直接在 functionA 中输出插件结果或者直接操作完dom，好处是直接就得到结果，不用进行其他处理。
学习jQuery的单例模式，在插件中返回一个插件对象，用户可以灵活调用插件内的方法
返回this，直接进行jQuery链式调用

思考

不管$.extend() 还是 $.fn.extend()，都是往jQuery对象中添加了新的方法，一个是添加在jQuery本身，一个是jQuery.prototype上。也就是说, 可以直接用 jQuery.functionA = function(), jQuery.prototype.functionA = function() 的方法来开发。
那么，用 $.extend() $.fn.extend() 的好处呢？这个就是这个自执行函数的好处了。

隔绝作用域，防止多个插件或者多个js文件的变量污染
方便压缩， (function(){})(jQuery); 这种函数块对于压缩是友好的
方便扩展，如果只是简单的dom选择器，在移动端可以用zepto代替jQuery, 传入window,则可以减少作用域链的查找，提升性能。
```
(function($, window){ 
        $.fn.extend({ 
            functionA: function(){},
            functionB: function(){}
        });
    })(jQuery，window);
```

最后，上传一个练手的定时器插件

用法示例： $.fn.timer({startTime:1460893951, selectorId:'striasd', format:'Object'});