【技术实现步骤摘要】
本申请涉及计算机，尤其涉及一种前端组件实现方法、装置、系统电子设备及存储介质。
技术介绍
1、随着web前端技术的发展，出现了大量应用广泛的技术栈，如vue，react，angularjs，layer ui，backbone，bootshrap等。它们的出现，丰富前端技术体系，促进了技术的进步，带来了前端技术圈的繁荣。但是，这些技术栈技术规范体系、语法风格和构建处理方法均不相同，用户在实际使用时，需要为每一种技术栈分别搭配配套的周边技术，代码存在冗余，维护成本高。
2、现有技术通常采用虚拟文档对象模型(virtual document object model，virtual dom)，将页面的状态抽象为js对象的形式，配合不同的渲染工具，实现了前端组件的跨平台渲染。但是这种virtual dom主要适用于单一的技术栈，例如vue，并不能进行跨技术栈的前端组件实现与渲染。
技术实现思路
1、本申请提供了一种前端组件实现方法、装置、系统、电子设备及可读存储介质。通过封装了阴影文档对象模型的底层封装层进行前端组件实现判断并将判断结果反馈给组件实现层，由组件实现层根据基于阴影文档对象模型构建的模板和样式进行前端组件实现，利用了封装阴影文档对象模型兼容性强的优势，解决了现有前端组件不能跨技术栈实现或渲染的问题。
2、第一方面，本申请提供了一种前端组件实现方法，该方法包括：
3、获取前端组件的属性变化结果；
4、根据所述属性变化结果和所述前端组
5、当所述属性更新判断结果为所述前端组件需要更新时，生成前端组件实现请求；
6、将所述前端组件实现请求发送给组件实现层，供组件实现层根据所述前端组件实现请求和所述前端组件的模板和所述前端组件的样式进行组件实现，得到前端组件实现结果，其中，所述模板为基于所述阴影文档对象模型构建并预先设置在所述组件实现层中的前端组件模板，所述样式为基于阴影文档对象模型构建并预先设置在所述组件实现层中的前端组件样式。
7、可选的，本申请提供的前端组件实现方法还包括：
8、对所述前端组件进行模板解析，得到模板解析结果；
9、对所述前端组件进行属性解析，得到属性解析结果；
10、根据所述模板解析结果和所述属性解析结果，为所述前端组件的模板和所述前端组件的属性建立关联，得到所述属性模板关联结果。
11、可选的，本申请提供的前端组件实现方法还包括：
12、根据所述属性解析结果对所述前端组件进行属性变化监听，得到属性变化结果。
13、可选的，本申请提供的前端组件实现方法还包括：
14、获取监听拦截请求，其中，所述监听拦截请求包括拦截属性名称和拦截属性数值；
15、根据所述拦截属性名称对所述变化属性名称进行屏蔽处理，得到拦截处理后的变化属性名称；
16、根据所述拦截属性数值对所述变化属性数值进行屏蔽处理，得到拦截处理后的变化属性数值。
17、可选的，本申请提供的前端组件实现方法还包括：
18、根据所述更新请求，通过所述渲染引擎生成阴影树和层叠样式表样式；
19、将所述更新请求、所述阴影树和所述层叠样式表样式发送给所述组件实现层，供所述组件实现层根据所述阴影树和所述层叠样式表样式对所述前端组件进行渲染，得到所述前端组件实现结果。
20、可选的，本申请提供的前端组件实现方法还包括：
21、通过所述模板解释器，根据所述前端组件的模板解析结果和属性解析结果生成阴影树；
22、通过所述样式管理器，根据所述前端组件的动态层叠样式表描述和动态层叠样式表属性，渲染得到中间层叠样式表；
23、将所述中间层叠样式表和所述静态层叠样式表合并，得到所述层叠样式表样式。
24、第二方面，本申请还提供一种前端组件实现装置，包括：
25、属性变化获取模块，用于获取前端组件的属性变化结果；
26、属性更新判断模块，用于根据所述属性变化结果和所述前端组件预先设置的属性模板关联结果进行属性更新判断，得到属性更新判断结果；
27、前端组件请求更新模块，用于当所述属性更新判断结果为所述前端组件需要更新时，生成前端组件实现请求；
28、前端组件实现模块，用于将所述前端组件实现请求发送给组件实现层，供组件实现层根据所述前端组件实现请求和所述前端组件的模板和所述前端组件的样式进行组件实现，得到前端组件实现结果，其中，所述模板为基于所述阴影文档对象模型构建并预先设置在所述组件实现层中的前端组件模板，所述样式为基于阴影文档对象模型构建并预先设置在所述组件实现层中的前端组件样式。
29、第三方面，本申请还提供一种前端组件实现系统，包括：
30、封装有阴影文档对象模型的底层封装层，用于获取前端组件的属性变化结果，根据所述属性变化结果和所述前端组件预先设置的属性模板关联结果进行属性更新判断，得到属性更新判断结果，当所述属性更新判断结果为所述前端组件需要更新时，生成前端组件实现请求，将所述前端组件实现请求发送给组件实现层；
31、所述组件实现层，用于接收所述底层封装层发送的前端组件实现请求，根据所述前端组件实现请求和所述前端组件的模板和所述前端组件的样式进行组件实现，得到前端组件实现结果，其中，所述模板为基于所述阴影文档对象模型构建并预先设置在所述组件实现层中的前端组件模板，所述样式为基于阴影文档对象模型构建并预先设置在所述组件实现层中的前端组件样式。
32、第四方面，本申请还提供了一种电子设备，该电子设备包括处理器和存储器，所述存储器存储可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如第一方面所述的前端组件实现方法的步骤。
33、第五方面，本申请实施例提供了一种可读存储介质，所述可读存储介质上存储程序或指令，所述程序或指令被处理器执行时实现如第一方面所述的前端组件实现方法的步骤。
34、本申请提供的技术方案中，由于本申请的底层封装层封装了阴影文档对象模型，而组件实现层中前端组件的模板和样式也同样基于阴影文档对象模型构建，利用了shadowdom兼容性强、能够支持主流服务器的特点，通过浏览器进行前端组件的跨技术栈实现与渲染动作。
35、并且，本申请提供的技术方案，还在组件实现层的基础上增设了封装了shadowdom的底层封装层，底层封装层能够进行前端组件的属性变化监控并判断是否需要进行前端组件实现或实现时生成对应指令，供组件实现层基于自身预设的前端组件模板和前端组件样式进行前端组件的实现动作，降低了组件实现层的开发难度，进而降低了用户使用shadow dom时的开发难度，改善了用户的开发体验。
36、上述说明仅是本申请提供的技术方案的概述，为了能够更清楚本文档来自技高网...
【技术保护点】
1.一种前端组件实现方法，其特征在于，应用于底层封装层，所述底层封装层封装有阴影文档对象模型，所述方法包括：
2.根据权利要求1所述的方法，其特征在于，所述获取前端组件的属性变化结果之前，还包括：
3.根据权利要求1所述的方法，其特征在于，所述根据所述模板解析结果和所述属性解析结果，为所述前端组件的模板和所述前端组件的属性建立关联，得到所述属性模板关联结果之后，还包括：
4.根据权利要求3所述的方法，其特征在于，所述属性变化结果包括变化属性名称和变化属性数值，所述对所述前端组件进行属性解析，得到属性解析结果之后，所述根据所述属性解析结果对所述前端组件进行属性变化监听，得到属性变化结果之前，还包括：
5.根据权利要求2所述的方法，其特征在于，所述底层封装层还包括渲染引擎，所述将所述前端组件实现请求发送给组件实现层，供组件实现层根据所述前端组件实现请求和所述前端组件的模板和所述前端组件的样式进行组件实现，得到前端组件实现结果包括：
6.根据权利要求5所述的方法，其特征在于，所述渲染引擎包括模板解释器和样式管理器，所述前端组件
7.一种前端组件实现装置，其特征在于，应用于底层封装层，所述底层封装层封装有阴影文档对象模型，包括：
8.一种前端组件实现系统，其特征在于，包括：
9.一种电子设备，其特征在于，包括处理器和存储器，所述存储器存储可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如权利要求1-7任一项所述的前端组件实现方法的步骤。
10.一种可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-7任一项所述的前端组件实现方法。
...【技术特征摘要】
1.一种前端组件实现方法，其特征在于，应用于底层封装层，所述底层封装层封装有阴影文档对象模型，所述方法包括：
2.根据权利要求1所述的方法，其特征在于，所述获取前端组件的属性变化结果之前，还包括：
3.根据权利要求1所述的方法，其特征在于，所述根据所述模板解析结果和所述属性解析结果，为所述前端组件的模板和所述前端组件的属性建立关联，得到所述属性模板关联结果之后，还包括：
4.根据权利要求3所述的方法，其特征在于，所述属性变化结果包括变化属性名称和变化属性数值，所述对所述前端组件进行属性解析，得到属性解析结果之后，所述根据所述属性解析结果对所述前端组件进行属性变化监听，得到属性变化结果之前，还包括：
5.根据权利要求2所述的方法，其特征在于，所述底层封装层还包括渲染引擎，所述将所述前端组件实现请求发送给组件实现层，供组件实现层根据所述前端组件实现请求和所述前端组件的...
【专利技术属性】
技术研发人员：姬照中，
申请(专利权)人：中国电信股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。