[发明专利]一种构建web前端的方法及系统

摘要

本发明提供一种构建web前端的方法及系统，所述方法包括：S1，根据用户从预先构建的前端模块库中选择的各前端模块，生成各所述前端模块中组件的实例，所述组件实例继承所述前端模块中预先定义的各种组件的所有属性和方法；S2，当所述用户选中所述组件实例中的组件对象时，从所述组件对象对应的所述前端模块中获取所述组件对象的属性和方法，并显示所述属性和方法，以供用户对显示的所述属性和方法进行编辑；S3，根据编辑后的各所述组件对象，构建web前端。本发明实现对预先定义的前端模块中通用的方法和属性直接继承，对有区别的方法和属性进行编辑，便于逻辑关系的整理，避免重复构建，提高了web前端的构建效率。 1

主权项

1.一种构建web前端的方法，其特征在于，包括：

S1，根据用户从预先构建的前端模块库中选择的各前端模块，生成各所述前端模块中组件的实例，所述组件实例继承所述前端模块中预先定义的各种组件的所有属性和方法；

S2，当所述用户选中所述组件实例中的组件对象时，从所述组件对象对应的所述前端模块中获取所述组件对象的属性和方法，并显示所述属性和方法，以供用户对显示的所述属性和方法进行编辑；

S3，根据编辑后的各所述组件对象，构建web前端。

2.根据权利要求1所述的方法，其特征在于，所述步骤S1之前还包括：

根据预先获取的各业务逻辑的各功能模块，使用js框架定义所述各功能模块对应的前端模块；

将定义的所述各前端模块加载到前端模块库中。

3.根据权利要求2所述的方法，其特征在于，使用js框架定义所述各功能模块对应的前端模块的步骤具体包括：

为各所述前端模块分别提供一个JavaScript对象，将所述JavaScript对象作为各所述前端模块对外的调用接口；

在各所述JavaScript对象中定义所述前端模块的UI接口和逻辑接口；

其中，所述UI接口包括各所述前端模块的可视化参数和交互控制函数，所述可视化参数用于定义各所述前端模块的页面属性，所述交互控制函数用于定义各所述前端模块的交互方法；

所述逻辑接口包括各所述前端模块的控制参数和逻辑控制函数，所述控制参数用于定义所述逻辑控制函数的参数，所述逻辑控制函数用于定义所述前端模块所实现的功能。

4.根据权利要求3所述的方法，其特征在于，所述步骤S1具体包括：

调用所述各前端模块的UI接口，将各所述前端模块显示到展示窗口中；

根据所述用户从所述展示窗口中拖拽到操作窗口中的各所述前端模块，生成所述操作窗口中所有前端模块的一个组件实例。

5.根据权利要求1‑4任一所述的方法，其特征在于，所述步骤S2具体包括：

当所述用户选中所述组件实例中的组件对象时，将所述组件对象的属性和方法显示到对象编辑窗口中，以供用户对所述对象编辑窗口中组件对象的属性和方法进行编辑。

6.根据权利要求1‑4任一所述的方法，其特征在于，所述步骤S2还包括：

以脚本的形式为所述组件实例中的组件对象添加新方法。

7.根据权利要求1‑4任一所述的方法，其特征在于，所述步骤S3具体包括：

将所述组件对象的所有方法的脚本语言转换为JavaScript语言；

使用打包工具将转换为JavaScript语言的所述方法打包为工程发布包。

8.一种构建web前端的系统，其特征在于，包括：

生成模块，用于根据用户从预先构建的前端模块库中选择的各前端模块，生成各所述前端模块中组件的实例，所述组件实例继承预先定义的所选前端模块的所有属性和方法；

编辑模块，用于当所述用户选中所述组件实例中的组件对象时，显示对象编辑窗口以供所述用户使用所述对象编辑窗口对所述组件对象的属性和方法进行编辑；

构建模块，用于根据编辑后的各所述组件对象，构建web前端。

9.一种构建web前端的设备，其特征在于，包括：

至少一个处理器、至少一个存储器和总线；其中，

所述处理器和存储器通过所述总线完成相互间的通信；

所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如权利要求1至7任一所述的方法。

10.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如权利要求1至7任一所述的方法。