初次了解jQuery的扩展

先来看这么一段代码：

$('span.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');
$('a.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');
$('p a.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');

作为你一懒癌晚期的程序员，怎么容忍这么一段重复的代码呢？而且有可能很多都需要这样的配置

特么逗我.jpg

能不能考虑先写个函数来调用设置，然后在<a href="http://www.jb51.net/article/42816.htm">这里</a>搜到如下

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。

那好，这样的话就好办了，针对上面的需求我们可以使用这个扩展一个highlight1()

$.fn.highlight1 = function () {
    // this已绑定为当前jQuery对象:
    this.css('backgroundColor', '#fffceb').css('color', '#d85030');
    return this;
}

于是，开头的那段代码可以改写：

$('span.hl').highlight1();
$('a.hl').highlight1();
$('p a.hl').highlight1();

可是，这样写太死板了，只要一个属性不一致就要重新弄一个函数，就会有一堆的highlight2，highlight3等等。那我是不是可以传入一个参数，让函数内部去选择显示啥属性，那改造一下函数

$.fn.highlight2 = function(options) {
    var bgcolor = options && options.backgroundColor || '#fffceb';
    var color = options && options.color || '#d85030';
    this.css('backgroundColor', bgcolor).css('color', color);
    return this;
}

// 上面的代码改为
$('span.hl').highlight2( { backgroundColor: '#00a8e6', color:'#ffffff' } );
$('a.hl').highlight2( { color: '#00a8e6', backgroundColor: '#fff8de' } );
$('p a.hl').highlight2();

另外一种方法是使用$.extend(target, obj1, obj2, ...)，把多个obj1的属性合并到一个target对象中，碰到同名属性，则后面对象的属性优先级更高。

var opts = $.extend({}, $.fn.highlight.defaults, options);

到这里，我们的大部分工作已经做好了，只是有些小问题，如果我仅仅只想改变其中一个设置呢，那看下最终的版本吧！

$.fn.highlight = function(options) {
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}
// 我们将这个方法公开出来，这样可以直接设置其不同的属性
$.fn.highlight.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
};

示例：

$.fn.highlight.defaults.color = '#fff';
$.fn.highlight.defaults.backgroundColor = '#000';

$('#test-highlightEx span').highlight();

至此，我们已经了解到jQuery的扩展是怎么回事了

参考

<a href="http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014356468967974219593d94f64d06b370c87fc38eade4000">扩展-廖雪峰的官方博客</a>