jquery中的设计模式（一）

 Composite（组合）模式

composite模式描述了一组对象，可以使用与处理对象的单个实例同样的方式来进行处理。

这样能使我们能够以统一的方式处理单个对象或者组合。在jQuery中，把方法应用于元素或元素集合时，可以使用统一的方式来处理它们，因为这两种选择都会返回jQuery对象。

例：

$("#test").addClass(".red");
$(".test").addClass(".red");

可以向单一的元素添或者一组具有test类的元素添加red类，而无需额外的工作。

jQuery源码：

addClass: function( value ) {
var classes, elem, cur, clazz, j, finalValue,
proceed = typeof value === "string" && value,
i = 0,
len = this.length;

if ( jQuery.isFunction( value ) ) {
return this.each(function( j ) {
jQuery( this ).addClass( value.call( this, j, this.className ) );
});
}

if ( proceed ) {
// The disjunction here is for better compressibility (see removeClass)
classes = ( value || "" ).match( rnotwhite ) || [];

for ( ; i < len; i++ ) {
elem = this[ i ];
cur = elem.nodeType === 1 && ( elem.className ?
( " " + elem.className + " " ).replace( rclass, " " ) :
" "
);

if ( cur ) {
j = 0;
while ( (clazz = classes[j++]) ) {
if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
cur += clazz + " ";
}
}

// only assign if different to avoid unneeded rendering.
finalValue = jQuery.trim( cur );
if ( elem.className !== finalValue ) {
elem.className = finalValue;
}
}
}
}

return this;
}

Adapter（适配器）模式

Adapter模式将对象或类的接口转变为与特定的系统兼容的接口。

jQuery中的适配器：jQuery.fn.css()方法。它不仅有助于标准化接口，以展示样式如何应用于多种浏览器，使我们能轻松的使用简单的语法适配浏览器在后台实际支持的语法。

Facade（外观）模式

Facade 模式为更大的代码体提供了一个更简单的接口。

我们经常在jQuery中发现Facade，它使开发人员能够方便的访问实现，以处理DOM操作、动画以及有趣的Ajax。

下面是jQuery的$.ajax()外观：

$.get(url,data,callback,dataType);

$,post(url,data,callback,dataType);

这些在后头进行转变：

$.ajax({
type:"post",
url:url,
data:data,
dataType:dataType
}).done(callback);

更有趣的是，上面的外观实际上是自身功能的外观，在后台隐藏大量的复杂性。
Observer（观察者）模式

jQuery核心具有对Publish/Subscribe 系统的内置支持，它被称为自定义事件。

jQuery早期版本中，使用jquery.bind()  (subscribe)、jQuery.trigger() (publish) 和jQuery.unbind() (unsubscribe)可以访问这些自定义事件，但在新版本中，可以使用JQuery.on()、jQuery.trigger()、jQuery.off()来实现这样目的。

//等价于subscribe(topicName,callback)
$(document).on("topicName",function(){
//do something
});
//等价于publish(topicName)
$(document).trigger("topicName");
//等价于unsubscribe(topicName)
$(document).off("topicName");