本发明专利技术公开了一种基于组件元数据的可视化设计方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：从组件元数据库中获取模板组件的元数据，根据所述模板组件的元数据渲染所述模板组件；实例化所述模板组件的元数据得到目标组件的元数据，实时监听所述目标组件的元数据；当所述目标组件的元数据发生变化时，根据变化后所述目标组件的元数据重新渲染所述模板组件得到所述目标组件，实现可视化设计。该实施方式能够基于现有的组件组装成新的组件，实现组件库的个性化定制，灵活、快速的完成页面搭建。完成页面搭建。完成页面搭建。
【技术实现步骤摘要】
基于组件元数据的可视化设计方法和装置
[0001]本专利技术涉及计算机
，尤其涉及一种基于组件元数据的可视化设计方法和装置。
技术介绍
[0002]现在前端项目的开发流程是：首先，由产品经理输出PRD产品需求文档(Product Requirement Document,产品需求文档)和产品原型稿；然后UI(User Interface，用户界面)设计师使用Photoshop、Sketch等工具对产品原型进行美化，产出UI设计稿；接着，前端工程师对UI设计稿进行切图，然后搭建页面html(Hyper Text Markup Language，超级文本标记语言)结构，编写CSS(Cascading Style Sheets，层叠样式表)样式代码，力求100％还原设计稿；在还原设计稿之后，最后实现页面的业务逻辑并与后端进行接口联调，完成单个页面直至整个项目的开发。
[0003]在实现本专利技术过程中，专利技术人发现现有技术中至少存在如下问题：
[0004](1)现有的可视化编辑装置只支持从零开始拖拽组件进行设计，不能基于现有的组件组装成新的组件，并且不支持组件库的个性化定制；
[0005](2)现有的可视化编辑装置的页面布局方式要么基于栅格布局，要么需要“预先定制页面模板”，不够灵活多样；
[0006](3)现有的可视化装置专利技术的目的是主要为了帮助产品经理完成原型制作，而非协助UI设计师的完成UI设计工作。这样制作出来的页面不能立刻作为前端开发在此基础上进行二次开发的实际页面，因为产品经理可能需要不断的修改，UI设计师也会对这些初始设计结果进行美化调整，而如果在此基础之上进行二次开发，就会导致前端开发不断返工，重写页面代码，严重影响前端的开发效率和开发进度；
[0007](4)现有的可视化复用方法仅仅可以拖拽组件去设计页面，不可以拖拽多个组件组合或聚合成一个新的组件，在复用性上比较封闭。
技术实现思路
[0008]有鉴于此，本专利技术实施例提供一种基于组件元数据的可视化设计方法和装置，能够基于现有的组件组装成新的组件，实现组件库的个性化定制，灵活、快速的完成页面搭建。
[0009]根据本专利技术实施例的第一方面，提供一种基于组件元数据的可视化设计方法。
[0010]根据本专利技术实施例的基于组件元数据的可视化设计方法，包括：
[0011]从组件元数据库中获取模板组件的元数据，根据所述模板组件的元数据渲染所述模板组件；
[0012]实例化所述模板组件的元数据得到目标组件的元数据，实时监听所述目标组件的元数据；
[0013]当所述目标组件的元数据发生变化时，根据变化后所述目标组件的元数据重新渲
染所述模板组件得到所述目标组件，实现可视化设计。
[0014]可选地，所述元数据包括：属性元数据、事件元数据和插槽元数据；
[0015]实时监听所述目标组件的元数据，包括：从所述目标组件的元数据中抽取属性元数据与属性表单双向绑定，实时监听所述属性表单，当所述属性表单被修改时，同步修改所述目标组件的元数据。
[0016]可选地，实时监听所述目标组件的元数据，还包括：将所述目标组件的元数据与数据源表单双向绑定，实时监听所述数据源表单，当所述数据源表单被修改时，将修改后的所述数据源表单合并至所述目标组件的元数据中。
[0017]可选地，得到所述目标组件之后，还包括：以所述目标组件作为新的模板组件，将所述目标组件的元数据写入所述组件元数据库。
[0018]可选地，得到所述目标组件之后，还包括：
[0019]根据所述模板组件的属性元数据和事件元数据拼接模板字符串；
[0020]遍历所述模板组件的每个插槽，若所述插槽的内容是html或字符串，则将所述插槽的内容直接作为文本内容拼接到所述模板字符串中；若所述插槽的内容是子组件，则查找所述子组件的元数据，然后根据所述子组件的属性元数据和事件元数据拼接所述子组件的字符串，并将所述子组件的字符串拼接到所述模板字符串中，得到所述目标组件的模板字符串源代码；
[0021]将所述目标组件的模板字符串源代码套入前端框架的代码模板中得到所述目标组件的源代码。
[0022]根据本专利技术实施例的第二方面，提供一种基于组件元数据的可视化设计装置。
[0023]根据本专利技术实施例的基于组件元数据的可视化设计装置，包括：
[0024]组件获取模块，从组件元数据库中获取模板组件的元数据，根据所述模板组件的元数据渲染所述模板组件；
[0025]数据监听模块，实例化所述模板组件的元数据得到目标组件的元数据，实时监听所述目标组件的元数据；
[0026]组件渲染模块，当所述目标组件的元数据发生变化时，根据变化后所述目标组件的元数据重新渲染所述模板组件得到所述目标组件，实现可视化设计。
[0027]可选地，所述元数据包括：属性元数据、事件元数据和插槽元数据；
[0028]实时监听所述目标组件的元数据，包括：从所述目标组件的元数据中抽取属性元数据与属性表单双向绑定，实时监听所述属性表单，当所述属性表单被修改时，同步修改所述目标组件的元数据。
[0029]可选地，实时监听所述目标组件的元数据，还包括：将所述目标组件的元数据与数据源表单双向绑定，实时监听所述数据源表单，当所述数据源表单被修改时，将修改后的所述数据源表单合并至所述目标组件的元数据中。
[0030]可选地，可视化设计装置还包括组件保存模块，用于：得到所述目标组件之后，以所述目标组件作为新的模板组件，将所述目标组件的元数据写入所述组件元数据库。
[0031]可选地，所述装置还包括：代码生成模块，用于：得到所述目标组件之后，
[0032]根据所述模板组件的属性元数据和事件元数据拼接模板字符串；
[0033]遍历所述模板组件的每个插槽，若所述插槽的内容是html或字符串，则将所述插
槽的内容直接作为文本内容拼接到所述模板字符串中；若所述插槽的内容是子组件，则查找所述子组件的元数据，然后根据所述子组件的属性元数据和事件元数据拼接所述子组件的字符串，并将所述子组件的字符串拼接到所述模板字符串中，得到所述目标组件的模板字符串源代码；
[0034]将所述目标组件的模板字符串源代码套入前端框架的代码模板中得到所述目标组件的源代码。
[0035]根据本专利技术实施例的第三方面，提供一种基于组件元数据的可视化设计电子设备。
[0036]根据本专利技术实施例的基于组件元数据的可视化设计电子设备，包括：
[0037]一个或多个处理器；
[0038]存储装置，用于存储一个或多个程序，
[0039]当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本专利技术实施例第一方面提供的可视化设计方法。
[0040]根据本专利技术实施例的第四方面，提供一种计算机可读介质。
[0041]根据本专利技术实施例的计算机可读介质，其上存储有计本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种基于组件元数据的可视化设计方法，其特征在于，包括：从组件元数据库中获取模板组件的元数据，根据所述模板组件的元数据渲染所述模板组件；实例化所述模板组件的元数据得到目标组件的元数据，实时监听所述目标组件的元数据；当所述目标组件的元数据发生变化时，根据变化后所述目标组件的元数据重新渲染所述模板组件得到所述目标组件，实现可视化设计。2.如权利要求1所述的可视化设计方法，其特征在于，所述元数据包括：属性元数据、事件元数据和插槽元数据；实时监听所述目标组件的元数据，包括：从所述目标组件的元数据中抽取属性元数据与属性表单双向绑定，实时监听所述属性表单，当所述属性表单被修改时，同步修改所述目标组件的元数据。3.如权利要求2所述的可视化设计方法，其特征在于，实时监听所述目标组件的元数据，还包括：将所述目标组件的元数据与数据源表单双向绑定，实时监听所述数据源表单，当所述数据源表单被修改时，将修改后的所述数据源表单合并至所述目标组件的元数据中。4.如权利要求1-3任一所述的可视化设计方法，其特征在于，得到所述目标组件之后，还包括：以所述目标组件作为新的模板组件，将所述目标组件的元数据写入所述组件元数据库。5.如权利要求1-3任一所述的可视化设计方法，其特征在于，得到所述目标组件之后，还包括：根据所述模板组件的属性元数据和事件元数据拼接模板字符串；遍历所述模板组件的每个插槽，若所述插槽的内容是html或字符串，则将所述插槽的内容直接作为文本内容拼接到所述模板字符串中；若所述插槽的内容是子组件，则查找所述子组件的元数据，然后根据所述子组件的属性元数据和事件元数据拼接所述子组件的字符串，并将所述子组件...
【专利技术属性】
技术研发人员：袁昌龙，刘海锋，白圣培，
申请(专利权)人：北京京东世纪贸易有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。