基于jquery实现插件

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

1.jQuery.extend()方法有一个重载。

jQuery.extend(object),一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子

      //扩展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

重载版本：jQuery.extend([deep],target,object1,[objectN])

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

例一：

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

console.log(settings) //validate: true | limit: 5| name: "bar"

例二：

/*合并 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);

console.log(settings); //validate: true, limit: 5, name: "bar" 
console.log(empty); //validate: true, limit: 5, name: "bar"

2.jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

通过查看jquery代码可以看出原来 jQuery.fn = jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法，就相当于为对象添加”成员方法“，类的”成员方法“要类的对象才能调用，所以使用jQuery.fn.extend(object)扩展的方法， jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。

3.下面封装一个完整的jQuery插件

html：

<p>我是一只小小小小鸟！！</p>

js：

(function($) {
                $.fn.extend({
                    "highLight": function(options) {
                        //检测用户传进来的参数是否合法
                        if(!isValid(options))
                            return this;
                        var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
                        return this.each(function() { //这里的this 就是 jQuery对象。这里return 为了支持链式调用
                            //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                            var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
                            //根据参数来设置 dom的样式
                            $this.css({
                                backgroundColor: opts.background,
                                color: opts.foreground
                            });
                            //格式化高亮文本
                            var markup = $this.html();
                            markup = $.fn.highLight.format(markup);
                            $this.html(markup);
                        });

                    }
                });
                //默认参数
                var defaluts = {
                    foreground: 'red',
                    background: 'yellow'
                };
                //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
                $.fn.highLight.format = function(str) {
                    return "<strong>" + str + "</strong>";
                }
                //私有方法，检测参数是否合法
                function isValid(options) {
                    return !options || (options && typeof options === "object") ? true : false;
                }
            })(window.jQuery);

            //调用
            //调用者覆盖 插件暴露的共公方法
            $.fn.highLight.format = function(txt) {
                return "<em>" + txt + "</em>"
            }
            $(function() {
                $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
            });

插件效果：