JavaScript 建造者模式

建造者模式

處理DOM時，我們常常想要去動態(tài)的構(gòu)建新的元素--這是一個會讓我們希望構(gòu)建的元素最終所包含的標簽，屬性和參數(shù)的復(fù)雜性有所增長的過程。

定義復(fù)雜的元素時需要特別的小心，特別是如果我們想要在我們元素標簽的字面意義上（這可能會亂成一團）擁有足夠的靈活性，或者取而代之去獲得更多面向?qū)ο舐肪€的可讀性。我們需要一種為我們構(gòu)建復(fù)雜DOM對象的機制，它獨立于為我們提供這種靈活性的對象本身，而這正是建造者模式為我們所提供的。

建造器使得我們僅僅只通過定義對象的類型和內(nèi)容，就可以去構(gòu)建復(fù)雜的對象，為我們屏蔽了明確創(chuàng)造或者展現(xiàn)對象的過程。

jQuery的美元標記為動態(tài)構(gòu)建新的jQuery（和DOM）對象提供了大量可以讓我們這樣做的不同的方法，可以通過給一個元素傳入完整的標簽，也可以是部分標簽還有內(nèi)容，或者使用jQuery來進行構(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對象到傳入jQuery()選擇器的標簽的構(gòu)造。不管是不是使用document.createElement去創(chuàng)建一個新的元素，都會有一個針對這個元素的引用（找到或者被創(chuàng)建）被注入到返回的對象中，因此進一步會有更多的諸如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 );