相关理论与技术研究

设计模式理论

发布订阅与观察者模式

发布订阅模式首要考虑是为了管理对象与对象之间的联动关系。若某个对象的状态进行了数据更新，其他所有相联动的对象都会获得最新的数据消息。联动对象同时也会发生数据状态更新，从而更新渲染页面

在发布订阅模式中，主要有订阅者（Subscriber），发布者（Publisher）和调度中心（Event Channel）三者，如下图所示，

订阅者注册想要订阅的消息到调度中心，调度中心负责收集所有的订阅者。当发布者接收到数据状态改变的通知的时候，会将事件消息（Publish Event）发布给调度中心。调度中心会搜索所有依赖于发布者的订阅者，统一调度（Fire Event）将数据状态改变信息通知给所有的订阅者。

观察者模式表示观察者（Observer）不经过调度中心，而是直接订阅（Subscribe）主题内容（Subject）。当主题内容有改动的时候，会直接触发（Fire Event）并通知观察者

两者之间的区别就在于是否经过调度中心。观察者模式由于大多采用同步模式，并且已经知道主题内容，更加适用于单个应用程序。而在发布订阅模式中，发布者和订阅者都无法了解彼此的状态，并且订阅者数量较多，因此需要中间代理，即调度中心来进行双方通信处理

MVVM模式

MVVM模式是目前最流行的架构模式之一，是一种简化页面与业务逻辑的事件驱动编程架构模式。主要应用于简化页面和业务之间的依赖，解决数据更新频繁、重复渲染的问题
MVVM由三层模型构成（Model，View，ViewModel）。其中Model层计算业务逻辑，View层承担在大屏页面中进行可视化展示的功能，ViewModel层承担监听数据变动的功能，以控制视图的更新

原理

通过解耦View视图和Model数据业务层，用户通过页面交互事件（HTML，CSS，template）触发View页面响应，进而更新ViewModel层。ViewModel层将数据更新通过API接口和Web服务器进行数据交互，进而Web服务器根据数据信息对Mysql数据库做出决策。若Web服务器发生数据更新，则会通过ViewModel层将获取到的Model层的数据进行二次处理。以便生成符合View层所需要的模板数据，进而更新渲染页面。以低耦合、可复用的架构方式高效解决数据更新频繁、重复渲染的问题。这种架构模式使得业务开发人员只需要关注业务需求，而不必过多的关注数据本身

Echarts大屏可视化技术

Echarts通过数据驱动的方式，在Web端或者移动端流畅的进行大屏展示，具有较高的兼容性能，并可进行实时化的数据渲染
Echarts内置各式各样的图表类型，数据展示直观简洁，可根据用户场景需求进行定制化设计。使用人员只需要使用极为简单的编程语法，在前端框架中进行嵌入，使用JSON格式进行数据转换，既可完成数据映射。Echarts通过它的丰富的个性化定制不断吸引人们眼球。使用Echarts绘制的图表可以进行任意的区域缩放、任意拖动时间轴、任意旋转工具栏、任意角度倾斜坐标等多种友好的动态交互方式

动态实时化交互技术

在大屏可视化中，页面实时渲染更新需要实时的数据支撑。这有利于实时发现多来源复杂数据的变化过程，跟踪数据变化后的业务关系，然后对现象做出决策变化，以便更好的适应场景的变化。因而在大屏数据展示中，实时通信是至关重要的核心一步

轮询与长连接交互技术

轮询技术主要为了解决Web客户端和服务器之间进行通信而出现。轮询可以短轮询和长轮询
HTTP1.1 版本。通过TCP一次性持久化连接，来进行多次HTTP请求响应

Websocket动态交互技术

由于在HTTP协议中Web服务器无法主动与浏览器进行数据推送。为了解决这一难题，HTML5提出了基于全双工通信方式的面向服务器数据推送的Websocket协议。使得客户端和Web服务器可以相互平等的通信。Websocket协议主要机理是通过构建一条全双工链路，使浏览器（客户端）与服务器之间能够进行高效的双向交互通信。即当服务器有更新时，能够立即将数据推送给客户端，当客户端有更新时，也能够立即将数据推送给Web服务器，解决了HTTP协议只能单向请求交互的关键难题