jQuery插件

前言

jQuery插件的用法和调用方式：

        //sample:扩展jquery对象的方法，bold()用于加粗字体。
        (function ($) {
            $.fn.extend({
                "bold": function () {
                    ///<summary>
                    /// 加粗字体
                    ///</summary>
                    return this.css({ fontWeight: "bold" });
                }
            });
        })(jQuery);
        // 调用方式
        $(function () {
            $('div').bold();
        })

一 、jQuery插件开发模式

    jquery提供了jQuery.extend()和jQuery.fn.extend()方法方便用户创建插件。

1、jQuery.extend() 方法

1）一个参数时$.extend(object) ：在jQuery命名空间或者可以理解成jQuery本身上添加一个或多个静态方法而以。所以我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）即可，而不需要选中DOM元素($('#example').myfunction())。

        //扩展jQuery对象本身
        jQuery.extend({
            "minValue": function (a, b) {
                ///<summary>
                /// 比较两个值，返回最小值
                ///</summary>
                return a < b ? a : b;
            },
            "maxValue": function (a, b) {
                ///<summary>
                /// 比较两个值，返回最大值
                ///</summary>
                return a > b ? a : b;
            }
        });
        //调用
        var i = 100; j = 101;
        var min_v = $.minValue(i, j); // min_v 等于 100
        var max_v = $.maxValue(i, j); // max_v 等于 101

优点：用来定义一些辅助方法是比较方便的。比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中任何需要的地方调用它。

$.extend({
    log: function(message) {
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth() + 1, //！JavaScript中月分是从0开始的
            d = now.getDate(),
            h = now.getHours(),
            min = now.getMinutes(),
            s = now.getSeconds(),
            time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
        console.log(time + ' My App: ' + message);
    }
})
$.log('initializing...'); //调用

缺点：无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。所见到或使用的插件也大多是通过此种方式开发。

2）多个参数（重载版本）：jQuery.extend([deep], target, object1, [objectN])

参数
   deep:       可选。如果设为true，则递归合并。
   target:     待修改对象。
   object1:   待合并到第一个对象的对象。
   objectN:   可选。待合并到第一个对象的对象。

   用一个或多个其他对象来扩展一个对象，返回被扩展的对象。如果不指定target，则给jQuery命名空间本身进行扩展，这有助于插件为jQuery增加新方法。 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

例1：

//合并 defaults和 options，修改并返回 settings。
var defaults= { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(defaults, options);
//结果：
defaults== { validate: true, limit: 5, name: "bar" }

例2：注意到上面代码调用extend时会将defaults的值改变，这样不好，因为它作为插件因有的一些东西应该维持原样，另外就是如果你在后续代码中还要使用默认值defaults的话，当你再次访问它时它已经被用户传进来的参数更改了。

一个好的做法是将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。

//合并 defaults 和 options, 不修改 defaults。
var empty = {}; 
var defaults = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
var settings = jQuery.extend(empty, defaults, options);
//结果：
settings == { validate: true, limit: 5, name: "bar" } 
empty == { validate: true, limit: 5, name: "bar" }

重载方法一般用来编写插件时用自定义的插件参数去覆盖插件的默认参数，如下示例中。
2、jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

首先我们来看fn 是什么东西呢? 查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {
    init: function( selector, context ) {.....};
};

原来 jQuery.fn = jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法，就相当于为对象添加”成员方法“，类的”成员方法“要类的对象才能调用，所以使用jQuery.fn.extend(object)扩展的方法， jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。支持链式调用，只需return一下即可。

    $.fn.extend({
        "myPlugin":function (options) {
            var defaults = {'color':'black','fontSize':'16px'};
            var settings = $.extend({},defaults,options);
            this.css({'color':settings.color,'fontSize':settings.fontSize});
            //this指代的是我们在调用该插件时，用jQuery选择器选中的元素,一般是一个jQuery类型的集合;
            // 在this身上调用jQuery的css()方法，也就相当于在调用 $('div').css()
            return this.each(function () {  //要让插件不打破这种链式调用，只需return一下即可
                $(this).append(' 2222');
                // this指代jQuery选择器返回的集合，那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了，但此刻要注意的是，在each方法内部，this指带的是普通的DOM元素了，如果需要调用jQuery的方法那就需要用$来重新包装一下
            })
        }
    });
    $(function () {
        var options = {'color':'blue','fontSize':'20px'}
        $('div').myPlugin(options);
    })

二、自执行的匿名函数/闭包

    1、 什么是自执行的匿名函数?     
　　   它是指形如这样的函数: (function {// code})();
    2、 疑问 为什么(function {// code})()；可以被执行, 而function {// code}()；却会报错?
    3、分析     
       (1) 首先，要清楚两者的区别： (function {// code})是表达式, function {// code}是函数声明。
       (2) 其次， js"预编译"的特点：  js在"预编译"阶段, 会解释函数声明, 但却会忽略表达式。 
       (3) 当js执行到function() {//code}()时，由于function() {//code}在"预编译"阶段已经被解释过， js会跳过function(){//code}， 试图去执行()， 故会报错；当js执行到(function {// code})()时，由于(function {// code})是表达式， js会去对它求解得到返回值， 由于返回值是一 个函数， 故而遇到()时， 便会被执行。

三、用自调用匿名函数包裹你的代码

1.定一个闭包区域，防止插件"污染"

//闭包限定命名空间
(function ($) {
    
})(window.jQuery);

2.jQuery.fn.extend(object)扩展jquery 方法，制作插件

//闭包限定命名空间
(function ($) {
    $.fn.extend({
        "highLight": function (options) {
            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
             return this.each(function () {  //这里的this 就是 jQuery对象
                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
                //根据参数来设置 dom的样式
                $this.css({
                    backgroundColor: opts.background,
                    color: opts.foreground
                });
            });

        }
    });
    //默认参数
    var defaluts = {
        foreground: 'red',
        background: 'yellow'
    };
})(window.jQuery);

3.调用代码如下

$(function () {
    $("p").highLight(); //调用自定义 高亮插件
});