用状态机模式消除复杂的 if else 逻辑
来源:互联网 发布:淘宝企业店铺 个体 编辑:程序博客网 时间:2024/06/05 08:07
前一阵开发的一个 web 界面上有很多诸如“按钮隐藏显示”,“边框隐藏显示”,“伸缩” 等效果的切换,在展示不同内容的时候,这些配套的显示控件需要跟着切换不同的状态。迫于进度,使用的是 if..else, 或者 switch..case 的繁杂的 js 代码来实现这些状态的判断和转换。js 代码很快到了 400~500行,变得很难理解。并且我要加入新的状态切换的时候感觉比较困难。今天决心重构,于是忽然联想起状态机 (State Machine) 模式,不正好在这里能用上吗?而 js 中的对象表示语法正好非常方便构造“状态表”和“状态轮换表”,花了1个多小时,完成了这个工作。重构后代码的逻辑可谓豁然开朗,带来的仅仅是配置上的稍许冗余,但是这个完全可以接受的。
大致的伪代码:
大致的伪代码:
// 状态表定义
var statusTable = {
'状态1': {
sizeCode: 1,
headerUrl: '/test1/test2',
bodyUrl: 'about:blank',
showTitle: true,
showBorder: true,
showMin: true,
showMax: false,
showClose: true
},
'状态3': {
sizeCode: 2,
headerUrl: '/test1/test2',
bodyUrl: '/test1/test2',
showTitle: true,
showBorder: true,
showMin: true,
showMax: true,
showClose: true
},
'状态4': {
sizeCode: 3,
headerUrl: '/test1/test2',
bodyUrl: '/test1/test2',
showTitle: true,
showBorder: true,
showMin: true,
showMax: false,
showClose: true
},
'状态2': {
sizeCode: 2,
headerUrl: '/test1/test2',
bodyUrl: '/test1/test2',
showTitle: true,
showBorder: true,
showMin: true,
showMax: false,
showClose: true
}
};
// 当前状态码
var currentStatusCode = '';
// 切换到状态机某个状态
function loadStatus(code){
var status = statusTable[code] || null;
if(!status) return;
// update other status
// 利用 status 做一系列设置。。如显示隐藏按钮等
//
currentStatusCode = code;
}
// 示例函数 foo 和 bar.
// 一个函数是一套自定义的逻辑,定义一个状态轮换表即可实现。
function foo(){
var jumpTable = {
'状态1': '',
'状态2': '状态1',
'状态3': '状态4',
'状态4': ''
};
loadStatus(jumpTable[currentStatusCode] || '');
}
function bar(){
var jumpTable = {
'状态1': '状态2',
'状态2': '',
'状态3': '状态1',
'状态4': '状态3'
};
loadStatus(jumpTable[currentStatusCode] || '');
}
var statusTable = {
'状态1': {
sizeCode: 1,
headerUrl: '/test1/test2',
bodyUrl: 'about:blank',
showTitle: true,
showBorder: true,
showMin: true,
showMax: false,
showClose: true
},
'状态3': {
sizeCode: 2,
headerUrl: '/test1/test2',
bodyUrl: '/test1/test2',
showTitle: true,
showBorder: true,
showMin: true,
showMax: true,
showClose: true
},
'状态4': {
sizeCode: 3,
headerUrl: '/test1/test2',
bodyUrl: '/test1/test2',
showTitle: true,
showBorder: true,
showMin: true,
showMax: false,
showClose: true
},
'状态2': {
sizeCode: 2,
headerUrl: '/test1/test2',
bodyUrl: '/test1/test2',
showTitle: true,
showBorder: true,
showMin: true,
showMax: false,
showClose: true
}
};
// 当前状态码
var currentStatusCode = '';
// 切换到状态机某个状态
function loadStatus(code){
var status = statusTable[code] || null;
if(!status) return;
// update other status
// 利用 status 做一系列设置。。如显示隐藏按钮等
//
currentStatusCode = code;
}
// 示例函数 foo 和 bar.
// 一个函数是一套自定义的逻辑,定义一个状态轮换表即可实现。
function foo(){
var jumpTable = {
'状态1': '',
'状态2': '状态1',
'状态3': '状态4',
'状态4': ''
};
loadStatus(jumpTable[currentStatusCode] || '');
}
function bar(){
var jumpTable = {
'状态1': '状态2',
'状态2': '',
'状态3': '状态1',
'状态4': '状态3'
};
loadStatus(jumpTable[currentStatusCode] || '');
}
- 用状态机模式消除复杂的 if else 逻辑
- State模式(状态模式)消除烦琐的if..else语句
- State模式(状态模式)消除烦琐的if..else语句
- Java中利用设计模式来代替复杂的if...else...语句(三层以上的嵌套循环)
- shell的if else 以及大于,小于等逻辑表达式
- shell的if else 以及大于,小于等逻辑表达式
- shell的if else 以及大于,小于等逻辑表达式
- shell的if else 以及大于,小于等逻辑表达式
- JSTL中if...else...逻辑判断的简单用法
- 容易令人忽视的if、else语句逻辑错误
- iBatis中的sqlmap里if else逻辑判断的写法
- Conditionals - if else 模式
- C#消除多层if-else嵌套
- 使用Command与Factory模式消除业务代码中的if,else语句
- if......if和if......else if......else if的区别
- if , if else , if else if , if的嵌套
- 化简复杂逻辑,编写紧凑的if条件语句
- if,else if,else的执行
- 删除 python 项目中 .pyc 文件的脚本
- 用 HTML 格式导出 Excel 时,如何保留显示网格线
- [Django学习] 用户身份验证模块
- 实践 Django 的 i18n(国际化)
- 修改 Django 的邮件发送模块
- 用状态机模式消除复杂的 if else 逻辑
- FrameSet 不能支持透明
- 我的 SciTEGlobal.properties 配置文件
- [转载] 让SciTE能够和IDE一样进行成员提示
- RedHat 上安装 lighttpd 并配置 fastcgi + django 的记录
- RedHat 上安装多个 mysql 实例并配置 django 连接的操作记录
- 在 Django 的 View 中利用 function decorator 可实现一定程度的代码重用
- Django 代码片断收集(持续更新)
- 今天思路有点乱,随便记一点关于 xml-rpc 的