處理DOM時(shí),我們常常想要去動(dòng)態(tài)的構(gòu)建新的元素--這是一個(gè)會(huì)讓我們希望構(gòu)建的元素最終所包含的標(biāo)簽,屬性和參數(shù)的復(fù)雜性有所增長(zhǎng)的過(guò)程。
定義復(fù)雜的元素時(shí)需要特別的小心,特別是如果我們想要在我們?cè)貥?biāo)簽的字面意義上(這可能會(huì)亂成一團(tuán))擁有足夠的靈活性,或者取而代之去獲得更多面向?qū)ο舐肪€的可讀性。我們需要一種為我們構(gòu)建復(fù)雜DOM對(duì)象的機(jī)制,它獨(dú)立于為我們提供這種靈活性的對(duì)象本身,而這正是建造者模式為我們所提供的。
建造器使得我們僅僅只通過(guò)定義對(duì)象的類型和內(nèi)容,就可以去構(gòu)建復(fù)雜的對(duì)象,為我們屏蔽了明確創(chuàng)造或者展現(xiàn)對(duì)象的過(guò)程。
jQuery的美元標(biāo)記為動(dòng)態(tài)構(gòu)建新的jQuery(和DOM)對(duì)象提供了大量可以讓我們這樣做的不同的方法,可以通過(guò)給一個(gè)元素傳入完整的標(biāo)簽,也可以是部分標(biāo)簽還有內(nèi)容,或者使用jQuery來(lái)進(jìn)行構(gòu)造:
$( '<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內(nèi)部核心的jQuery.protoype方法,它支持從jQuery對(duì)象到傳入jQuery()選擇器的標(biāo)簽的構(gòu)造。不管是不是使用document.createElement去創(chuàng)建一個(gè)新的元素,都會(huì)有一個(gè)針對(duì)這個(gè)元素的引用(找到或者被創(chuàng)建)被注入到返回的對(duì)象中,因此進(jìn)一步會(huì)有更多的諸如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 );