最近因为太忙（其实是技术功底不够，任务不能按时完成），所以很少写文章了，前两天想写文章时，才发现我居然连自己的后台管理密码都给忘了，想找回密码吧，结果又遇到了各种问题，博客不能发送邮件，最后在万不得已的情况下，只好选择登录服务器数据库，直接更改管理员用户密码了，想想也是悲哀啊。
现在已经是晚上的12点过了，明天还要上班，不能睡太晚，正好看了一下js的设计模式，有感而发，想写点东西，就随便写点吧。今天就简单的说一下状态模式吧。也许不明白的朋友你会问，何为状态模式，我们举一个例子，就像我们小时候玩的超级玛丽那个游戏一样：玛丽如果要吃蘑菇，她就要跳起来，她如果遇到炮弹，就要蹲下躲避，如果遇到乌鸦，就要将其打掉…。那么，按照我们平时一般的写法，也许你会这样写：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//执行动作 function doAction(statue){ //吃蘑菇 if(state =='cmg'){ console.log('跳起来'); } //躲炮弹 if(state =='dpd'){ console.log('蹲下去'); } //打乌鸦 if(state =='dwy'){ console.log('开枪射击'); } } |
但如果到了后面我们想升级超级玛丽这个游戏，要设置更多的障碍的和执行更多的动作，那if判断的分支就会越来越多，我们岂不是处理起来很悲剧，尤其是当出现了组合动作的时候，比如，在后面我们遇到个需要跳起来开枪才能打死的怪物，我们还得重新组合对应的方法：
|
1 2 3 4 |
if(state == 'tqlandkq'){ console.log('跳起来'); console.log('开枪射击'); } |
这样是不是太麻烦了？
所以，为了减少我们在方法中的条件判断，使每种情况独立存在，方便管理，便有了我们的状态模式。所谓状态模式，就是将每一种条件作为对象内部的一种状态，面对不同的判断结果，我们只需选择不同的状态便可。比如，我们可以像下面这样：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var ResultState = function(){ //各种情况的业务逻辑保存在内部状态中 var states = { state1:function(){ console.log('情况一的业务逻辑'); }, state2:function(){ console.log('情况二的业务逻辑'); }, state3:function(){ console.log('情况三的业务逻辑'); }, state4:function(){ console.log('情况四的业务逻辑'); } } //获取某一状态的对应逻辑并执行 function show(state){ states[state] && states[state](); } return { doActionByState: show } }(); ResultState.doActionByState('state1');//情况一的业务逻辑 |
上面的原理很简单，就是我们先把所有可能的情况放在一个状态对象里，然后我们再定义一个根据状态执行对应逻辑的方法，最后，将这个方法赋值给一个对象的某个属性，然后将对象return出来，通过对象点方法的方式我们就可以调用了。在调用的时候，我们只需传入相应的状态，便自会执行对应的业务逻辑，而不需要我们一个个的用if来判断到底该执行哪一个操作。
最后，我们来看一段关于超级玛丽的js，让我们更进一步的提升对状态模式的应用技巧。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
var MarryState = function(){ var _currentState = {}, states = { jump: function(){ console.log('jump'); }, move: function(){ console.log('move'); }, shoot: function(){ console.log('shoot'); }, squat: function(){ console.log('squat'); } }; var Action = { //改变状态方法 changeState: function(){ var arg = arguments; //改变状态的时候要清空历史状态 _currentState = {}; if(arg.length){ for(var i = 0,len = arg.length; i<len; i++){ _currentState[arg[i]] = true; } } //返回动作控制类，方便链式调用 return this; }, //执行动作方法 goes: function(){ console.log('触发一次动作'); for(var i in _currentState){ states[i] && states[i](); } //返回动作控制类，方便链式调用 return this; } } //返回接口方法 return { change: Action.changeState, goes：Action.goes } } var marry = new MarryState(); marry.change('jump','shoot')//添加动作 .goes()//执行动作 .goes()//执行动作 .change('shoot')//添加动作 .goes()//执行动作 |
好了，今天的内容就讲这么多，比较粗糙，还望阅读的朋友不要见笑和吐槽才是。js永远是我最爱的语言，没有之一，不管你是不是从事web这一行业，你能在此停留，说明我们还是有共同的话题和爱好，后面的路还很长，愿你我能坚持到最后。
我看完了、