状态模式

一个对象有状态变化

每次状态变化都会触发一个逻辑

不能总是用 if...else 来控制

示例：交通信号灯的不同颜色变化

传统的 UML 类图

javascript 中的 UML 类图

class State {

  constructor(color) {

    this.color = color;

  }

  handle(context) {

    console.log(`turn to ${this.color} light`);

    context.setState(this);

  }

}

class Context {

  constructor() {

    this.state = null;

  }

  setState(state) {

    this.state = state;

  }

  getState() {

    return this.state;

  }

}

// 测试代码

let context = new Context();

let greed = new State("greed");

let yellow = new State("yellow");

let red = new State("red");

// 绿灯亮了

greed.handle(context);

console.log(context.getState());

// 黄灯亮了

yellow.handle(context);

console.log(context.getState());

// 红灯亮了

red.handle(context);

console.log(context.getState());

应用场景

有限状态机

  • 有限个状态，以及在这些状态之间的变化
  • 交通信号灯
  • 利用开源的 lib：JavaScript-state-machine
  • javascript-state-machine
  • 运行 npm install javascript-state-machine --save

有限状态机的收藏与取消

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Document</title>

  </head>

  <body>

    <p>有限状态机</p>

    <button id="btn"></button>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script src="./03-javascript-state-machine.js"></script>

    <script>

      // 状态机模型

      var fsm = new StateMachine({

        init: "收藏", // 初始状态，待收藏

        transitions: [

          {

            name: "doStore",

            from: "收藏",

            to: "取消收藏"

          },

          {

            name: "deleteStore",

            from: "取消收藏",

            to: "收藏"

          }

        ],

        methods: {

          // 执行收藏

          onDoStore: function() {

            alert("收藏成功");

            updateText();

          },

          // 取消收藏

          onDeleteStore: function() {

            alert("已取消收藏");

            updateText();

          }

        }

      });

      var $btn = $("#btn");

      // 点击事件

      $btn.click(function() {

        if (fsm.is("收藏")) {

          fsm.doStore(1);

        } else {

          fsm.deleteStore();

        }

      });

      // 更新文案

      function updateText() {

        $btn.text(fsm.state);

      }

      // 初始化文案

      updateText();

    </script>

  </body>

</html>

写一个简单的 promise

  • promise 就是一个有限自动机
  • promise 三种状态：pending fullfilled rejected
  • pending -> fullfilled 或者 pending -> rejected
  • 不能逆向变化
<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Document</title>

  </head>

  <body>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script src="./03-javascript-state-machine.js"></script>

    <script>

      // 模型

      var fsm = new StateMachine({

        init: "pending",

        transitions: [

          {

            name: "resolve",

            from: "pending",

            to: "fullfilled"

          },

          {

            name: "reject",

            from: "pending",

            to: "rejected"

          }

        ],

        methods: {

          // 成功

          onResolve: function(state, data) {

            // 参数：state - 当前状态示例; data - fsm.resolve(xxx) 执行时传递过来的参数

            data.successList.forEach(fn => fn());

          },

          // 失败

          onReject: function(state, data) {

            // 参数：state - 当前状态示例; data - fsm.reject(xxx) 执行时传递过来的参数

            data.failList.forEach(fn => fn());

          }

        }

      });

      // 定义 Promise

      class MyPromise {

        constructor(fn) {

          this.successList = [];

          this.failList = [];

          fn(

            () => {

              // resolve 函数

              fsm.resolve(this);

            },

            () => {

              // reject 函数

              fsm.reject(this);

            }

          );

        }

        then(successFn, failFn) {

          this.successList.push(successFn);

          this.failList.push(failFn);

        }

      }

      // 测试代码

      function loadImg(src) {

        const promise = new MyPromise(function(resolve, reject) {

          var img = document.createElement("img");

          img.onload = function() {

            resolve(img);

          };

          img.onerror = function() {

            reject();

          };

          img.src = src;

        });

        return promise;

      }

      var src = "https://blog-static.cnblogs.com/files/ygjzs/images.gif";

      var result = loadImg(src);

      console.log(result);

      result.then(

        function(img) {

          console.log("success 1");

        },

        function() {

          console.log("failed 1");

        }

      );

      result.then(

        function(img) {

          console.log("success 2");

        },

        function() {

          console.log("failed 2");

        }

      );

    </script>

  </body>

</html>

设计原则验证

  • 将状态对象和主题对象分离，状态的变化逻辑单独处理
  • 符合开放封闭原则

JavaScript-状态模式的更多相关文章

  1. 轻松掌握：JavaScript状态模式

    状态模式 状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类. 状态模式的使用场景也特别明确,有如下两点: 一个对象的行为取决于它的状态,并且它必须在运行 ...

  2. JavaScript状态模式及状态机模型

    这是一篇,我自己都看不完的文章... 文章大体就两部分: 状态模式的介绍 状态机模型的函数库javascript-state-machine的用法和源码解析 场景及问题背景: 我们平时开发时本质上就是 ...

  3. javascript - 状态模式 - 简化分支判断流程

    状态模式笔记   当一个对象的内部状态发生改变时,会导致行为的改变,这像是改变了对象   状态模式既是解决程序中臃肿的分支判断语句问题,将每个分支转化为一种状态独立出来,方便每种状态的管理又不至于每次 ...

  4. Javascript设计模式之我见：状态模式

    大家好!本文介绍状态模式及其在Javascript中的应用. 模式介绍 定义 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式主要解决的是控制一个对象状态的条件表达式 ...

  5. javascript设计模式学习之十六——状态模式

    一.状态模式的定义 状态模式的关键是区分事务内部和外部的状态,事务内部状态改变往往会带来事务的行为改变. 状态模式中有意思的一点是,一般我们谈到封装,都是优先封装对象的行为,而非对象的状态.但在状态模 ...

  6. 再起航，我的学习笔记之JavaScript设计模式19(状态模式)

    状态模式 概念介绍 状态模式(State):当一个对象的内部状态发生改变时,会导致其行为的改变,这看起来像是改变了对象 示例演示 在我们写项目的过程中或多或少会遇到如下的多分支判断 function ...

  7. JavaScript设计模式 - 状态模式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 深入理解JavaScript系列（43）：设计模式之状态模式

    介绍 状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类. 正文 举个例子,就比如我们平时在下载东西,通常就会有好几个状态,比如准备状态(ReadySta ...

  9. JavaScript设计模式——状态模式

    状态和行为: 所谓对象的状态,通常指的就是对象实例的属性的值:而行为指的就是对象的功能,再具体点说,行为大多可以对应到方法上. 状态模式的功能就是分离状态的行为,通过维护状态的变化,来调用不同状态对应 ...

  10. javascript设计模式--状态模式（State）

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. elasticsearch（lucene）索引数据过程

    倒排索引存储-分段存储(lucene的功能)在lucene中:lucene index包含了若干个segment在elasticsearch中:index包含了若干主从shard,shard包干了若干 ...

  2. PSP第一次总结

    项目计划总结 周活动总结表 姓名:王金萱                                                                                 ...

  3. 「 Android开发 」开启第一个App应用

    每天进步一丢丢,连接梦与想 无论什么时候,永远不要以为自己知道一切   -巴普洛夫 最近玩了下Android,但遇到了一些坑,浪费了很多的时间,在此记录一下,你若是遇到了就知道怎么解决了 PS:建议使 ...

  4. 用postman导出excel文件

    原文地址:https://jingyan.baidu.com/article/915fc414559b4351394b2084.html 现在的web和移动开发,常常会调用服务器提供restful接口 ...

  5. nodejs　执行　最近　发现　ｎｏｄｅｊｓ　执行的 是非等待的。

    上一步结果 没有完成 下一步就执行了 结果就 不行

  6. atx测试框架实现手机应用UI自动化测试

    最近工作中遇到游戏APP需要实现UI自动化测试,这个app中真的是典型的混合App,有Android原生控件,有webview控件,以及游戏操作页面.研究了Appium,发现appium实现跨应用操作 ...

  7. 内网IP的解释

    https://baike.baidu.com/item/%E5%86%85%E7%BD%91ip/8881186?fr=aladdin

  8. swift开发度假计划app

    用swift开发一个完整的度假地app,设计到布局.数据绑定.数据编辑.页面导航等:适合初学者: github:(git@github.com:Frankltf/ios-swift-app.git)

  9. HDU 3839 Ancient Messages（DFS）

    In order to understand early civilizations, archaeologists often study texts written in ancient lang ...

  10. SQLException:The server time zone

    报错信息如下: java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represen ...