[发明专利]一种Web前端消息总线系统

摘要

一种Web前端消息总线系统涉及信息技术领域，尤其Web前端管控的技术领域。本发明由Message模块、Event模块和插件模块组成，Message模块由Store组件、Getter组件、Setter组件和Action组件组成；Event模块由数据注册组件、数据通知组件和数据分发组件组成；本发明的核心是解决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前端消息总线系统功能的模块；一种Web前端消息总线系统的插件模块实现了两个插件，包括模块化插件和连续数据传递插件；模块化插件主要作用是将Message模块加入命名空间的功能，也就是让Store组件的数据可以根据业务需求分组，分组的标识就是命名空间，同一个命名空间下的数据包含在同一个生命周期内，模块化插件的目的是让Store组件里的数据更加合理的被管理，同时也能方便开发人员分模块开发；连续数据传递插件是让Store组件里的数据有父子关系；一种Web前端消息总线系统，其具体实现包括以下步骤：1）.定义生命周期：Web前端消息总线系统传输的数据可以分为window生命周期，session生命周期以及持久生命周期；window生命周期：使用window对象，该生命周期在单个页面里有效；session生命周期：使用html5的sessionstorage对象，该生命周期在一个会话中有效；持久生命周期：使用html5的localstorage对象，indexDB，开发人员可以指定生命周期，默认生命周期只要用户不清理浏览器缓存，该生命周期的数据是长期有效；2）.Web前端消息总线系统在JavaScript里实现一个属于浏览器windows级别的全局类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组件里的数据有父子关系；连续数据传递插件功能是实现数据相关方对于数据变化都能按照指定的顺序进行更新，并且对于每一个环节里的数据变化打上标记。