CN111813403A - 大屏数据可视化开发中拖拽组件数据管理的方法和装置 - Google Patents

Abstract

大屏数据可视化开发中拖拽组件数据管理的装置涉及信息技术领域，本发明由全局数据管理模块和组件数据管理模块组成；全局数据管理模块由全局数据存储器、全局数据展示更新器、全局数据双向绑定模块和全局数据广播器组成；组件数据管理模块由组件全局数据接收器、组件交互数据接收器、组件数据私有化模块、组件数据切面化模块和组件数据全局化模块组成；本发明避免了组件中数据传递的遍历问题，让组件之间的数据处理都集中在数据的发送方和接收方，无论组件在DOM树的哪一个位置，其处理数据的操作一致。将组件的展示和数据的变化响应都就近落在组件内部处理，这样代码的可读性和可维护性都得到了很大的增强，有利于开发人员掌握，适合推广使用。

Description

大屏数据可视化开发中拖拽组件数据管理的方法和装置

技术领域

本发明涉及信息技术领域，特别是数据可视化技术领域。

背景技术

随着Web前端技术的发展，浏览器本身所具备的能力越来越强，原来只能在基于操作系统上的桌面软件能实现的业务场景几乎都能在浏览器端实现，例如：浏览器可以实现在线excel，word的功能，能够实现像CAD，PhotoShop，3DMax等等这样从事专业领域工具的应用。相比传统的Web管理系统而言，如果我们想在浏览器端实现上述原来由桌面软件才能完成的一些复杂软件，Web前端的开发需要有新的技术栈和新的技术框架方案。新的技术栈主要是浏览器厂商赋予浏览器各种强大的新功能，例如：HTML5技术、新版的JavaScript语言以及新增强的CSS功能，特别是包括在HTML5技术栈里的2D、3D相关的绘图技术。浏览器新增的技术栈导致浏览器的开发语言里增加了大量新的API接口，新的语法功能，新的代码写法，如何能有效的使用这些新的功能我们就需要新的技术框架将这些技术栈进行有效的梳理和封装，屏蔽底层的技术细节，优化底层方法的调用以及根据上层应用的特点合理的功能封装。这些工作能降低研发的学习成本，提高研发的生产效率，避免业务研发中更多非业务技术问题的发生，从而促进基于Web的软件的快速发展。浏览器的新技术代表了浏览器在集成更多有价值的功能，更多有价值的功能的集成就让浏览器所包含的功能越来越多，浏览器本身的研发技术变得越来越复杂，而新的技术框架则是将这些技术使用的复杂度进行有效的封装，降低研发成本和技术准入的门槛，这就使得浏览器上开发出来的应用越来越接近操作系统上的桌面软件所具备的能力。

当使用浏览器底层的JavaScript、HTML和CSS三大技术实现交互式响应应用时，对比桌面软件的开发模式的技术需要研发人员自己构建各种组件。桌面软件研发时候会提供大量的现成的组件，例如窗体、对话框、输入框等等，这些组件都是基于事件驱动的方式进行开发，即将用户的输入作为响应事件的数据这些数据可以传播到需要接收这些指令的各个组件中。而浏览器的三个技术在完成这样类似的功能会碰到几个大的障碍，这些障碍具体如下：

障碍1：HTML的原生组件非常简单，功能很单一，这主要因为HTML产生时候主要是给人浏览器文本和图片，所以HTML的原生组件主要功能只是做展示，交互几乎没有或者很弱，而我们需要一个类似如桌面软件里的窗体、对话框这样的组件就得将HTML、JavaScript和CSS结合起来封装一个更加高级的组件。由此可见，桌面软件里的组件对应到Web前端的组件，那么这个Web前端组件就是一组HTML、JavaScript和CSS代码的结合体。因此做交互式响应所需的组件并不是得到浏览器原生支持，需要研发人员自己进行封装。

障碍2：Web前端是一种展示技术，因此如何能在浏览器上渲染出所需要的页面则是非常重要的技术，交互性响应的功能就意味大量使用动态的可视化组件即根据用户实时的指令按需构建展示元素，这种技术在Web前端底层即是DOM相关的技术，DOM技术操作十分笨重，需要编写大量的代码，因此在开发复杂的交互式响应页面时候，针对一个指令就需要编写大量的DOM代码来让浏览器展示需要展示的东西。因此传统的Web前端技术制作交互式响应的页面会让前端变得极其复杂，研发的门槛非常高。

障碍3：交互式响应的本质就是输入指令，页面会根据指令发生相应的展示变化，这个指令进入计算机后被转化为计算机所使用的的数据，因此交互式响应的本质就是数据和展示的双向关系的处理即数据发生了变化那么相应的展示也跟数据一起变化，如果展示发生变化那么与之对应的数据也会跟随变化，而原生的Web前端技术是不包含这样的功能，但是原生的Web前端技术底层的很多机制进行封装后可以对外实现上述机制，但是这样的封装直到现在都是Web前端很难的技术，这也是阻碍Web前端里在早期能做出大型的交互式响应的一个重要的障碍。

随着Web前端的快速普及以及新技术的快速发展，Web前端时下出现了大量基于MVVM的框架，而MVVM的框架成功的在技术框架底层解决上述的障碍，使得Web软件在前端领域的生产力得到了极大的释放。但是面对更加复杂的大型Web前端交互式响应应用，MVVM框架还是有很多复杂的问题解决的不到位。

时下流行的MVVM框架例如VueJs、ReactJs和AnguarJs都是实现了数据的双向绑定即实现了数据域展示的关系问题，同时这些框架都是基于组件来构建各类的页面。

以拖拽的方式开发数据可视化页面是数据可视化领域一种越来越通用的研发模式，拖拽研发大屏页面的系统可以极大的提升大屏研发的效率，能快速响应高度迭代数据分析的业务需求。

拖拽方式研发数据可视化页面，一般都是以在一张画布上拖拽可视化组件，与之对应的程序和数据逻辑，一般都是画布代表一个可视化页面，一般使用一个JavaScript对象来表示，而页面上一个个可视化组件这是以数组或者是对象的方式作为页面对象的子元素。我们的本质需求就是需要一个个可视化的页面，因此拖拽大屏工具研发里，页面的数据管理就变得尤为重要，而实际的拖拽数据可视化工具里页面所对应的Page对象结构一般会非常复杂。

举例说明Page对象的复杂性问题，例如编辑一个页面组件逻辑结构树，逻辑上这个树最深有4个层级，一级树节点可以分为5大类，每个大类还有若干子节点，按逻辑结构该编辑页面的组件有22个逻辑根节点。而实际开发中，我们如果在页面里拖入一个自定义的列表组件，从编辑页面组件到列表的最小维度的组件封装，这个实体组件树深度会达到10个层级之上。依次类推，一个拖拽大屏页面的实例组件树就有可能包含数百个子组件节点。

如果我们以Page对象来存储一个大屏页面的数据，那么这个Page对象里至少也有数百个子对象来存储这些组件数据。Page对象除了存储实体组件的数据外，还会存储页面和组件的元数据信息，例如页面唯一ID，页面的名称等等信息，此外还会存储逻辑数据，例如：两个不同组件需要进行通信，那么组件的通信机制，组件的通信相关的元数据和逻辑元数据都是需要进行存储，因此Page对象除了存储实体组件信息外还需要存储大量逻辑化的数据，由此可见Page对象是极其复杂的。

拖拽的可视化页面研发中对于Page对象的有效管理，是一个非常重要，但是又十分有难度的技术问题。之所以重要，因为拖拽大屏的业务逻辑最小单元就是一个个被拖拽出来的可视化页面，而Page存储的是一个个可视化页面的数据，这是拖拽可视化页面的核心逻辑基础，如果这个Page对象没有定义和管理好，一个拖拽可视化工具基本是无法实现的。

一个Page对象里最少也要包含数百个子对象，子对象之间还有特定的逻辑关系，这就决定了Page对象的管理自然是非常复杂的问题。Page对象管理的复杂性问题关系到如下技术特征：

1.做拖拽开发页面的过程中我们需要实时保证Page数据的实时性。实时性指的是使用者修改了某一个配置，页面需要实时显示出来；组件之间的数据传递是无时无刻存在的，有的数据传递需要通过很多层级，有时一个数据的改变还需要传递给多个相关组件，这就导致数据传递层级的叠加。实时性是交互式响应的根本，而如何有效管理好组件之间的数据传递就是保证工具实时性的技术基础。因此实时性的困难关键在于如何有效管理组件之间的数据传递。

2.做拖拽开发页面的过程中我们需要实时保证Page数据的完整性。大屏页面是拖拽数据可视化的最小业务逻辑单位，之所以称之为最小业务逻辑单位，因为拖拽可视化对外的原子业务功能就是一个个可视化页面。在制作可视化页面的过程中，我们会不断向画布里添加页面需要的组件，也会不断的调整组件的各类参数，但是不管我们进行何种制作页面的相关操作，我们都会以该可视化页面是否满足我们设计方案来考量页面的完成程度。而这样的业务逻辑概念体现到我们工具的程序里，就是用户每一步制作页面的操作最后都会实时将数据同步到Page对象，而Page对象通过交互响应的方式实时将页面展示出来。换个角度理解这个问题，在实际的工具中，每一个页面所包含的小组件都会包含一份自身独立的数据，例如：柱状图图表，该图表会包含柱状图相应的数据，而柱状图的数据又是Page对象的一部分，当我们触发柱状图的配置，首先接收数据变化的是组件本身，但是为了保证Page的完整性，柱状图的数据还需要实时同步到Page对象中。这是Page对象完整性的数据流程。Page的完整性在拖拽可视化工具里十分重要，正如前文所述，就使用者而言，他们使用的最小业务目的就是获得一个可视化页面，因此实时看可视化页面是否完成是使用者判断进展的重要依据，除此之外，作为了工具类的软件，实时保存数据是保证其可用性的重要保证，而Page是业务最小逻辑单元，那么实时保存Page信息，让使用者的工作不被轻易丢失也是非常必要和重要的工作环节。

3.子组件之间的交互问题。下面本文举一个例子来描述子组件之间交互的问题，例如地图组件和按钮组件的交互：点击项目按钮，地图显示中国地图，点击设备按钮地图显示湖北地图。子组件之间的交互也是一种组件之间的数据的传递，但是这种传递和实时性的数据传递有所不同，交互性的数据传递是通过交互事件来触发。交互事件被触发后，发起交互的组件会将数据传递给响应交互事件的组件，响应交互事件的组件接收到数据后会发生相应的业务变化。子组件交互会碰到如下比较难的问题，一个组件会根据业务需求定义若干事件，不同的事件需要传递本组件那些数据，当事件触发后，组件之间如何传递和接收数据，接收到交互数据的组件如何智能的根据接收的数据做出相应的变化，这些流程在现有前端技术都没有现成的技术可以用。

4.数据、逻辑和展示的结构问题。时下流行的框架Vue、React和Angular都是能实现很好的响应式应用，即数据变化对应的展示也会发生相应的变化，因此交互式响应本身就是一个数据和展示的问题，而处理数据和展示的问题就得通过逻辑。拖拽可视化的最小业务维度就是单个的实体组件。一个完成的可视化页面就是由这样的数百个实体组件所组成，这样的场景下，我们希望每一个可视化数据应该和可视化元素例如文字、颜色等挨的最近，这样才能降低系统研发的复杂度，同时降低后续维护的难度。

本发明所要解决的问题即在拖拽的Web可视化工具里组件之间的数据管理问题。

下面本文描述下现有组件之间的数据管理问题。

论述前我们需要明确，组件之间的数据管理是有一个限定范围，这个限定范围就是单页面系统，组件的本质是将一个页面的可视化元素拆分成若干小的展示部分，多个组件组合得到一个完整的页面。之所以要特别指出单页面系统，主要原因是时下绝大部分的响应式的Web系统都是基于单页面，而且单页面系统里有一个完整的JavaScript内存运行环境，因此在单页面里研发Web系统，这个Web系统就会更加运行高效，也才能更有效的完成组件之间的数据传递和管理。而多页面系统之间的数据传递常常因为各种原因，特别是安全原因受到种种限制，而且很多限制是会极大影响到交互式响应的处理。

时下流行的MVVM框架例如：Vue、React和Angular都是基于组件的框架，也都是在基于单页面系统的前提下提出的组件之间数据传递方案。而这些方案变种很多，但是其思想总结起来主要是分为两大类，一类是基于父子组件的数据管理，一类是全局性的组件之间的数据管理问题。而这两类数据管理方案对于一个完整的Web前端系统而言并不是一个平行方案，而是二者结合起来组成的一套完整的组件之间的数据管理方案。下面本文将这些方案具体描述如下：

当子页面的出现都是由父页面来决定的，因此父子页面就构成了一个线性的父子关系。父子之间的数据在这条线上进行传递。这种传递有个问题，当出现多个节点，最后一个节点如果想把数据传递给第一个节点，那么数据还要通过中间节点，中间节点对于这份数据可能不会有任何业务操作，它只是负责将数据回传操作。当父子页面层级很多，最后一个节点将数据传到父节点，那么通过的节点就会更多，这样就导致一个问题，数据传递过程中的中间节点会存在大量和本组件无关的数据传递代码，这样的情况也会导致我们很难理清组件之间的数据传递流程，从而增加了代码的维护难度。

父子组件之间的传值如果碰到兄弟组件之间的数据传递，那么它就很难完成这样的数据传递场景。针对父子组件之间的传值如果碰到兄弟组件之间的数据传递，时下流行的MVVM框架提供了一套状态管理的方案，即组件之间状态管理的方案：父子组件之间的数据传递有个两个前提：组件之间有父子管理和数据通过线性传递，但是在一个单页面系统里组件之间的管理应该是一个树状结构，组件之间的关系就变的复杂和难以控制。但是Web系统里，非父子关系组件的数据传递也是非常常见的，例如：用户权限信息组件和业务组件之间的关系，这两种组件无法用父子或者兄弟节点关系来定义，因此Web组件之间数据传递需要一个不去考虑组件之间节点关系也能有效传递数据的方案。该方案就是基于单页面系统运行在一个JavaScript运行环境下，通过一个单页面里全局有效的单例状态树，组件之间的数据可以发送到这个单例状态树，需要使用这个数据的组件可以调用这个单例状态树来获取所需要的数据。

该方案会包括如下的概念：store、state、getter、mutual、action。

Store：即代表这个单例状态树；

State：代表单例状态树的一个状态；

Getter：获取某个state状态的方法；

Mutual：修改某个state状态的方法；

Action：异步的修改state状态的方法。

这里state的获取和修改都是使用特定的getter、mutual和action完成，主要是为了处理数据的双向绑定，通过getter、mutual和action操作的数据，页面对应的可视化元素会发生相应的展示变化。

组件之间的状态管理方案更像一个通用的组件数据传递方案，但是它实在是繁琐和复杂，就连最早提出这个方案的Facebook公司也指出如果不是必要性特别大，尽量避免使用。

针对数据可视化拖拽这样的场景，它会存在如下的难题，具体如下：

1、状态管理方案无法很好的处理Page和各个子对象的关系问题。Page对象是业务逻辑的对象，在研发侧，具体使用的还是各个子组件所需要的子对象，如果我们在状态树里按实体组件定义每个组件的状态，最后还需要合并这些状态到Page对象，这个工作因为缺乏相应机制，合并操作在保证对象单一性以及数据双向绑定问题上基本很难做好。当我们在状态树只存储Page对象，研发就要拆分Page对象给具体的组件使用，这种方式在开发中碰到3个难题，第一个难题是我们需要不断合并子组件数据到Page对象，因为Page对象是数据双向绑定，这就导致Page整体更新，这样的后果是我们可能只是在页面添加了一个折线图，而页面原有的组件都会有可能重新初始化，这样会导致页面加载变慢，同时一些配置操作会丢失，第二个难题是Page组件存储的子组件的数据并不是子组件需要的正确格式，子组件需要对Page对象里的数据格式转化后才能使用，例如：文字大小，在页面的有效格式需要加上单位，例如像素单位px，页面才能正确解析，但是在配置面板里我们往往要将其转化为数字格式让用户操作，这就导致拆分出来的数据还要进行转化，由于JavaScript对于对象是传引用而非传值，这就很容易破坏单例的特性，在实际研发过程中，很多初中级前端工程师常常无法有效的处理这些问题

2、状态管理的代码写法非常繁琐，而且它主要是处理数据，因此它和页面逻辑总是分开独立文件来编写，当我们打算定义一个整数类型的变量进行状态管理，我们最少需要写4个文件。拖拽工具里一个Page会有数百个子组件，如果都在状态管理里写，其代码量就非常大，那么其状态管理就更加难以维护和理解。

而拖拽大屏本身就是一个复杂系统，交互性很强，数据的更改往往都要很快的体现在页面上，独立的数据处理在这样的场景下往往弊大于利。

现有技术

万维网联盟文档对象模型 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

发明内容

鉴于现有技术的不足，本发明提供的大屏数据可视化开发中拖拽组件数据管理的装置由全局数据管理模块和组件数据管理模块组成；全局数据管理模块由全局数据存储器、全局数据展示更新器、全局数据双向绑定模块和全局数据广播器组成；组件数据管理模块由组件全局数据接收器、组件交互数据接收器、组件数据私有化模块、组件数据切面化模块和组件数据全局化模块组成；

全局数据存储器负责存储大屏可视化开发中单页面的所有数据；

全局数据展示更新器负责将全局数据存储器中存储的数据和大屏可视化开发中单页面的DOM结构绑定，当全局数据存储器中存储的数据变化时，对应全局数据存储器中变化的数据的DOM结构的值相应发生变化，DOM结构的值所产生的变化直接表现为页面展示的变化；

全局数据双向绑定模块将全局数据存储器中存储的组件数据使用双向读写函数与组件数据管理模块的组件数据全局化模块中对应的全局化数据进行双向读写绑定，必要条件包括全局数据存储器中存储的组件数据的名称与组件数据管理模块的组件数据全局化模块中对应的全局化数据名称一致；

全局数据广播器负责将全局数据存储器中存储的数据向所有组件广播；

组件全局数据接收器负责接收本组件需要的来自全局数据广播器广播的数据，生成待私有化数据，判断全局数据广播器广播的数据是否为本组件需要的数据的方式为：当全局数据广播器广播的数据的名称与组件数据全局化模块中的全局化数据名称一致时，断定全局数据广播器广播的数据是本组件需要的数据；

组件交互数据接收器用来接收其他组件发送给本组件的数据，并将其他组件发送给本组件的数据的名称中所包含的本组件名称去掉后生成待私有化数据，组件交互数据接收器将待私有化数据发送给组件数据私有化模块；

组件数据私有化模块将收到的待私有化数据的名称加上私有化标识后转化为组件私有化数据，组件私有化数据参与本组件内部的数据计算，组件数据私有化模块将计算完成的结果生成组件内计算结果发送给组件数据切面化模块和组件数据全局化模块；组件数据私有化模块负责存储组件内部的数据计算函数；

组件数据切面化模块记录跟本组件产生数据交互的其他组件的名称，组件数据切面化模块收到组件内计算结果后去掉组件内计算结果的名称上的私有化标识后，将组件内计算结果的名称加上跟本组件产生数据交互的其他组件的名称，形成组件内计算结果切面，每一个组件内计算结果切面包括：组件内计算结果、组件内计算结果的名称和跟本组件产生数据交互的其他一个组件的名称；当有N个其他组件与本组件产生数据交互时，生成N个组件内计算结果切面；组件数据切面化模块将组件内计算结果切面发送给与计算结果切面对应的与本组件产生数据交互的其他组件的组件交互数据接收器；

组件数据全局化模块收到组件内计算结果后去掉组件内计算结果的名称上的私有化标识生成全局化数据。

有益效果

本发明避免了组件中数据传递的遍历问题，让组件之间的数据处理都集中在数据的发送方和接收方，这是对于父子组件数据传递方案的一种改进；通过全局数据存储器将数据的合并集中在DOM树的根节点，而拆分数据由组件自身完成，无论组件在DOM树的哪一个位置，其拆分数据，处理数据的操作都是一致的。最后我们将组件的展示和数据的变化响应都就近落在组件内部处理，这样代码的可读性和可维护性都得到了很大的增强，有利于开发人员掌握，适合推广使用。

附图说明

图1是本发明的系统结构图。

具体实施方式

参看图1，实现本发明提供的大屏数据可视化开发中拖拽组件数据管理的装置由全局数据管理模块A和组件数据管理模块B组成；全局数据管理模块A由全局数据存储器10、全局数据展示更新器11、全局数据双向绑定模块12和全局数据广播器13组成；组件数据管理模块B由组件全局数据接收器20、组件交互数据接收器21、组件数据私有化模块22、组件数据切面化模块23和组件数据全局化模块24组成；

全局数据存储器10负责存储大屏可视化开发中单页面的所有数据；

全局数据展示更新器11负责将全局数据存储器10中存储的数据和大屏可视化开发中单页面的DOM结构绑定，当全局数据存储器10中存储的数据变化时，对应全局数据存储器10中变化的数据的DOM结构的值相应发生变化，DOM结构的值所产生的变化直接表现为页面展示的变化；

全局数据双向绑定模块13将全局数据存储器10中存储的组件数据使用双向读写函数与组件数据管理模块B的组件数据全局化模块24中对应的全局化数据进行双向读写绑定，必要条件包括全局数据存储器10中存储的组件数据的名称与组件数据管理模块B的组件数据全局化模块24中对应的全局化数据名称一致；

全局数据广播器13负责将全局数据存储器10中存储的数据向所有组件广播；

组件全局数据接收器20负责接收本组件需要的来自全局数据广播器13广播的数据，生成待私有化数据，判断全局数据广播器13广播的数据是否为本组件需要的数据的方式为：当全局数据广播器13广播的数据的名称与组件数据全局化模块24中的全局化数据名称一致时，断定全局数据广播器13广播的数据是本组件需要的数据；

组件交互数据接收器21用来接收其他组件发送给本组件的数据，并将其他组件发送给本组件的数据的名称中所包含的本组件名称去掉后生成待私有化数据，组件交互数据接收器21将待私有化数据发送给组件数据私有化模块22；

组件数据私有化模块22将收到的待私有化数据的名称加上私有化标识后转化为组件私有化数据，组件私有化数据参与本组件内部的数据计算，组件数据私有化模块22将计算完成的结果生成组件内计算结果发送给组件数据切面化模块23和组件数据全局化模块24；组件数据私有化模块22负责存储组件内部的数据计算函数；

组件数据切面化模块23记录跟本组件产生数据交互的其他组件的名称，组件数据切面化模块23收到组件内计算结果后去掉组件内计算结果的名称上的私有化标识后，将组件内计算结果的名称加上跟本组件产生数据交互的其他组件的名称，形成组件内计算结果切面，每一个组件内计算结果切面包括：组件内计算结果、组件内计算结果的名称和跟本组件产生数据交互的其他一个组件的名称；当有N个其他组件与本组件产生数据交互时，生成N个组件内计算结果切面；组件数据切面化模块23将组件内计算结果切面发送给与计算结果切面对应的与本组件产生数据交互的其他组件的组件交互数据接收器21；

组件数据全局化模块24收到组件内计算结果后去掉组件内计算结果的名称上的私有化标识生成全局化数据。

Claims (1)

1.大屏数据可视化开发中拖拽组件数据管理的装置，其特征在于由全局数据管理模块和组件数据管理模块组成；全局数据管理模块由全局数据存储器、全局数据展示更新器、全局数据双向绑定模块和全局数据广播器组成；组件数据管理模块由组件全局数据接收器、组件交互数据接收器、组件数据私有化模块、组件数据切面化模块和组件数据全局化模块组成；

全局数据存储器负责存储大屏可视化开发中单页面的所有数据；

全局数据展示更新器负责将全局数据存储器中存储的数据和大屏可视化开发中单页面的DOM结构绑定，当全局数据存储器中存储的数据变化时，对应全局数据存储器中变化的数据的DOM结构的值相应发生变化，DOM结构的值所产生的变化直接表现为页面展示的变化；

全局数据双向绑定模块将全局数据存储器中存储的组件数据使用双向读写函数与组件数据管理模块的组件数据全局化模块中对应的全局化数据进行双向读写绑定，必要条件包括全局数据存储器中存储的组件数据的名称与组件数据管理模块的组件数据全局化模块中对应的全局化数据名称一致；

全局数据广播器负责将全局数据存储器中存储的数据向所有组件广播；

组件全局数据接收器负责接收本组件需要的来自全局数据广播器广播的数据，生成待私有化数据，判断全局数据广播器广播的数据是否为本组件需要的数据的方式为：当全局数据广播器广播的数据的名称与组件数据全局化模块中的全局化数据名称一致时，断定全局数据广播器广播的数据是本组件需要的数据；

组件交互数据接收器用来接收其他组件发送给本组件的数据，并将其他组件发送给本组件的数据的名称中所包含的本组件名称去掉后生成待私有化数据，组件交互数据接收器将待私有化数据发送给组件数据私有化模块；

组件数据私有化模块将收到的待私有化数据的名称加上私有化标识后转化为组件私有化数据，组件私有化数据参与本组件内部的数据计算，组件数据私有化模块将计算完成的结果生成组件内计算结果发送给组件数据切面化模块和组件数据全局化模块；组件数据私有化模块负责存储组件内部的数据计算函数；

组件数据切面化模块记录跟本组件产生数据交互的其他组件的名称，组件数据切面化模块收到组件内计算结果后去掉组件内计算结果的名称上的私有化标识后，将组件内计算结果的名称加上跟本组件产生数据交互的其他组件的名称，形成组件内计算结果切面，每一个组件内计算结果切面包括：组件内计算结果、组件内计算结果的名称和跟本组件产生数据交互的其他一个组件的名称；当有N个其他组件与本组件产生数据交互时，生成N个组件内计算结果切面；组件数据切面化模块将组件内计算结果切面发送给与计算结果切面对应的与本组件产生数据交互的其他组件的组件交互数据接收器；

组件数据全局化模块收到组件内计算结果后去掉组件内计算结果的名称上的私有化标识生成全局化数据。

Images