一种一键生成前端模块的方法及系统技术方案

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

A method and system of generating front module with one key

【技术实现步骤摘要】
一种一键生成前端模块的方法及系统
本专利技术涉及计算机技术/前端开发/Angular，尤其涉及一种一键生成前端模块的方法及系统。
技术介绍
随着前端三大框架的普及，适合多人团队协作的前端框架Angular被越来越多的公司使用。云帐房大多数项目使用的均是Angular。而现有基于Angular的UI框架所提供的组件以及视觉风格很难达公司的标准，有着大量需要开发人员二次开发或重新开发的组件。现有的系统开发过程中常会出现以下技术问题：（1）同一系统各模块会产生不同的代码结构，不易维护；（2）同一系统不同的人员开发的模块会产生不一样的视觉效果，模块布局不规范；（3）重复功能模块重复开发，比如开发同一系统的不同模块时，各模块在功能实现、风格布局等方面均有相同或相似的地方，但在制作时仍然需要对每个模块逐一编写，需要做大量重复性操作，效率低下。
技术实现思路
本专利技术的目的是为了解决现有技术中存在的缺点，而提出的一种快速生成标准规范模块，解决前端系统快速构建模块问题，提升开发效率，优化开发人员单一职责的一键生成前端模块的方法及前端系统。为实现上述目的，本专利技术采用了如下技术方案：一种一键生成前端模块的方法，包括：操作人员发送生成请求，接收模块生成请求，从模板素材库中获取至少一个模块素材后，拆分细化所述模块素材的元素组件，将细化后的元素组件存入组件库中。为所述组件库中单一元素组件编写node指令。集成所述组件库中所述单一元素组件形成标准模板模块或者组合所述组件库中所述单一元素组件形成组合组件模块。为所述标准模板模块编写node指令。根据需要选择使用模板指令或组合组件指令生成模块。优选地，所述模块素材是UI高保真素材。优选地，所述组合组件模块包括一个或多个所述单一元素组件。拆分细化所述模块素材的元素组件，其拆解的过程遵循自上而下，化整为零的原则。分析页面元素之间的关系，将相对集中的元素合并在一起，形成组件。拆解的过程中也要遵循适度原则：组件不能太大，对于过大的组件，可以在迭代开发中逐渐拆解；组件也不适宜太小，琐碎或者层级过深的结构都不利于代码的阅读和理解，会增加未来维护的成本。组件之间的通信根据组件关系采取不同的通信方式。对于父子组件，使用直接通信的方式。父组件持有并使用子组件的视图，所以父组件知道子组件的类型，可以通过子组件的构造函数，设置属性或者调用方法，直接传递消息给子组件。子组件虽然不知道自己父组件的具体类型，但可以通过block或者delegate的方式，将自己内部的消息转发给使用自己的父组件。对于父组件采用“父组件=>子组件=>...=>子组件”跨层级通信的方式，如果按照上面父子组件通信方式层层传递，比较繁琐，胶水代码也较多。但是如果放开通信限制，允许任意组件之间进行网状通信，工程的复杂度会随着组件数量的增加，爆炸性增长。因此，我们提供一种单向的，有明确数据类型的状态同步机制。在组件树上的某一个节点作为状态的提供者(Provider)，它子树上的组件，可以作为消费者(Consumer)去注册监听这个提供者状态的变化，当状态发生变化的时候，消费者可以收到消息。概况的说是Provider提供共享状态，负责更新状态，Consumer监听Provider状态的变化，对共享状态只读。有了协议声明，那如何建立起来状态变化的监听呢，在具体实现上，我们采用了kvo的方式，即在构建组件树的同时，runtime去判断这个组件是否是某一Context的Provider或者Consumer。如果判断成功，则建立相应的kvo监听。这样，在Provider组件修改自身某一状态的时候，监听它的Consumer便可以收到状态变化的消息。对于更复杂的，需要组件间联动来完成某一功能的需求，比如点击一个按钮，带来页面内不同层级的几个组件的UI变化。可以通过ContextProviderConsumer模式，设计一个状态，当子组件的按钮被点击之后，发送消息给Provider，Provider更改状态，之后所有Consumer收到状态变化的消息，自己处理自身的变化。本专利技术还提供一种一键生成前端模块的前端系统，包括请求接收模块，所述请求接收模块用于接收用户发出的模块生成请求。获取模块，用于根据客户发送的模块生成请求获取相应的模块素材。细化模块，所述细化模块与所述获取模块数据连接，用于拆分细化所述获取模块素材中的元素组件。组件库模块，所述组件库模块与所述细化模块数据连接，用于储存细化后的元素组件。集成组合模块，包括集成模板模块和组合组件模块，所述集成组合模块与所述组件库模块数据相连，所述集成模板模块用于集成所述组件库中的单一元素组件形成标准模块模板，所述组合组件模块用于组合所述组件库中的单一组件形成组合组件模板。选取模块，用于根据需要选取相对应的所述标准模块模板或者组合组件模板。发送模块，所述发送模块与所述选取模块数据连接，将所述选取模块选取的标准模块模板或者组合组件模板发送给服务器，使服务器生成与所述模块生成请求相对应的模块。优选地，包括一个模板库模块，所述模板库模块与所述集成组合模块数据相连接，用于储存所述集成组合模块生成的标准模块模板和组合组件模板。优选地，所述模板库模块与所述选取模块数据连接，所述选取模块从所述模板库模块中选取所述标准模块模板或组合组件模板。优选地，所述组件库模块中的元素组件为独立元素组件。优选地，所述模板库模块中的标准模块模板和组合组件模板都为独立模板。与现有技术相比，本专利技术的有益效果为：本专利技术提供一种一键生成前端模块的方法，首先接收用户模块生成请求，获取至少一个模块素材后，拆分细化所述模块素材的元素组件，将细化后的元素组件存入组件库中。为所述组件库中单一元素组件编写node指令。集成所述组件库中所述单一元素组件形成标准模板模块或者组合所述组件库中所述单一元素组件形成组合组件模块。为所述标准模板模块编写node指令，根据需要选择使用模板指令或组合组件指令生成模块。（1）本专利技术首先集成标准模板模块，选择使用模板指令，能够快速生成标准规范模块应用，解决系统快速构建模块问题；（2）同一系统的不同模块时，各模块在功能实现、风格布局等方面均有相同或相似的地方，本技术不需对每个网页逐一编写，做大量重复性操作，仅需将获取的相对应的网页素材各元素组件拆分细化，集成标准模板模块，并储存在模板库中，使用选取模板指令，即可直接匹配相对应的模块，提升开发效率，优化开发人员单一职责。（3）本专利技术的模块生成系统中具有组合组件模块，所述组合组件模块用于组合所述组件库中的单一组件形成组合组件模板，并储存在模板库模块中，选取模块根据需要选取对应的组合组件模板，该组合组件模板可以是由单个元素组件或多个元素组件构成，扩大了生成模块的范围，同时也增强了生成模块的灵活性，使生成的模块不仅仅局限于标准模板。附图说明图1为本专利技术实施例1的一种一键生成前端模块的方法流程示意图；图2为本发本文档来自技高网...

【技术保护点】
1.一种一键生成前端模块的方法，其特征在于：包括：/n接收模块生成请求，获取至少一个模块素材后，拆分细化所述模块素材的元素组件，将细化后的元素组件存入组件库中；/n为所述组件库中单一元素组件编写node指令；/n集成所述组件库中所述单一元素组件形成标准模板模块或者组合所述组件库中所述单一元素组件形成组合组件模块；/n为所述标准模板模块编写node指令；/n根据需要选择使用模板指令或组合组件指令生成模块。/n

【技术特征摘要】
1.一种一键生成前端模块的方法，其特征在于：包括：
接收模块生成请求，获取至少一个模块素材后，拆分细化所述模块素材的元素组件，将细化后的元素组件存入组件库中；
为所述组件库中单一元素组件编写node指令；
集成所述组件库中所述单一元素组件形成标准模板模块或者组合所述组件库中所述单一元素组件形成组合组件模块；
为所述标准模板模块编写node指令；
根据需要选择使用模板指令或组合组件指令生成模块。


2.如权利要求1所述的一种一键生成前端模块的方法，其特征在于：所述模块素材是UI高保真素材。


3.如权利要求1所述的一种一键生成前端模块的方法，其特征在于：所述组合组件模块包括一个或多个所述单一元素组件。


4.一种一键生成前端模块的前端系统，其特征在于：包括请求接收模块，所述请求接收模块用于接收用户发出的模块生成请求；
获取模块，用于根据客户发送的模块生成请求获取相应的模块素材；
细化模块，所述细化模块与所述获取模块数据连接，用于拆分细化所述获取模块素材中的元素组件；
组件库模块，所述组件库模块与所述细化模块数据连接，用于储存细化后的元素组件。


5.集成组合模块，包括集成模板...

【专利技术属性】
技术研发人员：王淼，吴金强，
申请(专利权)人：南京云帐房网络科技有限公司，
类型：发明
国别省市：江苏;32