JavaScript设计模式学习笔记2

上篇有些设计模式没说道，一方面是我没见到，一方面是我不太理解。今天再说说其他的几种设计模式：
1.代理模式
就是我把一件事交给专门的一个处理程序去做。
比如下面这个例子：

var keyMgr = keyManage();
        keyMgr.listen('change',proxy(function(keyCode){
            console.log(keyCode);
        }))

这块的proxy就是那个代理，原先是后面直接是处理函数，但是现在我是交给那个proxy，让他专门处理键盘这一类事件。

2.访问者模式
基本上js的原生方法都是访问者。例如下面这个给Object对象添加一个push方法：

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

3.策略模式
策略模式就是定义一系列算法，把他们一个个封装起来，并使他们可相互替换。看下面这个例子：

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

4.模版方法模式
就是预先定义一系列方法，先把算法的不变部分先抽象到父类，再将一些可变的步骤延迟到子类去实现。
例如下面这个例子：

var Life = function(){
}
Life.prototype.init = function(){
   this.DNA复制();
   this.出生();
   this.成长();
   this.衰老();
   this.死亡();
}
this.prototype.DNA复制 = function(){
  &*$%&^%^&(&(&(&&(^^(*)  
//看不懂的代码
}
Life.prototype.出生 = function(){
}
Life.prototype.成长 = function(){
}
Life.prototype.衰老 = function(){
}
Life.prototype.死亡 = function(){
}

5.中介者模式
可以让对象之间不用相互引用，从而使松散离合，而且可以独立的改变他们之间的交互。
看下面一段例子：

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' );
  } )
})

6.迭代器模式
就是提供一个方法顺序访问一个聚合对象中的元素。
比如js中的each方法

7.组合模式
也就整体部分模式，他将所有对象组织成树形结构，用户只需操作最上层的接口，就可以对所有成员做相同的操作。
看个例子：

<div>
   <span></span>
   <span></span>
</div>

我们想取消所有节点上绑定的事件, 需要这样写

var allNodes = document.getElementsByTagName("*");
var len = allNodes.length;
while( len-- ){
  allNodes.unbind("*");
}

但既然用了jquery，就肯定不会再做这么搓的事情。我们只需要$( ‘body’ ).unbind( ‘*’ );
当每个元素都实现unbind接口, 那么只需调用最上层对象$( ‘body’ )的unbind, 便可自动迭代并调用所有组合元素的unbind方法.

8.备忘录模式
常用于数据缓存，比如一个分页控件，从服务器获取一部分数据之后，存入缓存，以后再返回这一页的时候不用在重新向服务器请求数据了。

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 );
               })
      }
    }
}()

9.状态模式
可以适用于以下场景
1 一个对象的行为取决于他的状态
2 一个操作中含有大量的条件分支语句
例如下面的例子：

if ( state === 'jump' ){
   if ( currState === 'attack' || currState === 'defense' ){
     return false;
   }
}else if ( state === 'wait' ){
   if ( currState === 'attack' || currState === 'defense' ){
     return true;
   }
}

有好多的if else
为了消灭这些
我们引入一个状态类
var StateManager = function(){
  var currState = 'wait';
  var states = {
    jump: function( state ){
    },
    wait: function( state ){
    },
    attack: function( state ){
    },
    crouch: function( state ){
    },
    defense: function( state ){
      if ( currState === 'jump'  ){
          return false;  
//不成功，跳跃的时候不能防御
      }

//do something; //防御的真正逻辑代码, 为了防止状态类的代码过多, 应该把这些逻辑继续扔给真正的fight类来执行.
    currState = 'defense'; 
// 切换状态
    }
  }
  var changeState = function( state ){
    states[ state ] && states[ state ]();
  }
  return {
      changeState  : changeState
  }
}
var stateManager = StateManager();
stateManager.changeState( 'defense' );

暂时先介绍这么多，后面有新的发现再写。