初次了解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>