基于组件元数据的可视化设计方法和装置.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN112286513A(43)申请公布日2021.01.29(21)申请号201910665741.4(22)申请日2019.07.23(71)申请人北京京东尚科信息技术有限公司地址100086北京市海淀区知春路76号8层申请人北京京东世纪贸易有限公司(72)发明人袁昌龙刘海锋白圣培(74)专利代理机构中原信达知识产权代理有限责任公司11219代理人张一军张效荣(51)Int.Cl.G06F8/34(2018.01)G06F8/38(2018.01)G06F8/36(2018.01)权利要求书2页说明书13页附图4页(54)发明名称基于组件元数据的可视化设计方法和装置(57)摘要本发明公开了一种基于组件元数据的可视化设计方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：从组件元数据库中获取模板组件的元数据，根据所述模板组件的元数据渲染所述模板组件；实例化所述模板组件的元数据得到目标组件的元数据，实时监听所述目标组件的元数据；当所述目标组件的元数据发生变化时，根据变化后所述目标组件的元数据重新渲染所述模板组件得到所述目标组件，实现可视化设计。该实施方式能够基于现有的组件组装成新的组件，实现组件库的个性化定制，灵活、快速的完成页面搭建。CN112286513ACN112286513A权利要求书1/2页1.一种基于组件元数据的可视化设计方法，其特征在于，包括：从组件元数据库中获取模板组件的元数据，根据所述模板组件的元数据渲染所述模板组件；实例化所述模板组件的元数据得到目标组件的元数据，实时监听所述目标组件的元数据；当所述目标组件的元数据发生变化时，根据变化后所述目标组件的元数据重新渲染所述模板组件得到所述目标组件，实现可视化设计。2.如权利要求1所述的可视化设计方法，其特征在于，所述元数据包括：属性元数据、事件元数据和插槽元数据；实时监听所述目标组件的元数据，包括：从所述目标组件的元数据中抽取属性元数据与属性表单双向绑定，实时监听所述属性表单，当所述属性表单被修改时，同步修改所述目标组件的元数据。3.如权利要求2所述的可视化设计方法，其特征在于，实时监听所述目标组件的元数据，还包括：将所述目标组件的元数据与数据源表单双向绑定，实时监听所述数据源表单，当所述数据源表单被修改时，将修改后的所述数据源表单合并至所述目标组件的元数据中。4.如权利要求1-3任一所述的可视化设计方法，其特征在于，得到所述目标组件之后，还包括：以所述目标组件作为新的模板组件，将所述目标组件的元数据写入所述组件元数据库。5.如权利要求1-3任一所述的可视化设计方法，其特征在于，得到所述目标组件之后，还包括：根据所述模板组件的属性元数据和事件元数据拼接模板字符串；遍历所述模板组件的每个插槽，若所述插槽的内容是html或字符串，则将所述插槽的内容直接作为文本内容拼接到所述模板字符串中；若所述插槽的内容是子组件，则查找所述子组件的元数据，然后根据所述子组件的属性元数据和事件元数据拼接所述子组件的字符串，并将所述子组件的字符串拼接到所述模板字符串中，得到所述目标组件的模板字符串源代码；将所述目标组件的模板字符串源代码套入前端框架的代码模板中得到所述目标组件的源代码。6.一种基于组件元数据的可视化设计装置，其特征在于，包括：组件获取模块，从组件元数据库中获取模板组件的元数据，根据所述模板组件的元数据渲染所述模板组件；数据监听模块，实例化所述模板组件的元数据得到目标组件的元数据，实时监听所述目标组件的元数据；组件渲染模块，当所述目标组件的元数据发生变化时，根据变化后所述目标组件的元数据重新渲染所述模板组件得到所述目标组件，实现可视化设计。7.如权利要求6所述的可视化设计装置，其特征在于，所述元数据包括：属性元数据、事件元数据和插槽元数据；实时监听所述目标组件的元数据，包括：从所述目标组件的元数据中抽取属性元数据2CN112286513A权利要求书2/2页与属性表单双向绑定，实时监听所述属性表单，当所述属性表单被修改时，同步修改所述目标组件的元数据。8.如权利要求7所述的可视化设计装置，其特征在于，实时监听所述目标组件的元数据，还包括：将所述目标组件的元数据与数据源表单双向绑定，实时监听所述数据源表单，当所述数据源表单被修改时，将修改后的所述数据源表单合并至所述目标组件的元数据中。9.一种基于组件元数据的可视化设计电子设备，其特征在于，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要