# 建造者模式
處理DOM時,我們常常想要去動態的構建新的元素--這是一個會讓我們希望構建的元素最終所包含的標簽,屬性和參數的復雜性有所增長的過程。
定義復雜的元素時需要特別的小心,特別是如果我們想要在我們元素標簽的字面意義上(這可能會亂成一團)擁有足夠的靈活性,或者取而代之去獲得更多面向對象路線的可讀性。我們需要一種為我們構建復雜DOM對象的機制,它獨立于為我們提供這種靈活性的對象本身,而這正是建造者模式為我們所提供的。
建造器使得我們僅僅只通過定義對象的類型和內容,就可以去構建復雜的對象,為我們屏蔽了明確創造或者展現對象的過程。
jQuery的美元標記為動態構建新的jQuery(和DOM)對象提供了大量可以讓我們這樣做的不同的方法,可以通過給一個元素傳入完整的標簽,也可以是部分標簽還有內容,或者使用jQuery來進行構造:
~~~
$( '<div class="foo">bar</div>' );
$( '<p id="test">foo <em>bar</em></p>').appendTo("body");
var newParagraph = $( "<p />" ).text( "Hello world" );
$( "<input />" )
.attr({ "type": "text", "id":"sample"});
.appendTo("#container");
~~~
下面引用自jQuery內部核心的jQuery.protoype方法,它支持從jQuery對象到傳入jQuery()選擇器的標簽的構造。不管是不是使用document.createElement去創建一個新的元素,都會有一個針對這個元素的引用(找到或者被創建)被注入到返回的對象中,因此進一步會有更多的諸如as.attr()的方法在這之后就可以很容易的在其上使用了。
~~~
// HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context;
doc = ( context ? context.ownerDocument || context : document );
// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
ret = rsingleTag.exec( selector );
if ( ret ) {
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector, context, true );
} else {
selector = [ doc.createElement( ret[1] ) ];
}
} else {
ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
}
return jQuery.merge( this, selector );
~~~
- 前言
- 簡介
- 什么是設計模式?
- 設計模式的結構
- 編寫設計模式
- 反模式
- 設計模式的分類
- 設計模式分類概覽表
- JavaScript 設計模式
- 構造器模式
- 模塊化模式
- 暴露模塊模式
- 單例模式
- 觀察者模式
- 中介者模式
- 原型模式
- 命令模式
- 外觀模式
- 工廠模式
- Mixin 模式
- 裝飾模式
- 亨元(Flyweight)模式
- JavaScript MV* 模式
- MVC 模式
- MVP 模式
- MVVM 模式
- 最新的模塊化 JavaScript 設計模式
- AMD
- CommonJS
- ES Harmony
- JQuery 中的設計模式
- 組合模式
- 適配器模式
- 外觀模式
- 觀察者模式
- 迭代器模式
- 惰性初始模式
- 代理模式
- 建造者模式
- jQuery 插件的設計模式
- JavaScript 命名空間模式
- 總結
- 參考