听飞狐聊JavaScript设计模式系列13

  • A+
所属分类:JavaScript

本回内容介绍

上一回聊了聊组合模式(Composite),用组合模式模拟了个图片库,聊了递归。

介一回聊状态模式(State),官方描述允许一个对象在其内部状态改变时改变它的行为。略抽象,不过看了代码会觉得比较简单,直接看代码先。

1. 状态模式

状态模式中引入了抽象状态类和具体状态类,这里会用到之前讲过的接口模式,不清楚的盆友可以看系列05,这个例子是我根据一段PHP的状态模式代码改的JS版本,如下:

之所以把这个例子改成JS版本,是因为这个例子比较简单,直观。在实际使用时,在一个状态类中可能包含多个业务方法,如果在具体状态类中某些业务方法的实现完全相同,可以将这些方法移至抽象状态类,实现代码的复用。

2. 状态模式之工作流

状态模式在工作流或游戏等各种系统中应用比较广泛,下面的例子是一个简单的订单审批流程,根据一段Java的状态模式代码改的JS版本,如下:

这个例子跟上一个例子都是状态模式的一个很好体现,这个例子更贴近实际开发,

申请方提交订单,平台订单审核,审核通过更改状态为审核通过,然后继续商家中心审核,通过与不通过都流程结束,直接调用提示类提示结果。

3. 有限状态机

有限状态机(Finite-state machine)是一个非常有用的模型,可以模拟世界上大部分事物。这个是官方说法,简单说,她有三个特征:

1,状态总数(state)是有限的。

2,任一时刻,只处在一种状态之中。

3,某种条件下,会从一种状态转变(transition)到另一种状态。

直接代码吧,很直观的,根据网上的交通灯例子改的,如下:

这里就是多种状态间的切换,这里只写了两种,开关灯,好玩儿一点可以换canvas的颜色,做变亮变暗的状态。听飞狐聊JavaScript设计模式系列13

装个逼,虽然最近热映的《寻龙诀》好看,还是要推荐一个阿汤哥的老电影《遗忘战境》~~

这一回聊的状态模式,有限状态机,状态模式可以允许客户端改变状态的转换行为,而状态机则是能够自动改变状态~。

下面的内容,聊一个下状态管理,这里拿一个极具审美(因为作者经常提审美^_^)的JS库Vue.js的官方例子来说。

JS状态管理

Vue官方解释是集中管理状态更易于理解状态将怎样变化。组件仍然可以拥有和管理它的私有状态。看过上面的例子,看这个应该很好理解,继续写:

这是vue.js官网上的一个例子,最近很火的框架react,vue.js在说flux单向数据流,其实就是在维护状态。

话外音

这里啰嗦一下,有盆友建议说聊一下AngularJS,在系列04里有聊过一点点ng1.x的源码,也模拟了一下,并且说过可以的话,分享读过的Angularjs源码段子。介于前端框架风起云涌,其实,对Angular有兴趣的盆友,可以直接从Angular2开始,如果是学习源码的话,Vue.js的源码读起来会更有美感(因为作者反复提审美^_^)~~

这一回,主要聊了状态模式,有限状态机,介绍了下Vue.js这个库。

下一回,聊一聊JS的链式调用,没错,肯定会模拟框架,库什么的。

客官看完点个赞,推荐推荐呗,嘿嘿~~

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: