# 組合模式
組合模式 描述了一組對象可像單個對象一樣的對待。
這允許我們能統一的處理單個對象或多個對象。這意味著無論是一個對象還是一千個對象我們都能以同樣的行為來處理。
在Jquery中,當我們在一個節點或多個節點上應用方法時,我們都能以相同的方式來選擇并返回JQuery對象。
下面這個演示我們將使用Jquery的選擇器。對單一元素(比如擁有唯一ID的元素)或擁有相同標簽或Class的一組元素添加名為active的class,對待它們使用上并無不同:
~~~
// 單一節點
$( "#singleItem" ).addClass( "active" );
$( "#container" ).addClass( "active" );
// 一組節點
$( "div" ).addClass( "active" );
$( ".item" ).addClass( "active" );
$( "input" ).addClass( "active" );
~~~
JQuery的addClass()實現中直接使用原生的for循環、Jquery的JQuery.each()、Jquery.fn.each來迭代一個集合以達到能同時處理一個或一組元素的目的。請看下面的例子:
~~~
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;
}
~~~
- 前言
- 簡介
- 什么是設計模式?
- 設計模式的結構
- 編寫設計模式
- 反模式
- 設計模式的分類
- 設計模式分類概覽表
- JavaScript 設計模式
- 構造器模式
- 模塊化模式
- 暴露模塊模式
- 單例模式
- 觀察者模式
- 中介者模式
- 原型模式
- 命令模式
- 外觀模式
- 工廠模式
- Mixin 模式
- 裝飾模式
- 亨元(Flyweight)模式
- JavaScript MV* 模式
- MVC 模式
- MVP 模式
- MVVM 模式
- 最新的模塊化 JavaScript 設計模式
- AMD
- CommonJS
- ES Harmony
- JQuery 中的設計模式
- 組合模式
- 適配器模式
- 外觀模式
- 觀察者模式
- 迭代器模式
- 惰性初始模式
- 代理模式
- 建造者模式
- jQuery 插件的設計模式
- JavaScript 命名空間模式
- 總結
- 參考