初次了解jQuery的扩展

2017-05-10  本文已影响27人  JanuaryMei

先来看这么一段代码:

$('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>

上一篇下一篇

猜你喜欢

热点阅读