[发明专利]一种一键生成前端模块的方法及系统

说明书

本发明提供一种一键生成前端模块的方法，包括：接收模块生成请求，获取至少一个模块素材后，拆分细化所述模块素材的元素组件，将细化后的元素组件存入组件库中。为所述组件库中单一元素组件编写node指令。集成所述组件库中所述单一元素组件形成标准模板模块或者组合所述组件库中所述单一元素组件形成组合组件模块。为所述标准模板模块编写node指令。根据需要选择使用模板指令或组合组件指令生成模块。还提供一种一键生成前端模块的前端系统，包括请求接收模块，所述请求接收模块用于接收用户发出的模块生成请求，获取模块，细化模块，组件库模块，集成组合模块，选取模块，发送模块。

技术领域

本发明涉及计算机技术/前端开发/Angular，尤其涉及一种一键生成前端模块的方法及系统。

背景技术

随着前端三大框架的普及，适合多人团队协作的前端框架Angular被越来越多的公司使用。云帐房大多数项目使用的均是Angular。而现有基于Angular的UI框架所提供的组件以及视觉风格很难达公司的标准，有着大量需要开发人员二次开发或重新开发的组件。

现有的系统开发过程中常会出现以下技术问题：（1）同一系统各模块会产生不同的代码结构，不易维护；（2）同一系统不同的人员开发的模块会产生不一样的视觉效果，模块布局不规范；（3）重复功能模块重复开发，比如开发同一系统的不同模块时，各模块在功能实现、风格布局等方面均有相同或相似的地方，但在制作时仍然需要对每个模块逐一编写，需要做大量重复性操作，效率低下。

发明内容

本发明的目的是为了解决现有技术中存在的缺点，而提出的一种快速生成标准规范模块，解决前端系统快速构建模块问题，提升开发效率，优化开发人员单一职责的一键生成前端模块的方法及前端系统。

为实现上述目的，本发明采用了如下技术方案：一种一键生成前端模块的方法，包括：操作人员发送生成请求，接收模块生成请求，从模板素材库中获取至少一个模块素材后，拆分细化所述模块素材的元素组件，将细化后的元素组件存入组件库中。为所述组件库中单一元素组件编写node指令。集成所述组件库中所述单一元素组件形成标准模板模块或者组合所述组件库中所述单一元素组件形成组合组件模块。为所述标准模板模块编写node指令。根据需要选择使用模板指令或组合组件指令生成模块。

优选地，所述模块素材是UI高保真素材。

优选地，所述组合组件模块包括一个或多个所述单一元素组件。

拆分细化所述模块素材的元素组件，其拆解的过程遵循自上而下，化整为零的原则。分析页面元素之间的关系，将相对集中的元素合并在一起，形成组件。拆解的过程中也要遵循适度原则：组件不能太大，对于过大的组件，可以在迭代开发中逐渐拆解；组件也不适宜太小，琐碎或者层级过深的结构都不利于代码的阅读和理解，会增加未来维护的成本。

组件之间的通信根据组件关系采取不同的通信方式。

对于父子组件，使用直接通信的方式。父组件持有并使用子组件的视图，所以父组件知道子组件的类型，可以通过子组件的构造函数，设置属性或者调用方法，直接传递消息给子组件。子组件虽然不知道自己父组件的具体类型，但可以通过block或者delegate的方式，将自己内部的消息转发给使用自己的父组件。

对于父组件采用“父组件 = 子组件 = ... = 子组件”跨层级通信的方式，如果按照上面父子组件通信方式层层传递，比较繁琐，胶水代码也较多。但是如果放开通信限制，允许任意组件之间进行网状通信，工程的复杂度会随着组件数量的增加，爆炸性增长。因此，我们提供一种单向的，有明确数据类型的状态同步机制。在组件树上的某一个节点作为状态的提供者(Provider)，它子树上的组件，可以作为消费者(Consumer)去注册监听这个提供者状态的变化，当状态发生变化的时候，消费者可以收到消息。概况的说是Provider提供共享状态，负责更新状态，Consumer 监听Provider状态的变化，对共享状态只读。