# 組合模式
組合模式 描述了一組對(duì)象可像單個(gè)對(duì)象一樣的對(duì)待。
這允許我們能統(tǒng)一的處理單個(gè)對(duì)象或多個(gè)對(duì)象。這意味著無(wú)論是一個(gè)對(duì)象還是一千個(gè)對(duì)象我們都能以同樣的行為來(lái)處理。
在Jquery中,當(dāng)我們?cè)谝粋€(gè)節(jié)點(diǎn)或多個(gè)節(jié)點(diǎn)上應(yīng)用方法時(shí),我們都能以相同的方式來(lái)選擇并返回JQuery對(duì)象。
下面這個(gè)演示我們將使用Jquery的選擇器。對(duì)單一元素(比如擁有唯一ID的元素)或擁有相同標(biāo)簽或Class的一組元素添加名為active的class,對(duì)待它們使用上并無(wú)不同:
~~~
// 單一節(jié)點(diǎn)
$( "#singleItem" ).addClass( "active" );
$( "#container" ).addClass( "active" );
// 一組節(jié)點(diǎn)
$( "div" ).addClass( "active" );
$( ".item" ).addClass( "active" );
$( "input" ).addClass( "active" );
~~~
JQuery的addClass()實(shí)現(xiàn)中直接使用原生的for循環(huán)、Jquery的JQuery.each()、Jquery.fn.each來(lái)迭代一個(gè)集合以達(dá)到能同時(shí)處理一個(gè)或一組元素的目的。請(qǐng)看下面的例子:
~~~
addClass: function( value ) {
var classNames, i, l, elem,
setClass, c, cl;
if ( jQuery.isFunction( value ) ) {
return this.each(function( j ) {
jQuery( this ).addClass( value.call(this, j, this.className) );
});
}
if ( value && typeof value === "string" ) {
classNames = value.split( rspace );
for ( i = 0, l = this.length; i < l; i++ ) {
elem = this[ i ];
if ( elem.nodeType === 1 ) {
if ( !elem.className && classNames.length === 1 ) {
elem.className = value;
} else {
setClass = " " + elem.className + " ";
for ( c = 0, cl = classNames.length; c < cl; c++ ) {
if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
setClass += classNames[ c ] + " ";
}
}
elem.className = jQuery.trim( setClass );
}
}
}
}
return this;
}
~~~
- 前言
- 簡(jiǎn)介
- 什么是設(shè)計(jì)模式?
- 設(shè)計(jì)模式的結(jié)構(gòu)
- 編寫設(shè)計(jì)模式
- 反模式
- 設(shè)計(jì)模式的分類
- 設(shè)計(jì)模式分類概覽表
- JavaScript 設(shè)計(jì)模式
- 構(gòu)造器模式
- 模塊化模式
- 暴露模塊模式
- 單例模式
- 觀察者模式
- 中介者模式
- 原型模式
- 命令模式
- 外觀模式
- 工廠模式
- Mixin 模式
- 裝飾模式
- 亨元(Flyweight)模式
- JavaScript MV* 模式
- MVC 模式
- MVP 模式
- MVVM 模式
- 最新的模塊化 JavaScript 設(shè)計(jì)模式
- AMD
- CommonJS
- ES Harmony
- JQuery 中的設(shè)計(jì)模式
- 組合模式
- 適配器模式
- 外觀模式
- 觀察者模式
- 迭代器模式
- 惰性初始模式
- 代理模式
- 建造者模式
- jQuery 插件的設(shè)計(jì)模式
- JavaScript 命名空間模式
- 總結(jié)
- 參考
