CN107291523B - 一种Web前端消息总线系统 - Google Patents

Abstract

一种Web前端消息总线系统涉及信息技术领域，尤其Web前端管控的技术领域。本发明由Message模块、Event模块和插件模块组成，Message模块由Store组件、Getter组件、Setter组件和Action组件组成；Event模块由数据注册组件、数据通知组件和数据分发组件组成；本发明的核心是解决Web前端组件之间的通讯问题，本发明为Web前端组件之间通讯定义了一套统一的规范，各个组件使用统一的通讯模式进行通信。本发明的目的是让Web前端架构围绕Web前端消息总线系统进行组件开发，形成企业内部的Web前端技术生态环境和技术栈，提高web前端组件的复用率，提供项目开发的生产效率同时降低项目的运维成本。

Description

一种Web前端消息总线系统

技术领域

本发明涉及信息技术领域，尤其Web前端技术领域。

背景技术

从浏览器在20世纪90年代诞生至今，浏览器的相关技术已经成为IT界最为活跃的技术栈之一。在Ajax技术出现前，前端页面的代码开发都是和服务端语言混杂在一起，这里以java的Web开发为例：java的Web开发里页面大多是在jsp文件里进行，除了jsp还有velocity、freemarker这样替换jsp的模板引擎，不管是jsp还是其他类型的模板引擎，它们的本质其实都不是浏览器能解析的实际页面，而是一个被java能解析的特定文件格式。在这样的开发模式下，浏览器需要完成的工作不会太多，核心的工作基本都是由服务端完成；除此之外，在一个Web应用里多页面都是使用iframe这样的结构集成在一起，只要是有和服务端支持的场景都是以同步提交的方式和服务端进行交互。由于技术的局限性，浏览器端的技术很难发展，当时的网站用户体验也比较差，也不存在状态管理的问题。

Ajax技术出现后，在同步页面开发的时代，任何优秀的页面设计都会被效率最差的网络通讯所束缚，这就导致Ajax技术的出现，Ajax技术最直观的感受就是用户在不刷新页面不影响页面操作的情况下异步的从服务端获取数据，随着Ajax技术的流行，Ajax技术逐渐更深层次的改变着Web应用的开发，这些改变如下：

改变一：浏览器的界面开发达到传统桌面软件的交互效果，这就导致Web应用慢慢软件化；

改变二：单页面开发模式的出现，Ajax技术将以前复杂的多页面网站统一在一个页面上完成，在一个页面上开发一个网站会让网站设计上提升一个很高的档次，这是在传统iframe的架构里很难做到的；

改变三：浏览器开发变得越来越难，重要性越来越高，工作量越来越大，因此Web前端和Web服务端分离开发的模式逐渐流行起来；

改变四：独立的Web前端系统对于架构设计，项目工程化，特别是不同团队人员的项目管理方面提出了更高要求，Web前端项目慢慢赶上服务端项目的体量和难度，原有的服务端的架构思想也开始在Web前端项目里大规模使用。

这些改变最终落地到Web前端MVC框架的出现，根据Web前端框架的特点Web前端领域又出现了前端MVC框架的变种例如MVP、MVVM框架，但不是不管什么新型术语，这些框架底层思想都是基于服务端的MVC思想。

前端MVC框架在前端领域的应用中出现了一个新的问题那就是页面路由问题，路由在Ajax技术出现前往往不是什么问题，因为在同步页面时代，一个URL指向一个独立页面，或者说一个URL指向服务端一个独立的资源。但是到了基于Ajax技术开发的单页面里，因为页面的切换都是异步的请求服务端数据，页面内容的变更没法体现到URL上，因此前端出现了路由技术，这种技术就是使用浏览器的Hash技术改变URL的形态，从而标记资源，当然时下的HTML5技术专门为此场景定义了新的API，但是路由只能解决粗放型的资源定位。

路由只能解决粗放的资源定位和切换，对于单个页面里组件之间的状态互动和变更是无法完成的。当nodejs技术出现后，Web前端彻底摆脱了对于服务端的依赖，这时候Web系统向组件化发展，组件是将前端页面各个统一业务单元封装成独立的模块，组件技术让Web前端的开发从原有的宽放的路由细化到了页面中一个个元素，各个不同组件组成一个绚丽的页面，单个的组件又是自成一体。组件化使得Web前端开发复用度提升，解决Web前端开发中重复造轮子的问题，同时组件化的发展也产生一种更加先进的Web前端开发模式，这种模式以一种拖拽的方式快速构建Web前端应用。

以上问题在Web前端里有一个专门的名词描述，那就是状态管理问题，时下Web前端里的状态管理主要是针对组件之间的状态管理，但是状态管理问题的出现其实还是随着Web前端技术的发展，Web前端的新技术问题变得越来越具体，是原有路由问题更深层次的解决。组件的状态管理主要是指：在多个组件配合使用时候，其中组件发生变化，这种变化往往该组件所附带的数据发生变化或者该组件触发某个事件，其他相关组件也要相应发生变化，换句话说就是组件与组件直接的信息交互方式。

在现有技术中有CN201611252746.7，一种web前端框架系统及架构方法，该发明专利涉及一种web前端框架系统，包括项目层、消息处理中心层、中间件处理器层、桥连接层、应用层、工具类层和打包构建工具层；所述项目层包括项目配置和项目页面模块；所述消息处理中心层包括自定义组件模块、组件模块和元件模块，所述组件用于项目中的独立组件封装，并快速进行拼接页面，所述消息处理中心层用于处理每个组件之间的消息；所述中间件控制器层用于处理第三方中间件数据；所述桥连接层用于调用不同平台的API；所述打包构建工具层用于对代码的打包、压缩、加密，并针对不同的平台，打包成不同的上线包。该发明中所述的消息处理中心层用于处理每个组件之间的消息，但是组件之间不仅存在消息的传递，同时也存在组件所附带的数据发生变化或者该组件触发某个事件导致其他相关组件也要相应发生变化的现象，该专利没有对组件间消息传递触发事件变化给出解决方法，该专利总体上是一种特定的Web前端框架系统没有涉及到Web前端消息总线的具体细节。

随着ajax技术、HTML5、CSS3以及nodejs这些新型技术的出现，浏览器端的技术已经自成体系形成独立的Web前端技术，Web前端的技术栈已经发展到从浏览器端到服务端的完整体系，Web前端的系统也越来越复杂，Web前端系统也拥有的复杂的系统架构，而时下新型的Web系统架构向组件化模式发展，Web前端的组件的特点是单个组件自成体系，复用在各个界面开发中，多个组件组合便构建一个Web的界面，因此Web前端的组件的逻辑作用已经类似于分布式系统里各个独立子系统，那么Web前端领域也需要分布式系统里消息总线这样的机制统一解决各个组件之间信息通讯的问题，本发明就是针对Web前端领域需要消息总线问题所提出一种解决方案。

Web前端的组件是页面里一个个独立的逻辑单元，具体描述Web前端组件就是模板、样式、代码逻辑相结合的且独立的可复用的业务逻辑单元，其中模板由html承担、样式由css负责、代码逻辑由JavaScript编写。说明书附图的图2是Web前端组件的定义以及组件和页面之间的关系图。

一个大型的Web应用需要多个Web前端组件配合才能完成，存在组件之间通讯的问题，当根据业务需求来完成组件之间的通讯，会导致各个组件跟业务紧耦合，最终会打破组件自身的独立性，有悖于组件的设计思想，因此大型Web应用需要一个独立的系统统一完成组件之间的信息通讯，这就是本发明解决的主要问题。

与本发明的一种Web前端消息总线系统的设计相类似的技术例如分布式系统的通讯机制：SOA架构里的ESB企业服务总线技术以及远程调用框架技术。下面阐述一下这两种通讯机制。

SOA架构里的ESB企业服务总线技术主要是解决异构系统的通讯问题，它的通讯模式和传统的消息中间件类似，是一种典型的生产者和消费者模型，其架构图见说明书附图的图3， ESB总线架构示意图。

ESB总线模型将相互通讯的两端角色根据消息的产生方和消息的接收方分成生产者和消费者两个角色，它们之间并不会直接通讯，而是通过第三方的ESB总线进行通讯，这种模式的好处是不管生产者还是消费者是使用什么技术开发，它们只要实现ESB总线对外的接口就直接通讯，换个角度理解这种通讯模式，整个系统的通讯方式都是采用ESB总线的接口，那么生产者和消费者之间的通讯的方式得到了统一，这就解耦生产者和消费者之间的依赖关系，这给系统的扩展带来了方便。但是ESB总线架构不能直接胜任Web前端消息总线的工作，ESB总线虽然关注消息在服务中的传递，但是不关注消息传递带来的事件变化，具体事件变化由服务模块各自负责，而在同一个Web页面下的Web前端消息总线，必须快速准确的保证对消息的传递产生的事件的连锁变化进行传导和跟踪。

远程调用框架技术是一种高效的通讯机制，它广泛应用于对于性能要求很高的分布式系统之间的通讯。在中国典型的代表有阿里巴巴开源的dubbo系统以及非开源的淘宝开发的HSF系统，以dubbo为例架说明其架构模式，参看说明书附图的图4，dubbo远程调用框架技术模型示意图。

远程调用框架技术的通讯特点是生产者和消费者的消息通讯是直接进行，这点和SOA架构里的ESB有着明显的区别，远程调用框架的Register和Monitor只是用来管理配置信息例如生产者和消费者的IP列表以及监控通讯的过程。远程调用框架技术也不适用作为Web前端消息总线，只具备组件和组件之间直接沟通的机制，无法实现组件间连锁事件的状态管控。

远程调用框架技术的通讯模式在本发明里的体现就是组件与组件直接沟通的机制，或者是组件与组件之间的私有通讯机制。

本发明解决的现有技术问题如下：

解决的问题一：解决Web前端开发中重复造轮子的问题。组件技术的核心思想就是复用组件，要让组件能够复用就得让不同组件之间的调用关系进行解耦，那么就得有一种统一的通讯机制和通讯规范，这样组件才能达到复用的目的。有了Web前端的消息总线系统，企业内部围绕该消息总线系统构建各种各样不计其数的各类组件，页面开发就是各个组件之间的排列组合，项目每新建一个组件，其他项目就立即复用，这就避免了原来Web前端开发中重复造轮子的问题。

解决的问题二：解决Web前端开发中的状态管理问题。Web前端开发中的状态管理问题是Web前端开发向富客户端开发和单页面开发模式中所产生的新问题，Web前端的状态问题是Web前端路由问题的衍生，Web前端的路由在浏览器同步开发时代就是指一个URL对应一个页面，到了单页面开发中我们通过URL加上锚点技术标记一个功能页面，但是路由技术没法标记在一个功能业务页面里一个点击这样的操作所带来的资源变化，这就是Web前端的状态管理问题。本系统通过定义一直顺序式的消息传递机制解决了Web前端里状态管理的问题。

解决的问题三：当Web前端向组件化发展后，一直新型的快速构建Web前端应用的模式出现了，这就是以一种拖拽的方式构建Web前端应用，该开发模式让企业使用少量但是技术能力强的开发人员做底层架构开发，而业务开发人员使用拖拽这种简单的方式开发web应用。这种开发模式下拖拽的元素就是已经开发完成的组件，一个页面由多个组件协同完成，这种系统最大的难点就是组件与组件之间的协同交互很难定制化，该问题归根结底就是需要一种组件与组件之间统一的通讯机制。而本系统为组件与组件的通讯定义一种统一的信息交互模式解决此问题。

解决的问题四：解决组件通讯的生命周期管理问题，组件的生命周期管理具体就是通讯信息的作用域范围以及组件与组件之间私有信息通道的管理。统一的方式管理生命周期提升代码的健壮性，提高开发的效率。

发明内容

基于现有技术的不足，本发明给出一种Web前端消息总线系统，其特征在于由Message模块、Event模块和插件模块组成，Message模块由Store组件、Getter组件、Setter组件和Action组件组成；Event模块由数据注册组件、数据通知组件和数据分发组件组成；

Message模块作用是预先定义好一系列具有生命周期的变量，所有的组件在指定的生命周期范围内都读取Web前端消息总线系统里的变量，如果组件要修改Web前端消息总线系统下的变量则要通过Event模块进行；

Event模块包含Web前端消息总线系统自定义事件的驱动机制，该事件驱动机制主要使用的是观察者模式Observer模式和发布/订阅模式Publish/Subscribe模式；发布/订阅模式即Publish/Subscribe模式在Web前端消息总线系统内部使用，当修改Web前端消息总线系统内变量时候，将变量的变化情况发布到使用该变量的各个组件里；观察者模式即Observer模拟远程调用的模式，用于组件与组件之间私有信息的传递，当被观察的组件数据发生变化时，作为观察者的组件根据观察者模式预设进行私有信息的传递；

插件模块是在核心模块上扩展Web前端消息总线系统功能的模块，核心模块指Message模块和Event模块；一种Web前端消息总线系统的插件模块实现了两个插件，包括模块化插件和连续数据传递插件；模块化插件主要作用是将Message模块加入命名空间的功能，也就是让Store组件的数据根据业务需求分组，分组的标识就是命名空间，同一个命名空间下的数据包含在同一个生命周期内，模块化插件的目的是让Store组件里的数据更加合理的被管理，同时也能方便开发人员分模块开发；连续数据传递插件是让Store组件里的数据有父子关系；

一种Web前端消息总线系统，其具体实现包括以下步骤：

1）.定义生命周期：

Web前端消息总线系统传输的数据分为window生命周期，session生命周期以及持久生命周期；

window生命周期：使用window对象，该生命周期在单个页面里有效；

session生命周期：使用html5的sessionstorage对象，该生命周期在一个会话中有效；

持久生命周期：开发人员指定生命周期，指定生命周期的工具包括：html5的localstorage对象和浏览器本地数据库indexDB，设置默认生命周期为在用户清理浏览器缓存前，该生命周期的数据长期有效；

2）.Web前端消息总线系统在JavaScript里实现一个属于浏览器window级别的全局类Bus：

（1）全局类Bus定义的模式和代码框架如下：

(function(win){

var Bus = function(){

// 内容逻辑省略...

}

// 逻辑实现省略

win.bus = new Bus();

})(window)

Nodejs定义方式：

let Bus = function(){

// 逻辑实现省略...

}

let bus = new Bus()

module.exports = bus

（2）Nodejs模块通过Bus编译组件动态生成浏览器端的代码；

Bus系统即Web前端消息总线系统最终是应用到浏览器端组件之间的通讯，之所以提供服务端的Nodejs实现，主要是为了适用于时下前端流行的前后端分离模式；Bus系统即Web前端消息总线系统在浏览器端是以全局的单列的JavaScript对象形式出现，之所以使用单列模式目的是保证Bus的全局唯一性，防止代码的冲突；

Bus系统即Web前端消息总线系统包含两个模块：Message模块即Message Module和Event模块即Event Module；

（3）Message模块相当于一个作用于全局的数据缓存系统，它包含Store组件、Getter组件、Setter组件以及Action组件，这些组件的具体实现如下：

Store组件：它的作用是在全局作用域下定义变量，全局作用域包含三个作用域范围，它们分别是：

Window作用域范围：也就是浏览器页面的window对象，它的范围是一个页面，如果是单页面应用，就是整个单页面的生命周期内；

Session作用域范围：Session级别的数据会使用HTML5的SessionStorage机制，该数据的作用域范围是session级别的，该级别的数据作用于跨页面的数据通信；

持久化作用域范围：该作用域会使用HTML5里的LocalStorage机制和indexDB机制，只要用户不主动清理浏览器的存储，该范畴的数据将持续有效；

Store组件的变量要在网站初始化时候就要定义好，而Getter组件、Setter组件以及Action组件都是操作Store组件里的变量来实现不同组件之间的数据通信功能；

Getter组件：主要作用是获取Store组件里的数据，在Getter组件对外接口里开发人员定义多个属于Getter组件的方法，如下所示：

{

// 省略.....

getter：{

ftn1:function () {

// 省略.....

},

ftn2:function(){

// 省略.....

}

}

// 省略.....

}

开发人员根据自己需求编写Getter组件里的函数，这些函数里开发人员根据自己的实际需要加工或者过滤数据，但是Getter组件里的方法不会更改Store组件里的原始数据；

Setter组件：作用是修改Store组件里面存储的数据，它的代码结构如下所示：

{

// 省略.....

setter：{

ftn1:function () {

// 省略.....

Store.save(data)// 默认是window级别

},

ftn2:function(){

// 省略.....

Store.save(data,"session")// 指定session级别

}

}

// 省略.....

Store.save(data,"window")// 指定window级别

Store.save(data,"local")// 指定持久化级别，默认是LocalStorage

Store.save(data,"local","storge") // 指定使用LocalStorage

Store.save(data,"local","db") // 指定使用indexDB

}

以上代码是使用Setter组件向Store组件存储数据，这里要注意Setter组件只能操作在Store组件定义好的变量，它不能为Store组件添加或者删除变量，如果开发人员想给Store组件里新增变量或者删除变量，要在Store组件定义里直接操作；

Action组件：Action组件作用是当Store组件里数据发生变化时候调用相应的回调函数，开发人员使用时候要指定Store组件中需要检测变化的变量；Action组件运用JavaScript事件机制将变化的数据主动推送到各个相应的组件从而达到动态更新组件状态的目的；

（4）Message模块里数据全局有效，组件在作用域范围内都能获取相关的数据；Event模块是组件与组件的单向通讯机制，具体就是组件AA通过Event模块向组件BB发送信息，组件BB接受信息后信息就被销毁；

（5）Event模块包含3个组件数据注册组件、数据通知组件和数据分发组件；

数据注册组件是Bus系统即Web前端消息总线系统里对外提供的定义事件的组件，其操作代码形式是：

on:function(component, eventName, handler)

它的作用是为组件定义相关的事件，并在事件中传递数据；

数据通知组件作用是让开发人员定义事件，并在事件里传输数据，其操作代码形式是：

emit:function(eventName, event)

数据注册组件和数据通知组件都是观察者模式实现的，主要是用于组件与组件之间的私有数据传输；

数据分发组件用于监听Message模块中Store组件中的数据的变化，并将变化通知给使用Store组件中的变量的组件；

3）.拓展插件模块：

Web前端消息总线系统除核心模块Message模块和Event模块外具有插件模块，插件模块是在核心模块上扩展Web前端消息总线系统功能的模块，核心模块指Message模块和Event模块；在实际应用中，Web前端消息总线系统实现了两个插件，包括模块化插件和连续数据传递插件；

模块化插件主要作用是将Message模块加入命名空间的功能，也就是让Store组件的数据根据业务需求分组，分组的标识就是命名空间，同一个命名空间下的数据包含在同一个生命周期内，模块化插件的目的是让Store组件里的数据更加合理的被管理，同时也能方便开发人员分模块开发；

连续数据传递插件是让Store组件里的数据有父子关系，例如：数据A→数据B→数据C→数据D，那么只要当数据A产生后才能产生数据B，以此类推，那么数据A想把信息传递给数据D，数据必须从A到B到C到D往下流，如果数据D想通知数据A发生变化，那么数据D必须依次从C到B到A传递；连续数据传递插件设计的目的是为了实现数据相关方对于数据变化都能按照指定的顺序进行更新，并且对于每一个环节里的数据变化打上标记。

有益效果

实现本发明的一种Web前端消息总线系统完善了Web前端组件开发的模式，提高了Web前端组件开发模式的健壮性；为企业内部不同的Web前端项目整合提供了底层技术支持；解耦了Web前端组件的耦合度，提升了组件的复用率；为可拖拽的、快速构建web应用系统提供了底层技术支持。

附图说明

图1是本发明的总体框架示意图；

图2是Web前端组件的定义以及组件和页面之间的关系图；

图3是ESB总线架构示意图；

图4是dubbo远程调用框架技术模型示意图；

图5是本发明的发布/订阅模式架构图；

图6是本发明的观察者模式架构图。

具体实施方式

参看图1，图5和图6，实现本发明的一种Web前端消息总线系统A，其特征在于由Message模块10、Event模块20和插件模块30组成，Message模块10由Store组件101、Getter组件102、Setter组件103和Action组件104组成；Event模块20由数据注册组件201、数据通知组件202和数据分发组件203组成；

Message模块10作用是预先定义好一系列具有特定生命周期的变量，所有的组件在指定的生命周期范围内都读取Web前端消息总线系统A里的变量，如果组件要修改Web前端消息总线系统A下的变量则要通过Event模块20进行；

Event模块20是Web前端消息总线系统A自定义的事件驱动机制，该事件驱动机制主要使用的是观察者模式Observer模式和发布/订阅模式Publish/Subscribe模式；发布/订阅模式即Publish/Subscribe模式在Web前端消息总线系统A内部使用，当修改Web前端消息总线系统A内变量时候，将变量的变化情况发布到使用该变量的各个组件里；观察者模式即Observer模拟远程调用的模式，用于组件与组件之间私有信息的传递，当被观察的组件数据发生变化时，作为观察者的组件根据观察者模式预设进行私有信息的传递；

插件模块30是在核心模块上扩展Web前端消息总线系统A功能的模块；一种Web前端消息总线系统A的插件模块30实现了两个插件，包括模块化插件301和连续数据传递插件302；模块化插件301主要作用是将Message模块10加入命名空间的功能，也就是让Store组件101的数据根据业务需求分组，分组的标识就是命名空间，同一个命名空间下的数据包含在同一个生命周期内，模块化插件301的目的是让Store组件101里的数据更加合理的被管理，同时也能方便开发人员分模块开发；连续数据传递插件302是让Store组件101里的数据有父子关系；

一种Web前端消息总线系统A，其具体实现包括以下步骤：

1）.定义生命周期：

Web前端消息总线系统A传输的数据分为window生命周期，session生命周期以及持久生命周期；

window生命周期：使用window对象，该生命周期在单个页面里有效；

session生命周期：使用html5的sessionstorage对象，该生命周期在一个会话中有效；

持久生命周期：开发人员指定生命周期，指定生命周期的工具包括：html5的localstorage对象和浏览器本地数据库indexDB，设置默认生命周期为在用户清理浏览器缓存前，该生命周期的数据长期有效；

2）.Web前端消息总线系统A在JavaScript里实现一个属于浏览器window级别的全局类Bus：

（1）全局类Bus定义的模式和代码框架如下：

(function(win){

var Bus = function(){

// 内容逻辑省略...

}

// 逻辑实现省略

win.bus = new Bus();

})(window)

Nodejs定义方式：

let Bus = function(){

// 逻辑实现省略...

}

let bus = new Bus()

module.exports = bus

（2）Nodejs模块通过Bus编译组件动态生成浏览器端的代码；

Bus系统即Web前端消息总线系统A最终是应用到浏览器端组件之间的通讯，之所以提供服务端的Nodejs实现，主要是为了适用于时下前端流行的前后端分离模式；Bus系统即Web前端消息总线系统A在浏览器端是以全局的单列的JavaScript对象形式出现，之所以使用单列模式目的是保证Bus的全局唯一性，防止代码的冲突；

Bus系统即Web前端消息总线系统A包含两个模块：Message模块10即MessageModule和Event模块20即Event Module；

（3）Message模块10相当于一个作用于全局的数据缓存系统，它包含Store组件101、Getter组件102、Setter组件103以及Action组件104，这些组件的具体实现如下：

Store组件101：它的作用是在全局作用域下定义变量，全局作用域包含三个作用域范围，它们分别是：

Window作用域范围：也就是浏览器页面的window对象，它的范围是一个页面，如果是单页面应用，就是整个单页面的生命周期内；

Session作用域范围：Session级别的数据会使用HTML5的SessionStorage机制，该数据的作用域范围是session级别的，该级别的数据作用于跨页面的数据通信；

持久化作用域范围：该作用域会使用HTML5里的LocalStorage机制和indexDB机制，只要用户不主动清理浏览器的存储，该范畴的数据将持续有效；

Store组件101的变量要在网站初始化时候就要定义好，而Getter组件102、Setter组件103以及Action组件104都是操作Store组件101里的变量来实现不同组件之间的数据通信功能；

Getter组件102：主要作用是获取Store组件101里的数据，在Getter组件102对外接口里开发人员定义多个属于Getter组件102的方法，如下所示：

{

// 省略.....

getter：{

ftn1:function () {

// 省略.....

},

ftn2:function(){

// 省略.....

}

}

// 省略.....

}

开发人员根据自己需求编写Getter组件102里的函数，这些函数里开发人员根据自己的实际需要加工或者过滤数据，但是Getter组件102里的方法不会更改Store组件101里的原始数据；

Setter组件103：作用是修改Store组件101里面存储的数据，它的代码结构如下所示：

{

// 省略.....

setter：{

ftn1:function () {

// 省略.....

Store.save(data)// 默认是window级别

},

ftn2:function(){

// 省略.....

Store.save(data,"session")// 指定session级别

}

}

// 省略.....

Store.save(data,"window")// 指定window级别

Store.save(data,"local")// 指定持久化级别，默认是LocalStorage

Store.save(data,"local","storge") // 指定使用LocalStorage

Store.save(data,"local","db") // 指定使用indexDB

}

以上代码是使用Setter组件103向Store组件101存储数据，这里要注意Setter组件103只能操作在Store组件101定义好的变量，它不能为Store组件101添加或者删除变量，如果开发人员想给Store组件101里新增变量或者删除变量，要在Store组件101定义里直接操作；

Action组件104：Action组件104作用是当Store组件101里数据发生变化时候调用相应的回调函数，开发人员使用时候要指定Store组件101中需要检测变化的变量；Action组件104运用JavaScript事件机制将变化的数据主动推送到各个相应的组件从而达到动态更新组件状态的目的；

（4）Message模块10里数据全局有效，组件在作用域范围内都能获取相关的数据；Event模块20是组件与组件的单向通讯机制，具体就是组件AA通过Event模块20向组件BB发送信息，组件BB接受信息后信息就被销毁；

（5）Event模块20包含3个组件数据注册组件201、数据通知组件202和数据分发组件203；

数据注册组件201是Bus系统即Web前端消息总线系统A里对外提供的定义事件的组件，其操作代码形式是：

on:function(component, eventName, handler)

它的作用是为组件定义相关的事件，并在事件中传递数据；

数据通知组件202作用是让开发人员定义事件，并在事件里传输数据，其操作代码形式是：

emit:function(eventName, event)

数据注册组件201和数据通知组件202都是观察者模式实现的，主要是用于组件与组件之间的私有数据传输；

数据分发组件203用于监听Message模块10中Store组件101中的数据的变化，并将变化通知给使用Store组件101中的变量的组件；

3）.拓展插件模块：

Web前端消息总线系统A除核心模块Message模块10和Event模块20外具有插件模块30，插件模块30是在核心模块上扩展Web前端消息总线系统A功能的模块，在实际应用中，Web前端消息总线系统A实现了两个插件，包括模块化插件301和连续数据传递插件302；

模块化插件301主要作用是将Message模块10加入命名空间的功能，也就是让Store组件101的数据根据业务需求分组，分组的标识就是命名空间，同一个命名空间下的数据包含在同一个生命周期内，模块化插件的目的是让Store组件101里的数据更加合理的被管理，同时也能方便开发人员分模块开发；

连续数据传递插件302是让Store组件101里的数据有父子关系，例如：数据A→数据B→数据C→数据D，那么只要当数据A产生后才能产生数据B，以此类推，那么数据A想把信息传递给数据D，数据必须从A到B到C到D往下流，如果数据D想通知数据A发生变化，那么数据D必须依次从C到B到A传递；连续数据传递插件302设计的目的是为了实现数据相关方对于数据变化都能按照指定的顺序进行更新，并且对于每一个环节里的数据变化打上标记。

Claims (1)

1.一种Web前端消息总线系统，其特征在于由Message模块、Event模块和插件模块组成，Message模块由Store组件、Getter组件、Setter组件和Action组件组成；Event模块由数据注册组件、数据通知组件和数据分发组件组成；

Message模块作用是预先定义好一系列具有生命周期的变量，所有的组件在指定的生命周期范围内都读取Web前端消息总线系统里的变量，如果组件要修改Web前端消息总线系统下的变量则要通过Event模块进行；

Event模块包含Web前端消息总线系统自定义事件的驱动机制，该事件驱动机制主要使用的是观察者模式Observer模式和发布/订阅模式Publish/Subscribe模式；发布/订阅模式即Publish/Subscribe模式在Web前端消息总线系统内部使用，当修改Web前端消息总线系统内变量时候，将变量的变化情况发布到使用该变量的各个组件里；观察者模式即Observer模拟远程调用的模式，用于组件与组件之间私有信息的传递，当被观察的组件数据发生变化时，作为观察者的组件根据观察者模式预设进行私有信息的传递；

插件模块是在核心模块上扩展Web前端消息总线系统功能的模块，核心模块指Message模块和Event模块；一种Web前端消息总线系统的插件模块实现了两个插件，包括模块化插件和连续数据传递插件；模块化插件主要作用是将Message模块加入命名空间的功能，也就是让Store组件的数据根据业务需求分组，分组的标识就是命名空间，同一个命名空间下的数据包含在同一个生命周期内，模块化插件的目的是让Store组件里的数据更加合理的被管理，同时也能方便开发人员分模块开发；连续数据传递插件是让Store组件里的数据有父子关系；

一种Web前端消息总线系统，其具体实现包括以下步骤：

1）.定义生命周期：

Web前端消息总线系统传输的数据分为window生命周期，session生命周期以及持久生命周期；

window生命周期：使用window对象，该生命周期在单个页面里有效；

session生命周期：使用html5的sessionstorage对象，该生命周期在一个会话中有效；

持久生命周期：开发人员指定生命周期，指定生命周期的工具包括：html5的localstorage对象和浏览器本地数据库indexDB，设置默认生命周期为在用户清理浏览器缓存前，该生命周期的数据长期有效；

2）.Web前端消息总线系统在JavaScript里实现一个属于浏览器window级别的全局类Bus：

（1）全局类Bus定义的模式和代码框架如下：

(function(win){

var Bus = function(){

// 内容逻辑省略...

}

// 逻辑实现省略

win.bus = new Bus();

})(window)

Nodejs定义方式：

let Bus = function(){

// 逻辑实现省略...

}

let bus = new Bus()

module.exports = bus

（2）Nodejs模块通过Bus编译组件动态生成浏览器端的代码；

Bus系统即Web前端消息总线系统最终是应用到浏览器端组件之间的通讯，之所以提供服务端的Nodejs实现，主要是为了适用于时下前端流行的前后端分离模式；Bus系统即Web前端消息总线系统在浏览器端是以全局的单列的JavaScript对象形式出现，之所以使用单列模式目的是保证Bus的全局唯一性，防止代码的冲突；

Bus系统即Web前端消息总线系统包含两个模块：Message模块即Message Module和Event模块即Event Module；

（3）Message模块相当于一个作用于全局的数据缓存系统，它包含Store组件、Getter组件、Setter组件以及Action组件，这些组件的具体实现如下：

Store组件：它的作用是在全局作用域下定义变量，全局作用域包含三个作用域范围，它们分别是：

Window作用域范围：也就是浏览器页面的window对象，它的范围是一个页面，如果是单页面应用，就是整个单页面的生命周期内；

Session作用域范围：Session级别的数据会使用HTML5的SessionStorage机制，该数据的作用域范围是session级别的，该级别的数据作用于跨页面的数据通信；

持久化作用域范围：该作用域会使用HTML5里的LocalStorage机制和indexDB机制，只要用户不主动清理浏览器的存储，该范围 的数据将持续有效；

Store组件的变量要在网站初始化时候就要定义好，而Getter组件、Setter组件以及Action组件都是操作Store组件里的变量来实现不同组件之间的数据通信功能；

Getter组件：主要作用是获取Store组件里的数据，在Getter组件对外接口里开发人员定义多个属于Getter组件的方法，如下所示：

{

// 省略.....

getter：{

ftn1:function () {

// 省略.....

},

ftn2:function(){

// 省略.....

}

}

// 省略.....

}

开发人员根据自己需求编写Getter组件里的函数，这些函数里开发人员根据自己的实际需要加工或者过滤数据，但是Getter组件里的方法不会更改Store组件里的原始数据；

Setter组件：作用是修改Store组件里面存储的数据，它的代码结构如下所示：

{

// 省略.....

setter：{

ftn1:function () {

// 省略.....

Store.save(data)// 默认是window级别

},

ftn2:function(){

// 省略.....

Store.save(data,"session")// 指定session级别

}

}

// 省略.....

Store.save(data,"window")// 指定window级别

Store.save(data,"local")// 指定持久化级别，默认是LocalStorage

Store.save(data,"local","storge") // 指定使用LocalStorage

Store.save(data,"local","db") // 指定使用indexDB

}

以上代码是使用Setter组件向Store组件存储数据，这里要注意Setter组件只能操作在Store组件定义好的变量，它不能为Store组件添加或者删除变量，如果开发人员想给Store组件里新增变量或者删除变量，要在Store组件定义里直接操作；

Action组件：Action组件作用是当Store组件里数据发生变化时候调用相应的回调函数，开发人员使用时候要指定Store组件中需要检测变化的变量；Action组件运用JavaScript事件机制将变化的数据主动推送到各个相应的组件从而达到动态更新组件状态的目的；

（4）Message模块里数据全局有效，组件在作用域范围内都能获取相关的数据；Event模块是组件与组件的单向通讯机制，具体就是组件AA通过Event模块向组件BB发送信息，组件BB接受信息后信息就被销毁；

（5）Event模块包含3个组件数据注册组件、数据通知组件和数据分发组件；

数据注册组件是Bus系统即Web前端消息总线系统里对外提供的定义事件的组件，其操作代码形式是：

on:function(component, eventName, handler)

它的作用是为组件定义相关的事件，并在事件中传递数据；

数据通知组件作用是让开发人员定义事件，并在事件里传输数据，其操作代码形式是：

emit:function(eventName, event)

数据注册组件和数据通知组件都是观察者模式实现的，主要是用于组件与组件之间的私有数据传输；

数据分发组件用于监听Message模块中Store组件中的数据的变化，并将变化通知给使用Store组件中的变量的组件；

3）.拓展插件模块：

Web前端消息总线系统除核心模块Message模块和Event模块外具有插件模块，插件模块是在核心模块上扩展Web前端消息总线系统功能的模块，在实际应用中，Web前端消息总线系统实现了两个插件，包括模块化插件和连续数据传递插件；

模块化插件主要作用是将Message模块加入命名空间的功能，也就是让Store组件的数据根据业务需求分组，分组的标识就是命名空间，同一个命名空间下的数据包含在同一个生命周期内，模块化插件的目的是让Store组件里的数据更加合理的被管理，同时也能方便开发人员分模块开发；

连续数据传递插件是让Store组件里的数据有父子关系；连续数据传递插件功能是实现数据相关方对于数据变化都能按照指定的顺序进行更新，并且对于每一个环节里的数据变化打上标记。

Images