[发明专利]一种layui框架封装的兼容方法、系统、设备及存储介质

说明书

本申请公开了一种layui框架封装的兼容的方法，用以解决现有的layui框架封装时无法适配移动端和PC端兼容的技术问题。方法包括：搭建layui前端框架；对所述layui前端框架的底层功能进行重新封装，并对所述layui前端框架中的列表和栏目进行配置；调用封装后的所述layui前端框架，并匹配多种设备的样式对所述layui前端框架进行页面渲染。本申请通过上述方法实现了对layui底层功能进行重新封装，并对表单进行重新渲染，实现了在不同设备型号下对手持端和PC端前端页面进行兼容。实现减少对轻量级web的开发时，不同设备需要不同前端方案的技术问题，使用更加轻量化的前端框架进行编写，提高了开发的效率，增强了用户体验感。

技术领域

本申请涉及编程技术领域，尤其涉及一种layui框架封装的兼容方法、系统、设备及存储介质。

背景技术

layui更多的是面向后端开发者，它区别于那些基于MVVM(Model-View-ViewModel，对象-界面-类)底层的前端框架，在组织形式上采用了几年前的以浏览器为宿主的类AMD(Asynchronous Module Definition，异步模块定义)模块管理方式，却又并非受限于CommonJS的那些条条框框。

在基础的配置上进行再次封装时，需要对封装的新配置进行多种设备的测试，根据设备的不同，生成不同的配置方案。但是layui后台模块缺少一款同时适用于移动端和PC端的适配方案。在使用轻量级前端框架时，手持端和PC端兼容的工作一直是需要做两种不同的端口，这是一份庞大的工作量。

发明内容

本申请实施例提供了一种layui框架封装的兼容方法、系统、设备及存储介质，用以解决现有的layui框架封装时无法适配移动端和PC端兼容的技术问题。

一方面，本申请实施例提供了一种layui框架封装的兼容方法，所述方法包括：搭建layui前端框架；

对所述layui前端框架的底层功能进行重新封装，并对所述layui前端框架中的列表和栏目进行配置。

调用封装后的所述layui前端框架，并匹配多种设备的样式对所述layui前端框架进行页面渲染。

在本申请的一种实现方式中，在所述对所述layui前端框架中的列表和栏目进行配置之后，所述方法还包括：监听导航中的事件。

对所述导航中的事件进行重新封装和改写。

监测新的点击事件，执行对应的重新封装和改写后的导航事件。

在本申请的一种实现方式中，所述对所述layui前端框架中的列表和栏目进行配置，具体包括：确定所述layui前端框架中的列表和栏目中的各种基础功能。

在导航和/或对应页面引用相应的封装配置。

基于所述封装配置完成所述layui前端框架中的列表和栏目中基础功能的编写和封装。

在本申请的一种实现方式中，所述进行页面渲染，具体包括：

获取HTML(Hyper Text Markup Language，超文本标记语言)源码，并创建DOM(Document Object Model，文档对象模型)树；所述DOM树根节点对应HTML标签。

解析CSS(Cascading Style Sheets，层叠样式表)代码，并计算最终样式，继而构建CSSOM(Cascading Style Sheets Object Model，层叠样式对象模型)树。

基于所述DOM树以及所述CSSOM树，生成渲染树。

根据所述渲染树绘制前端页面。

在本申请的一种实现方式中，所述layui前端框架的底层功能包括：编辑、刷新、添加、排序、批量操作。