[发明专利]一种前端组件库构建方法、装置及存储介质

说明书

本发明涉及一种前端组件库构建方法、装置及存储介质，该方法包括以下步骤：构建底层处理模块，所述底层处理模块包括底层元素单元和可视化模型单元，所述底层元素单元用于初始化组件、挂载组件、卸载组件、触发绑定事件、管理组件状态及生命周期；所述可视化模型单元用于实现内部双向绑定；基于构建的底层处理模块，自定义组件，包括自定义DOM标签、自定义属性、自定义方法以及自定义样式，以此得到可用的组件库。与现有技术相比，本发明不依赖于开发框架，基于自定义DOM，能够为不同框架提供统一的使用方式，从而提高组件库的可复用性和可移植性、提高项目交付效率、降低开发测试和维护成本。

技术领域

本发明涉及计算机技术领域，尤其是涉及一种前端组件库构建方法、装置及存储介质。

背景技术

随着前端技术快速的发展，前端开发框架层出不穷，例如，JQuery、AngularJS、React、Vue.js等。同时也诞生了许多配套的组件库，例如：BootStrap、AntDesign、ElementUI等。可以说前端开发框架的演进推动着技术的快速前进，也带动着各种组件库的产生。

目前主流的前端组件库，都是伴随主流开发框架而生，即根据开发框架的特性，去编写实现方法和使用方式。因此，针对不同的项目，大多会选择不同前端开发框架，这是由于组件库都是伴随开发框架而生，所以需要选择不同的组件库。从开发角度来看，一方面，用户需要按照产品设计的要求去重新调整组件的一些表现及效果，这就导致需要多次进行二次开发；另一方面，使用不同的组件库，必然会增加额外的学习成本；此外，从测试角度来看，还需要在不同组件库上进行多次重复的测试，无疑会增加后续的维护成本。

综上可知，现有前端组件库过于依赖开发框架，其可复用性和可移植性较差，不能兼容不同的WEB开发框架，导致项目交付效率过低，不利于项目的开发、测试和维护。

发明内容

本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种前端组件库构建方法、装置及存储介质，以实现兼容不同WEB开发框架的目的，提高组件库的可复用性和可移植性。

本发明的目的可以通过以下技术方案来实现：一种前端组件库构建方法，包括以下步骤：

S1、构建底层处理模块，所述底层处理模块包括底层元素单元和可视化模型单元，所述底层元素单元用于初始化组件、挂载组件、卸载组件、触发绑定事件、管理组件状态及生命周期；

所述可视化模型单元用于实现内部双向绑定；

S2、基于构建的底层处理模块，自定义组件，包括自定义DOM标签、自定义属性、自定义方法以及自定义样式，以此得到可用的组件库。

进一步地，所述底层元素单元中设置有模板管理子单元和核心子单元，所述模板管理子单元用于对自定义元素的HTML模板集合处理，以及实现HTML与脚本的分离；

所述核心子单元用于统筹作用域、可视化模型以及底层处理模块之间的关系。

进一步地，所述核心子单元连接有事件总线，所述事件总线用于处理内部消息的传输。

进一步地，所述核心子单元中设置有监听器、作用域管理器以及组件管理器，所述作用域管理器和组件管理器均连接至可视化模型单元，所述监听器用于监听内部数据变化以及业务框架数据变化；

所述作用域管理器用于管理组件内部作用域，包括作用域生成和递归查找；

所述组件管理器基于各个自定义元素进行内部封装，以提供组件查找、数据处理和方法调用的功能。

进一步地，所述内部双向绑定包括单项绑定数据属性和双项绑定数据属性。

进一步地，所述单项绑定数据属性具体是通过对指定的作用域对象上的指定属性进行监听，当传入的作用域对象内的数据发生变化时，通知到组件内部并调用对应的属性方法，以完成内部逻辑和样式处理。