# 建造者模式
处理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 );
~~~
- 前言
- 简介
- 什么是设计模式?
- 设计模式的结构
- 编写设计模式
- 反模式
- 设计模式的分类
- 设计模式分类概览表
- JavaScript 设计模式
- 构造器模式
- 模块化模式
- 暴露模块模式
- 单例模式
- 观察者模式
- 中介者模式
- 原型模式
- 命令模式
- 外观模式
- 工厂模式
- Mixin 模式
- 装饰模式
- 亨元(Flyweight)模式
- JavaScript MV* 模式
- MVC 模式
- MVP 模式
- MVVM 模式
- 最新的模块化 JavaScript 设计模式
- AMD
- CommonJS
- ES Harmony
- JQuery 中的设计模式
- 组合模式
- 适配器模式
- 外观模式
- 观察者模式
- 迭代器模式
- 惰性初始模式
- 代理模式
- 建造者模式
- jQuery 插件的设计模式
- JavaScript 命名空间模式
- 总结
- 参考