上篇有些设计模式没说道,一方面是我没见到,一方面是我不太理解。今天再说说其他的几种设计模式:
1.代理模式
就是我把一件事交给专门的一个处理程序去做。
比如下面这个例子:
var keyMgr = keyManage();
keyMgr.listen('change',proxy(function(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 ){
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'
暂时先介绍这么多,后面有新的发现再写。