用状态机模式消除复杂的 if else 逻辑

最新推荐文章于 2022-03-28 13:09:07 发布

nchen123

最新推荐文章于 2022-03-28 13:09:07 发布

阅读量2.2k

点赞数

分类专栏：网页技术编程思考文章标签：联想工作 web

本文链接：https://blog.csdn.net/inelm/article/details/4612936

版权

在开发web界面时，原本使用if..else或switch..case处理各种控件状态切换，导致代码复杂难以理解。通过引入状态机模式进行重构，用状态表和状态轮换表简化了400~500行的js代码，使得逻辑清晰，维护性增强。虽然带来少许配置冗余，但明显提高了代码可读性和扩展性。

摘要由CSDN通过智能技术生成

前一阵开发的一个 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