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

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