javascript设计模式学习之十六——状态模式
一、状态模式的定义
状态模式的关键是区分事务内部和外部的状态，事务内部状态改变往往会带来事务的行为改变。
状态模式中有意思的一点是，一般我们谈到封装，都是优先封装对象的行为，而非对象的状态。但在状态模式中刚好相反，状态模式的关键是把事务的每种状态都封装为单独的类，跟此种状态有关的行为都封装在这个类的内部。与此同时，我们还可以把状态的切换规则实现分布在状态类中，这样就有效消除了原本存在的大量条件分支语句。
二、状态模式的应用案例——文件上传
在现实中，状态模式的应用案例有很多，如文件上传程序有文件扫描、正在上传、暂停、上传成功、上传失败这几种状态，音乐播放器有加载中、正在播放、暂停、播放完毕这几种状态。点击同一个按钮，在上传中和暂停状态下的行为表现是不一样的，同时他们的class也不一样。
在文件上传中，涉及到两个控制按钮：第一个用于暂停和继续上传，第二个用于删除文件；文件在不同的状态下，点击这两个按钮，发生的行为也不同：
1）文件在扫描过程中，是不能进行任何操作的，既不能暂停也不能删除文件，只能等待扫描完成。扫描完成后，根据文件的md5进行判断，如果文件已经存在于服务器中，则直接跳转到上传完成状态。如果文件的大小超过允许上传的最大值，或者文件已经损坏，则跳转到上传失败状态。
2）上传过程中可以点击暂停按钮来暂停上传，暂停后点击同一个按钮会继续上传。
3）扫描和上传过程中，点击删除按钮无效，只有在暂停、上传完成、上传失败之后，才能删除文件。
文件上传是一个异步的过程，在上传过程中，上传插件会不停地调用javascript提供的一个全局函数window.external.upload,来通知javascript目前的上传进度，控件会把当前的文件状态作为参数state塞进window.external.upload.这里使用setTimeout来模拟文件的上传进度，以下代码模拟上传插件的实现：
//上传插件对象 var plugin = (function() { var plugin = document.createElement('embed'); plugin.style.display = 'none'; plugin.type = 'application/txftn-webkit'; //插件扫描 plugin.sign = function() { console.log('plugin开始进行文件扫描'); }; plugin.pause = function() { console.log('plugin暂停文件扫描'); }; plugin.uploading = function() { console.log('plugin开始文件上传'); }; plugin.del = function() { console.log('plugin删除文件上传'); }; plugin.done = function() { console.log('plugin文件上传完成'); }; document.body.appendChild(plugin); return plugin; })();
如果编写传统代码实现文件上传，代码如下：
//采用传统方法实现文件上传 //实现上传类 var Upload = function(fileName) { this.fileName = fileName; this.plugin = plugin; this.button1 = null; //控制继续、暂停上传等 this.button2 = null; //控制上传文件删除等 this.curState = 'sign'; //设置初始状态为文件扫描 }; Upload.prototype.init = function() { this.div = document.createElement('div'); this.div.innerHTML = '<span>文件名称：' + this.fileName + '</span><button id="button1">扫描中</button><button id="button2">删除</button>'; document.body.appendChild(this.div); this.button1 = document.getElementById('button1'); this.button2 = document.getElementById('button2'); this.bindEvent(); }; Upload.prototype.changeState = function(state) { //负责切换状态的具体行为 this.curState=state; switch (state) { case 'sign': this.plugin.sign(); this.button1.innerHTML = '扫描中，任何操作无效'; break; case 'uploading': this.plugin.uploading(); this.button1.innerHTML = '正在上传，点击暂停'; break; case 'pause': this.plugin.pause(); this.button1.innerHTML = '已暂停，点击继续上传'; break; case 'done': this.plugin.done(); this.button1.innerHTML = '文件上传完成'; break; case 'error': this.button1.innerHTML = '文件上传失败'; break; case 'del': this.plugin.del(); this.div.parentNode.removeChild(this.div); console.log('删除完成'); break; } }; Upload.prototype.bindEvent = function() { var self = this; this.button1.onclick = function() { if (self.curState === 'sign') { console.log('扫描中，点击无效...'); } else if (self.curState === 'uploading') { //上传中，切换到暂停样式 self.changeState('pause'); } else if (self.curState === 'pause') { //暂停中，切换到上传模式 self.changeState('uploading'); } else if (self.curState === 'done') { console.log('文件已经上传，点击无效...'); } else if (self.curState === 'error') { console.log('文件上传失败，点击无效...'); } }; this.button2.onclick = function() { if (self.curState === 'done' || self.curState === 'error' || self.curState === 'pause') { self.changeState('del'); //以上三种状态下可以删除 } else if (self.curState === 'sign') { console.log('文件正在扫描中，不能删除'); } else if (self.curState === 'uploading') { console.log('文件正在上传中，不能删除'); } }; };
上面完成了一个简单的文件上传程序。当然这是一个反例，程序中充斥着大量的if-else语句，状态和行为都被耦合到一个巨大的方法里，难以进行修改和扩展。
测试：
var uploadObj=new Upload('java疯狂讲义'); uploadObj.init(); window.external.upload=function(state){ uploadObj.changeState(state); }; window.external.upload('sign'); setTimeout(function(){ window.external.upload('uploading'); },1000); setTimeout(function(){ window.external.upload('done'); },5000);
运用状态模式重构以上代码：
//上传插件对象 var plugin = (function() { var plugin = document.createElement('embed'); plugin.style.display = 'none'; plugin.type = 'application/txftn-webkit'; //插件扫描 plugin.sign = function() { console.log('plugin开始进行文件扫描'); }; plugin.pause = function() { console.log('plugin暂停文件扫描'); }; plugin.uploading = function() { console.log('plugin开始文件上传'); }; plugin.del = function() { console.log('plugin删除文件上传'); }; plugin.done = function() { console.log('plugin文件上传完成'); }; document.body.appendChild(plugin); return plugin; })(); //使用状态模式重构文件上传代码 var Upload = function() { this.plugin = plugin; this.fileName = fileName; this.button1 = null; this.button2 = null; //构建各个状态类 this.signState = new SignState(this); this.uploadingState = new UploadingState(this); this.pauseState = new PauseState(this); this.doneState = new DoneState(this); this.errorState = new ErrorState(this); this.curState = this.signState; }; Upload.prototype.init = function() { this.div = document.createElement('div'); this.div.innerHTML = '<span>文件名称：' + this.fileName + '</span><button id="button1">扫描中</button><button id="button2">删除</button>'; document.body.appendChild(this.div); this.button1 = document.getElementById('button1'); this.button2 = document.getElementById('button2'); this.bindEvent(); }; Upload.prototype.bindEvent = function() { var self = this; this.button1.onclick = function() { self.curState.clickHandler1(); }; this.button2.onclick = function() { self.curState.clickHandler2(); }; }; Upload.prototype.sign=function(){ this.plugin.sign(); this.curState=this.signState; }; Upload.prototype.uploading=function(){ this.button1.innerHTML='正在上传,点击暂停'; this.plugin.uploading(); this.curState=this.uploadingState; }; Upload.prototype.pause=function(){ this.button1.innerHTML='已暂停，点击继续上传'; this.plugin.pause(); this.curState=this.pauseState; }; Upload.prototype.done=function(){ this.button1.innerHTML='上传完成'; this.plugin.done(); this.curState=this.doneState; }; Upload.prototype.error=function(){ this.button1.innerHTML='上传失败'; this.curState=this.errorState; }; Upload.prototype.del=function(){ this.plugin.del(); this.div.parentNode.removeChild(this.div); }; //接下来编写各个状态类的实现 var StateFactory = (function() { //这个相当于抽象类 var State = function() {}; State.prototype.clickHandler1 = function() { throw new Error('子类必须重写父类的clickHandler1方法'); }; Stat8e.prototype.clickHandler2 = function() { throw new Error('子类必须重写父类的clickHandler2方法'); }; return function(param) { var F = function(uploadObj) { this.uploadObj = uploadObj; }; F.prototype = new State(); for (var i in param) { F.prototype[i] = param[i]; } return F; }; })(); var signState = StateFactory({ clickHandler1: function() { console.log('扫描中，点击无效'); }, clickHandler2: function() { console.log('文件正在扫描，不能删除'); } }); var UploadingState = StateFactory({ clickHandler1: function() { this.uploadObj.pause(); }, clickHandler2: function() { console.log('文件正在上传，不能删除'); } }); var PauseState = StateFactory({ clickHandler1: function() { this.uploadObj.uploading(); }, clickHandler2: function() { this.uploadObj.del(); } }); var DoneState = StateFactory({ clickHandler1: function() { console.log('文件上传完成，点击无效'); }, clickHandler2: function() { this.uploadObj.del(); } }); var ErrorState = StateFactory({ clickHandler1: function() { console.log('文件上传失败，点击无效'); }, clickHandler2: function() { this.uploadObj.del(); } }); window.external.upload=function(){ };
状态模式控制电灯案例：
下面已切换电灯状态这个相对简单的例子来进一步说明状态模式：
//状态模式学习 //以控制灯泡开关的状态为例，电灯开关开着的时候，按下开关，电灯会切换到关闭状态，反之，则切换到开启状态
var Light=function(){ this.state='off'; this.button=null; this.stateSpan=document.getElementById('lightState'); }; Light.prototype.init=function(){ var button=document.createElement('button'); button.innerHTML='开关'; this.button=document.body.appendChild(button); this.bindEvent(); }; Light.prototype.bindEvent=function(){ var self=this; this.button.onclick=function(e){ self.buttonWasPressed(); }; }; Light.prototype.buttonWasPressed=function(){ if(this.state==='off'){ console.log('电灯打开了'); this.stateSpan.innerHTML='打开'; this.state='on'; }else if(this.state==='on'){ this.stateSpan.innerHTML='关闭'; console.log('电灯关闭了'); this.state='off'; } }; //测试 var light=new Light(); light.init();
以上代码中的buttonWasPressed方法显然违背了封闭-开放原则，电灯的状态除了开，关之外，还可能有多种，如强光，弱光等，每一次新增或者修改状态都需要修改buttonWasPressed方法，该方法将变得极为庞大和臃肿，以至于极难维护。
//使用状态模式进行代码重构 // function OnState(light){ this.light=light; } OnState.prototype.buttonWasPressed=function(){ this.light.lightSpan.innerHTML='关闭'; this.light.curState=this.light.offState; }; function OffState(light){ this.light=light; } OffState.prototype.buttonWasPressed=function(){ this.light.lightSpan.innerHTML='打开'; this.light.curState=this.light.onState; }; var Light=function(){ this.button=null; this.lightSpan=document.getElementById('lightState'); this.onState=new OnState(this); this.offState=new OffState(this); this.curState=this.offState; }; Light.prototype.init=function(){ var button=document.createElement('button'); button.innerHTML='开关'; this.button=document.body.appendChild(button); var self=this; this.button.onclick=function(){ self.buttonWasPressed(); }; }; Light.prototype.buttonWasPressed=function(){ this.curState.buttonWasPressed(); }; //测试 var light=new Light(); light.init();
由此可见，使用状态模式的好处很明显，可以使得每种状态和它所对应的行为之间的关系局部化，当light需要增添一个新的状态的时候，无需编写过多的if-else语句，只需要新增一个状态类，再稍稍更改现有的代码即可。
同样也可以看出状态模式的缺点，其缺点在于会使得系统中增添很多的状态类。因此系统会增减不少对象，同事由于避开了if-else语句，也造成了逻辑分散的问题，无法再一个地方看出整个状态机的逻辑。
其实，上面的例子里，再javascript这种无类的语言中，没有规定让状态对象一定要从某个类中创建出来，通过Function.prototype.call方法可以直接将请求委托给某个字面量兑现来执行。
var Light=function(){ this.button=null; this.lightSpan=document.getElementById('lightState'); this.curState=FSM.off; }; var FSM={ 'on':{ 'buttonWasPressed':function(){ this.curState=FSM.off; this.lightSpan.innerHTML='关闭'; } }, 'off':{ 'buttonWasPressed':function(){ this.curState=FSM.on; this.lightSpan.innerHTML='打开'; } } }; Light.prototype.init=function(){ var button=document.createElement('button'); button.innerHTML='开关'; var self=this; this.button=document.body.appendChild(button); button.onclick=function(){ self.curState.buttonWasPressed.call(self); }; }; var light=new Light(); light.init();
