JavaScript之状态模(vue中使用)

2020 年 5 月 28 日 1 条评论 2.07k 次阅读 2 人点赞

今天来聊一聊状态模式在前端项目中的应用,咱们先来看一个例子:有一个开关控制一盏灯,开关切换只有两种状态,开与关,并且触发灯泡的开关。咱们先看一下不用状态模式的例子,一般使用vue开发的代码如下:

JavaScript之状态模式(vue中使用)

ok,现在可以看到,我们已经编写了一个强壮的状态机,这个状态机的逻辑既简单又缜密,没有任何的bug。实际上我们已经编写过无数次这样的代码了。可是这个世界上的灯并非只有两种状态,如果产品把灯改成了 第一次打开弱光,第二次强光,第三次关闭呢?现在改造上报代码:

JavaScript之状态模式(vue中使用)

很明显每次修改状态都需要修改switchclick方法,这使得这个函数不是很稳定。如果在增加一种状态就得增加一个条件判断,这样就堆砌着大量的if else 语句。

JavaScript之状态模式(vue中使用)

这样修改的代码所有的状态都维护在自己的状态对象里边,整个项目的状态通过切换状态对象来控制,不同的状态执行自己的操作。如果在加状态 只需要加一种状态实现一些buttonpress方法即可,同时消除了大量的if else嵌套。

类似的使用场景还有 上传文件的时候的各种状态,暂停,开始、删除等都可以封装成状态对象。

状态模式中的性能优化:

有两种选择来管理state对象的创建销毁。第一种仅当state对象被需要时才创建并随后销毁,另一种是一开始就创建好所有的状态对象,并且始终不销毁。如果state比较庞大,用第一种可以节省内存,这样可以避免创建一些不会用到的对象。如果状态更新比较频繁的话,最好一开始就把这些对象创建出来。

雷雷

这个人太懒什么东西都没留下

文章评论(1)

  • 红红

    写的不错

    2021 年 4 月 15 日
  • (Spamcheck Enabled)