鍍金池/ 教程/ HTML/ 建造者模式
中介者模式
MVVM
亨元模式
設(shè)計(jì)模式分類概覽表
ES Harmony
組合模式
CommonJS
jQuery 插件的設(shè)計(jì)模式
外觀模式
觀察者模式
建造者模式
構(gòu)造器模式
外觀模式
簡介
AMD
原型模式
設(shè)計(jì)模式的分類
觀察者模式
命名空間模式
代理模式
編寫設(shè)計(jì)模式
適配器模式
反模式
什么是設(shè)計(jì)模式
模塊化模式
MVC
Mixin 模式
裝飾模式
設(shè)計(jì)模式的結(jié)構(gòu)
單例模式
迭代器模式
命令模式
工廠模式
MVP
暴露模塊模式
惰性初始模式

建造者模式

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

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

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

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