html5引擎开发 -- 引擎消息中心和有限状态机 - 初步整理 一

简介: 一 什么是有限状态机        FSM (finite-state machine),又称有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。他对于逻辑以及时序的控制能起到非常重要的作用。

一 什么是有限状态机

       FSM finite-state machine),又称有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。他对于逻辑以及时序的控制能起到非常重要的作用。

代码主要看的是什么?逻辑!所有的设计模式无非是让程序逻辑变得更加利与维护,利于优化,利于升级而已。

那么能不能把业务逻辑整理出来统一操作呢?

你可以理解状态机就是干这个的(当然不仅仅是这样)。这样一来只要将一个业务看成一个状态机,有N中状态,然后统一来控制这些状态时的操作。

大家都用过dom事件绑定,是不是某种状态时候就会触发某种事件?这明显也是状态机的概念能解释的。还有观察者模式或者说是订阅发布模式,抑或是jquery的deffered和pomise,甚至是各种同步编程模块(windjs)等等等等。仔细想想也基本上都是同样的原理:即根据不同的消息,诱发注册的相应回调。区别仅仅是怎么注册或者说生成支持各自机制的对象而已。

将各种业务状态写在一起集中管理的好处是什么?就是你整个流程会变得无比的清晰,一目了然!而不再需要将业务逻辑写的到处都是。方便了整体业务逻辑的管理。(后期会抽象出消息机制概念,彻底解放模块之间的耦合,敬请期待)

二 状态机的一些概念

         1 状态转换

从一个状态切换到另外一个状态被称为状态转换

         2 触发事件

状态改变而引起它的事件称为触发事件.,而触发时间完全可以集中在一起定义,方便管理.业务流程一目了然。

 

三 会用在哪些场景

         状态机可以用在任何能抽象出业务流程的地方,大到页面加载,引擎加载,购物流程,小到tab标签,显示隐藏控件,等等地方。

         会不会经常被一大堆的回调函数,异步函数回调之间的逻辑高的头昏眼花?抽象出一个状态机来,外部的各种操作(异步,同步,回调)只需要改变这个状态机的状态就可以执行相应的操作了。

四 举个例子

         试想一下,比如我们加载引擎的业务流程:

                  --初始化引擎(initcore)

                  --初始化模板(inittpl)

                  --获取数据(initdata)

                  --初始化页面(initpage)

                  --初始化页面成功(pageok)

         我们可以将这个业务流程生成一个状态机,比如叫“app”,那么我们需要做的是什么呢?

我们只需要将这些状态赋予这个叫做“app”的状态机对象,同时生成一个状态改变时的触发事件管理器。就可以方便并集中地来管理整个业务流程了。逻辑代码展现大概如下:

var fsm = FSM.create([’initcore’,’inittpl’,’initdata’,’initpage’,’pageok’],
        function(from,to,data){
          switch(to){
            case ‘initcore‘:
            break;
            case ‘coreok’:
            break;
             ….
            case ‘pageok’:
            break;
        }
      });

 

这样一来整个app加载流程就会一目了然,而不管是在异步中还是页面回调中需要业务变更时,只需要改变对应状态机的状态就会执行相应的逻辑。比如:

         fsm.change(‘pageok’);

我们可以称之为面向业务的状态模型,也可以称之为状态模式。

 

下面,我们再来看看消息中心的想法。

 

关于状态机为核心的消息中心抽离

         5.1让我们看看以前的模块式开发

         以前引擎和模块,模块和模块之间,一般都是互相直接调用接口,也就是api模式。这就是面向对象基本模式了,每一个模块都是一个对象,对外开放了很多接口,其他对象只需要调用目标对象的相应接口就可以执行相应的逻辑。目前来说,基本上都是这样的设计模式,这种方式为我们带来了很大的便利(图)。

 

 

 

5.2提出问题

但是这样没法避免的一个问题就是,在一个模块内部需要直接调用另外一个模块的api,你中有我,我中有你。试想一下,如果另外一个模块不存在,接口不存在呢,或者接口返回错误的情况下该怎么办呢?不至于每个调用其它模块的地方全部都写上容错吧,那么代码基本没法看了。

那么我们就该想想了,是不是应该有这样一套机制呢,暂时叫做调度中心,我们简单设想一下它应该有一下功能:

1 调度中心能统一的管理引擎以及各个模块之间的相互调用,以方便记录当前应用运行的的各种实时操作。

2 所有的模块不会直接调用其他模块的接口,而是告诉调度中心,我要调哪个模块的哪个方法,并提供必要的参数,调度中心会解析消息并调用相应的模块,当然必要的错误处理机制是必须的。

3 每个模块必须有相应的消息处理机制,有调度中心统一方法“吃入”模块,当然必要的配置文件是必须的。

这就是我们说的消息机制。O(∩_∩)O~

 

5.3什么是消息机制

   

    每个引擎都会有很多很多的模块,好的引擎模块间的耦合会比较松,但是大多数引擎模块之间都是结合的很紧密的。

    消息,很多情况下都跟通信相关。那么消息机制应用到引擎中是什么样子呢?(图)

 

 

5.4要注意的问题

   

1    流程上增加了复杂度,开发一个高效的消息中心很重要

2    每个模块需要注册进消息中心

3    消息错误时 要有统一处理机制

 

 

总结:

       想一下,状态机作为消息中心的核心引擎来实现消息中心思想,是不是很给力呢?消息中心可以实现消息队列,也可以切入aop设计模式来实现消息中心的各种功能扩展。

目录
相关文章
|
4月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
90 0
|
2月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
59 0
|
3月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
94 4
|
4月前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
4月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
62 1
基于HTML5开发的Markdown在线编辑器
|
3月前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
40 2
|
3月前
|
机器学习/深度学习 Web App开发 前端开发
【Web开发】深度学习HTML(超详细,一篇就够了)
【Web开发】深度学习HTML(超详细,一篇就够了)
19 0
|
4月前
|
开发工具 CDN 容器
基于Html+腾讯云播SDK开发的m3u8播放器
周末业余时间在家无事,学习了一下腾讯的云播放sdk,并制作了一个小demo(m3u8播放器),该在线工具是基于腾讯的云播sdk开发的,云播sdk非常牛,可以支持多种播放格式。
214 1
|
4月前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
178 7
|
4月前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
64 1