[发明专利]用户界面的组件生成方法及装置

说明书

本发明实施例公开一种用户界面的组件生成方法及装置，所述方法包括：加载本发明的组件库，调用组件库的组件；其中，组件库包括搜索框、日期时间选择器、树组件、弹出框和图片多边形热区绘制等；在从组件库调用组件时，显示该组件于显示界面，该组件的视图层监听开发人员请求执行的页面属性设置事件，并将该事件反馈给该组件的逻辑层，以使其根据页面属性设置事件修改逻辑层的数据。由于组件的视图层的页面元素的文档标识是与逻辑层处理的数据的文档标识绑定的，视图层只需根据文档标识将所述待调用组件的逻辑层中的数据渲染在组件的视图层中，即可以完成对组件的自定义调整，无需要开发人员逐个对文档对象模型进行操作，操作简单效率高。

技术领域

本发明涉及计算机技术领域，尤其涉及一种用户界面的组件生成方法及装置。

背景技术

随着手持智能设备的日益增多，用户对web页面的交互，体验要求均有显著提高。研发人员在开发一个大型后台管理系统同时，需要并行开发各自业务界面，即web界面，以供用户通过web界面与管理系统进行交互。而研发人员在开发过程中，控制后台管理系统与业务界面保持低耦合，同时保证界面交互的一致性，市面上能满足如此需求的框架不多，一般常用的有基于jquery.js的Bootstrap。

在现有的方案中利用Jquery.js来生成界面的过程为：在浏览器界面中，开发人员需要逐个对文档对象模型(组成组件的页面元素)进行操作以满足不同的业务场景。但是，现有的方案会存在有以下缺陷：开发人员需要逐个对文档对象模型进行操作，操作复杂效率低下，而且在生成过程中浏览器渲染成本高；以及，各个业务模块之间耦合高，多人并行开发的大型系统中，模块与模块之间耦合太高会导致系统后续的可扩展性、可维护性差。

发明内容

本发明实施例提出的一种用户界面的组件生成方法及装置，无需要开发人员逐个对文档对象模型进行操作，操作简单效率高，同时支持组件化开发，可大大降低各业务模块之间的耦合度，适合大型web应用。

第一方面，本发明实施例提供一种用户界面的组件生成方法，包括：

监听对组件库中的自定义组件的调用事件；所述自定义组件包括视图层和逻辑层；所述视图层包括至少一个页面元素，所述视图层的页面元素的文档标识与所述逻辑层处理的数据的文档标识绑定；

接收调用组件请求；所述调用组件请求包括待调用组件；

从所述组件库中调用所述待调用组件，显示所述待调用组件的视图层；

通过所述待调用组件的视图层监听页面属性设置事件，并将所述页面属性设置事件反馈给所述待调用组件的逻辑层，以使所述待调用组件的逻辑层根据所述页面属性设置事件修改所述逻辑层的数据；

通过所述待调用组件的视图层并根据文档标识将所述待调用组件的逻辑层中的数据渲染在所述待调用组件的视图层中，完成所述待调用组件的调用。

在第一方面的第一种可能的实施方式中，所述待调用组件包括选择搜索框组件；所述选择搜索框组件的页面元素包括输入框和下拉选择框；

则所述通过所述待调用组件的视图层监听页面属性设置事件，并将所述页面属性设置事件反馈给所述待调用组件的逻辑层，以使所述待调用组件的逻辑层根据所述页面属性设置事件修改所述逻辑层的数据，具体包括：

当通过所述选择搜索框组件的视图层监听到前端搜索设置请求时，通过所述选择搜索框组件的视图层接收搜索数据文件；所述搜索数据文件包括至少一个选项；

通过所述选择搜索框组件的逻辑层将所述搜索数据文件输入所述选择搜索框组件的逻辑层的前端搜索函数中；其中，所述前端搜索函数用于在从所述输入框中接收到关键词时，从所述搜索数据文件中搜索出与所述关键词相关的选项。