建造者模式
最后更新于：2022-04-01 11:46:54
# 建造者模式
处理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 );
~~~