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");