资源管理系统应用程序需求庞大、管理的资源对象众多、现场项目需求各不相同，同一种资源对象、资源查询的管理界面中，可能需要呈现的属性、查询条件、查询结果列名都不一样，如果每个页面都要采用硬编码方式，开发人员的开发工作量和压力很大。在面临资源管理系统这样的管理需求下，如果还按照传统的方式去开发应用程序，必然存在下列问题：

1. 需要编写大量的代码

2. 研发时间比较长

3. 功能质量难以保证

4. 同一个类似功能，界面 UI 难保一致

5. 代码只能在某一个项目现场使用，难以做到产品化

早期的浏览器所渲染的 HTML 代码由后端开发人员将数据传入后端模板后拼接而成。随着 Ajax 技术的日渐流行，异步数据传输方式的用户体验更佳，Json 格式存储量小且简洁易读等优势也日益凸显。前端开发人员普遍采用字符串拼接的方式, 将 Ajax 获取的数据手动输出到 HTML。这种开发方式效率低下,代码逻辑与视图过于耦合，难以阅读和维护。

随着各种浏览器对 W3C 标准下的新特性支持度越来越高, HTML5 和 CSS3 等新技术不断普及，前端模板引擎也出现了百花齐放的局面。采用前端模板后, 使得开发流程中前、后端分离更加彻底。技术的发展，带给了资源系统大量页面组件实现的思路。

 01 总体设计思路

基于前端模板引擎的思路，资源管理中采用一种基于数据驱动的资源系统元数据动态页面组件技术方案, 它能有效提高资源管理应用前端开发效率和代码复用性, 降低程序扩展和维护的复杂度。

数据驱动的元数据组件是统一提供各模块的依赖和引入，为动态模板技术和数据绑定技术提供相应接口，提供资源管理界面的快速实现能力。

组件 UI 的呈现主要是通过动态模板，动态模板技术依赖于解析器构成，解析器作用在于对页面所需的字符串模板进行词法分析，通过特定的正则表达式标识每个词块的类型，生成词块对象，并且对输出的词法对象数组进行语法分析，然后根据模板语法，将各零散的词块拼接为有具体含义的语法对象，并根据父子级联关系输出为抽象语法树。编译器的作用在于将解析器构建出的语法树根据不同的节点类型，通过不同的编译函数，生成对应 DOM，并挂载到页面中，完成组件 UI 的呈现。过滤器可以在数据传入前根据一定的规则过滤掉一些信息或者设置一些参数，再进行业务逻辑处理。

数据绑定技术是实现元数据驱动动态页面生成的核心，该模块实现数据检测的监听和更新操作，通过监测方法来实现数据监听和回调函数的绑定，通过更新方法遍历观察者列表触发更新操作。可以根据项目需求扩展更多功能强大的指令，从而提高组件的功能性。

数据绑定的原理如下：

 02 总体架构

元数据平台组件开发是一种用于资源管理系统应用程序开发的模块化方法，可有效减少应用程序的开发时间。架构上从低向上包括数据层，用于存储元数据配置；数据中间层，缓存元数据的配置信息；组件层，包括配置平台和组件，配置平台用于配置驱动组件的元数据，组件是抽象的界面功能组件（属性、查询、命名、菜单）。

架构图如下所示：

元数据平台组件使用可重用的、基于组件的体系结构进行开发，从而加快了应用程序的开发和交付周期，保证功能质量。在构建具有可重用组件的应用程序时，开发人员将有机会在不同的应用程序中使用现有组件，而不仅仅是原始开发应用程序，这里的组件是一个可重用的对象，它将一段代码转换为模块，这些组件可用于具有类似功能的不同应用程序中。通过将这些模块添加到新的应用程序中，开发人员可以避免针对类似的通用功能进行重复编码。这种灵活性极大地减少了测试和开发的工作量、时间，开发人员只需要通过元数据平台进行资源对象的配置、查询的配置，业务侧功能即可实现管理界面。

 03 从需求到功能的 0 代码转变

在元数据平台组件的使用中，把用户提的需求到功能的变化需要经过 3 个处理，首先需要把用户所提到的需求进行分析，其次把分析之后的需求通过平台配置到平台中，然后业务侧通过组件生成查询界面以及增加、修改功能界面：

用户需求分析

有一天现场来了这么一个需求，要求项目快速开发出某对象的基础管理功能，经过需求分析和设计，梳理了对象属性，结合集团模型的物理存储设计，给了 2 张物理表用于存储、一张集团规范表不允许扩字段、一张现场特有的表记录一些现场特有的扩展信息，要求半天内研发出增删改查功能。功能不难，但半天明显有点和项目研发人员过不去呢。让元数据组件来处理，配一配就能完成基础的查询、新增\修改功能。

业务对象基本管理界面配置

配置实现新增\修改功能。通过需求分析设计的结果，对象里面有很多属性，属性不限制于只存在一张表中，这样使用元数据配置平台去做对象配置把涉及的表都配置上去，完成业务对象到物理存储的配置数据制作。

如下图所示：

◉ 对象配置：

把刚刚分析出来的表都配置到下图中的资源类型配置界面中，在【横表配置】中录入某对外管理所有需要存储的表；完成对象和物理表的映射配置，这里就拿光交接箱来做个示例。

◉ 属性配置：

把分析出来的属性通过元数据平台-【属性配置】配置进来，定义对象的属性存储在物理表字段，以及前端界面应该用什么控件显示等相关呈现信息。配置界面如下：

通过如上的功能把对象的所有属性配置进来，配置完了查看一下所有配置过的属性：

属性控件生成精髓

通过对某对象属性的配置，一个属性就相当于界面的一个输入框（文本、数字、下拉、时间），从上面的表格中也能看出，属性形态各不一样，有输入框、下拉框、时间框、数字框等各种不样的输入元素，那么如何优雅的把这些属性生成在 VIEW 中呢？我们使用 AMD、MVC 的设计思想，引用了 Handlebars、requirejs 作为前端控件生成的原始控件进行封装：

生成输入框样例代码：

效果图：

通过以上简洁的代码快速生成输入框，如何能这么快速达到效果，这得益于团队封装的 FORMVIEW.JS 组件包。

在基于以上快速生成表单的技术基础上，能快速生成用户新增、修改界面，并且保存在同一个界面上打开不存在重复以及作用域唯一，如下图：

业务对象查询界面配置

◉ 查询配置：

配置实现查询功能。要管理对象，需要有查询对象的功能。查询功能换以前肯定要写个查询接口以及多个后台功能去支撑查询接口；现在通过元数据平台配置，把所需要查询对象的属性选择到下面表格中进行处理，比如：查询结果是否显示、结果显示、数据排序、分组、转义、加密、超链接等配置均在以下图中完成：

比较难的有：关系配置，如上图可以看见别名列：A、B、C、A1 这些均代表表名，下图中的关联有关系表示，需要把 A 表所属于局站与 B 表的局站 ID 关联，A 表的所属管理区域与 C 表的管理区域 ID 关联，如此把 A、B、C 表进行关联并加上条件生成的 SQL 语句就能把所需要的数据查询出来。

配置完成，以下是生成的 SQL 语句样例，通过把光分纤箱、管理区域对象属性拉进来，配置关联关系则可以生成如下的 SQL，可以通过界面预览看到我们的运行态的查询界面的效果。

在业务侧，通过查询组件即可生成相关对象的通用查询的界面，0 代码实现一个查询功能的研发，实现的查询界面如下图所示：

功能使用，达成效果

业务小伙伴们使用元数据组件平台，在平台上进行配置表、字段以及表与表之间的关系、字段与字段之间的关系的配置，通过属性控件、查询控件、菜单控件等功能即可把存量管理中基础性的通用功能（查询、新增、修改、查看）做完。

通过配置数据直接驱动生成对象的新增\修改\查看界面，以及对象的查询界面。只需要把元数据配置数据进行管控，每个现场一份唯一的配置数据，存量代码统一一套，既能保证产品质量又能保证研发速度。

就目前 R9 系统中有大约 1000 多个资源通过元数据组件进行管理使用，查询多达 500 多个，通过组件快速打造完成 R9 的基础功能研发。