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设计模式来实现消息中心的各种功能扩展。

目录
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
43 0
|
11天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
7天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
22 1
|
13天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
13天前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
|
13天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
13天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
13天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
13天前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
|
13天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】响应式网站开发实战
【4月更文挑战第30天】本文探讨了响应式网站开发,它能根据用户设备自动调整布局,提供最佳浏览体验。通过HTML和CSS,利用媒体查询、Flexbox和百分比宽度等技术实现响应式设计。媒体查询按屏幕尺寸定义CSS规则,Flexbox处理元素排列。文章通过新闻网站首页设计实例,展示了如何应用这些理论,包括使用Flexbox设计导航栏,使用媒体查询调整轮播图和内容区域,以及创建自适应页脚。遵循移动优先原则,关注性能优化和用户体验,响应式设计是前端开发的关键,为多设备用户提供优质浏览体验。