jQuery的扩展

虽然jQuery已经慢慢地退出开发者的视野，但是作为一个曾经统治web开发界这么长时间的js DOM操作库，还是很有必要去总结它的优秀的地方，吸取其设计思想，以备在其它地方使用。

1. jQuery.extend(object)和jQuery.extend([deep], target, object1, [objectN])

jQuery.extend(object)用于扩展jQuery类本身，举例如下：

jQuery.extend({
    min: function (a, b) {
        return a < b ? a : b;
    }
});
jQuery.min(1, 2); // 1

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

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实例对象方法，也就是$选中的dom对象可以使用的方法，举例如下：

jQuery.fn.extend({
    bold: function () {
        return this.css({ fontWeight: 'bold' });
    }
});
$('a').bold();

3. 一个相对完整的jQuery插件

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