JavaScript常用的设计模式

来自：http://developer.51cto.com/art/201210/361810.htm 

http://www.alloyteam.com/2012/10/common-javascript-design-patterns/

 

个人感觉JS设计模式类似于Java设计模式，关于模式的概念可参照java设计模式。

此处只是简单复制相应的js codes,便于理解。

 

一 单例模式

 

var mask; 
var createMask = function(){ 
if ( mask ) return mask; 
else{ 
mask = document,body.appendChild(  document.createElement(div)  ); 
return mask; 
} 
} 

 

 

二 简单工厂模式

 

       function A( name ){ 
              this.name = name; 
       } 
       function ObjectFactory(){ 
              var obj = {}, 
                     Constructor = Array.prototype.shift.call( arguments ); 
obj.__proto__ =  typeof Constructor .prototype === 'number'  ? Object.prototype 
:  Constructor .prototype;  
              var ret = Constructor.apply( obj, arguments ); 
              return typeof ret === 'object' ? ret : obj; 
       } 
       var a = ObjectFactory( A, 'svenzeng' ); 
       alert ( a.name );  //svenzeng 

 

 

三 观察者模式

 

div.onclick  =  function click (){ 
   alert ( ''click' ) 
} 

 

 

四 适配器模式

适配器模式的作用很像一个转接口。

在程序里适配器模式也经常用来适配2个接口, 比如你现在正在用一个自定义的js库. 里面有个根据id获取节点的方法$id(). 有天你觉得jquery里的$实现得更酷, 但你又不想让你的工程师去学习新的库和语法. 那一个适配器就能让你完成这件事情$id = function( id ){ 

  return jQuery( '#' + id )[0]; 
} 

 

 

五 代理模式

代理模式的定义是把对一个对象的访问, 交给另一个代理对象来操作.

 

var request = Ajax.get( 'cgi.xx.com/xxx' ); 
request.send(); 
request.done(function(){ 
});

 

 

 

六 桥接模式

桥接模式的作用在于将实现部分和抽象部分分离开来， 以便两者可以独立的变化。在实现api的时候， 桥接模式特别有用

var singleton = function( fn ){ 
    var result; 
    return function(){ 
        return result || ( result = fn .apply( this, arguments ) ); 
    } 
}<span id="more-3614"></span> 
var createMask = singleton( function(){ 
return document.body.appendChild( document.createElement('div') ); 
 }) 

 

singleton是抽象部分， 而createMask是实现部分

七 外观模式

外观模式(门面模式)，是一种相对简单而又无处不在的模式。外观模式提供一个高层接口，这个接口使得客户端或子系统更加方便调用。

var stopEvent = function( e ){   //同时阻止事件默认行为和冒泡 
  e.stopPropagation(); 
  e.preventDefault(); 
} 

 

八 访问者模式

 

利用访问者，对访问的元素进行某些操作时，只需将此对象作为参数传递给当前访问者，然后，访问者会依据被访问 者的具体信息，进行相关的操作。

利用访问者，我们来做个有趣的事情. 给一个object对象增加push方法.

var Visitor = {} 
Visitor .push  =  function(){ 
    return Array.prototype.push.apply( this, arguments ); 
} 
var obj = {}; 
obj.push = Visitor .push; 
obj.push( '"first" ); 
alert ( obj[0] )  //"first" 
alert ( obj.length );  //1 

 

九 策略模式

策略模式的意义是定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。
一个小例子就能让我们一目了然。

回忆下jquery里的animate方法.

$( div ).animate( {"left: 200px"}, 1000, 'linear' );  //匀速运动 
$( div ).animate( {"left: 200px"}, 1000, 'cubic' );  //三次方的缓动 

 

十 模版方法模式

 

模式方法是预先定义一组算法，先把算法的不变部分抽象到父类，再将另外一些可变的步骤延迟到子类去实现。听起来有点像工厂模式( 非前面说过的简单工厂模式 ).

最大的区别是,工厂模式的意图是根据子类的实现最终获得一种对象. 而模版方法模式着重于父类对子类的控制.

十一 中介者模式

中介者对象可以让各个对象之间不需要显示的相互引用，从而使其耦合松散，而且可以独立的改变它们之间的交互。

var mode1 = Mode.create(),  mode2 = Mode.create(); 
var view1 = View.create(),   view2 = View.create(); 
var controler1 = Controler.create( mode1, view1, function(){ 
  view1.el.find( ''div' ).bind( ''click', function(){ 
    this.innerHTML = mode1.find( 'data' ); 
  } ) 
}) 
var controler2 = Controler.create( mode2 view2, function(){ 
  view1.el.find( ''div' ).bind( ''click', function(){ 
    this.innerHTML = mode2.find( 'data' ); 
  } ) 
})

 

 

十二 迭代器模式

迭代器模式提供一种方法顺序访问一个聚合对象中各个元素，而又不需要暴露该方法中的内部表示。

forEach = function( ary, fn ){  for ( var i = 0, l = ary.length; i < l; i++ ){    var c = ary[ i ];    if ( fn.call( c, i , c ) === false ){      return false;    }   }} 
forEach( [ 1, 2, 3 ], function( i, n ){ 
  alert ( i ); 
}) 

 

 

十三 组合模式

组合模式又叫部分-整体模式，它将所有对象组合成树形结构。使得用户只需要操作最上层的接口，就可以对所有成员做相同的操作。

e.g. $( ‘body’ ).unbind( ‘*’ );

十四 备忘录模式

备忘录模式在js中经常用于数据缓存. 比如一个分页控件, 从服务器获得某一页的数据后可以存入缓存。以后再翻回这一页的时候，可以直接使用缓存里的数据而无需再次请求服务器。

var Page = function(){ 
   var page = 1, 
      cache = {}, 
      data; 
   return function( page ){ 
      if ( cache[ page ] ){ 
               data =  cache[ page ]; 
               render( data ); 
      }else{ 
               Ajax.send( 'cgi.xx.com/xxx', function( data ){ 
                   cache[ page ] = data; 
                   render( data ); 
               }) 
      } 
    } 
}() 

 

 

十五 职责链模式

十六 享元模式

 

十七 状态模式

//todo