建造者模式
优质
小牛编辑
133浏览
2023-12-01
处理DOM时,我们常常想要去动态的构建新的元素--这是一个会让我们希望构建的元素最终所包含的标签,属性和参数的复杂性有所增长的过程。
定义复杂的元素时需要特别的小心,特别是如果我们想要在我们元素标签的字面意义上(这可能会乱成一团)拥有足够的灵活性,或者取而代之去获得更多面向对象路线的可读性。我们需要一种为我们构建复杂DOM对象的机制,它独立于为我们提供这种灵活性的对象本身,而这正是建造者模式为我们所提供的。
建造器使得我们仅仅只通过定义对象的类型和内容,就可以去构建复杂的对象,为我们屏蔽了明确创造或者展现对象的过程。
jQuery的美元标记为动态构建新的jQuery(和DOM)对象提供了大量可以让我们这样做的不同的方法,可以通过给一个元素传入完整的标签,也可以是部分标签还有内容,或者使用jQuery来进行构造:
$( '<div class="foo">bar</div>' );
$( '<p>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 );