[發(fā)明專利]一種一鍵生成前端模塊的方法及系統(tǒng)

在審

• 申請?zhí)枺?/td>: 201911386815.7
• 申請日: 2019-12-29
• 公開（公告）號: CN111221524A
• 公開（公告）日: 2020-06-02
• 發(fā)明（設(shè)計(jì)）人: 王淼;吳金強(qiáng)
• 申請（專利權(quán)）人: 南京云帳房網(wǎng)絡(luò)科技有限公司
• 主分類號: G06F8/35
• 分類號: G06F8/35;G06F8/36
• 代理公司: 南京科知維創(chuàng)知識產(chǎn)權(quán)代理有限責(zé)任公司 32270
• 代理人: 杜依民

本發(fā)明提供一種一鍵生成前端模塊的方法，包括：接收模塊生成請求，獲取至少一個模塊素材后，拆分細(xì)化所述模塊素材的元素組件，將細(xì)化后的元素組件存入組件庫中。為所述組件庫中單一元素組件編寫node指令。集成所述組件庫中所述單一元素組件形成標(biāo)準(zhǔn)模板模塊或者組合所述組件庫中所述單一元素組件形成組合組件模塊。為所述標(biāo)準(zhǔn)模板模塊編寫node指令。根據(jù)需要選擇使用模板指令或組合組件指令生成模塊。還提供一種一鍵生成前端模塊的前端系統(tǒng)，包括請求接收模塊，所述請求接收模塊用于接收用戶發(fā)出的模塊生成請求，獲取模塊，細(xì)化模塊，組件庫模塊，集成組合模塊，選取模塊，發(fā)送模塊。

技術(shù)領(lǐng)域

本發(fā)明涉及計(jì)算機(jī)技術(shù)/前端開發(fā)/Angular，尤其涉及一種一鍵生成前端模塊的方法及系統(tǒng)。

背景技術(shù)

隨著前端三大框架的普及，適合多人團(tuán)隊(duì)協(xié)作的前端框架Angular被越來越多的公司使用。云帳房大多數(shù)項(xiàng)目使用的均是Angular。而現(xiàn)有基于Angular的UI框架所提供的組件以及視覺風(fēng)格很難達(dá)公司的標(biāo)準(zhǔn)，有著大量需要開發(fā)人員二次開發(fā)或重新開發(fā)的組件。

現(xiàn)有的系統(tǒng)開發(fā)過程中常會出現(xiàn)以下技術(shù)問題：（1）同一系統(tǒng)各模塊會產(chǎn)生不同的代碼結(jié)構(gòu)，不易維護(hù)；（2）同一系統(tǒng)不同的人員開發(fā)的模塊會產(chǎn)生不一樣的視覺效果，模塊布局不規(guī)范；（3）重復(fù)功能模塊重復(fù)開發(fā)，比如開發(fā)同一系統(tǒng)的不同模塊時，各模塊在功能實(shí)現(xiàn)、風(fēng)格布局等方面均有相同或相似的地方，但在制作時仍然需要對每個模塊逐一編寫，需要做大量重復(fù)性操作，效率低下。

發(fā)明內(nèi)容

本發(fā)明的目的是為了解決現(xiàn)有技術(shù)中存在的缺點(diǎn)，而提出的一種快速生成標(biāo)準(zhǔn)規(guī)范模塊，解決前端系統(tǒng)快速構(gòu)建模塊問題，提升開發(fā)效率，優(yōu)化開發(fā)人員單一職責(zé)的一鍵生成前端模塊的方法及前端系統(tǒng)。

為實(shí)現(xiàn)上述目的，本發(fā)明采用了如下技術(shù)方案：一種一鍵生成前端模塊的方法，包括：操作人員發(fā)送生成請求，接收模塊生成請求，從模板素材庫中獲取至少一個模塊素材后，拆分細(xì)化所述模塊素材的元素組件，將細(xì)化后的元素組件存入組件庫中。為所述組件庫中單一元素組件編寫node指令。集成所述組件庫中所述單一元素組件形成標(biāo)準(zhǔn)模板模塊或者組合所述組件庫中所述單一元素組件形成組合組件模塊。為所述標(biāo)準(zhǔn)模板模塊編寫node指令。根據(jù)需要選擇使用模板指令或組合組件指令生成模塊。

優(yōu)選地，所述模塊素材是UI高保真素材。

優(yōu)選地，所述組合組件模塊包括一個或多個所述單一元素組件。

拆分細(xì)化所述模塊素材的元素組件，其拆解的過程遵循自上而下，化整為零的原則。分析頁面元素之間的關(guān)系，將相對集中的元素合并在一起，形成組件。拆解的過程中也要遵循適度原則：組件不能太大，對于過大的組件，可以在迭代開發(fā)中逐漸拆解；組件也不適宜太小，瑣碎或者層級過深的結(jié)構(gòu)都不利于代碼的閱讀和理解，會增加未來維護(hù)的成本。

組件之間的通信根據(jù)組件關(guān)系采取不同的通信方式。

對于父子組件，使用直接通信的方式。父組件持有并使用子組件的視圖，所以父組件知道子組件的類型，可以通過子組件的構(gòu)造函數(shù)，設(shè)置屬性或者調(diào)用方法，直接傳遞消息給子組件。子組件雖然不知道自己父組件的具體類型，但可以通過block或者delegate的方式，將自己內(nèi)部的消息轉(zhuǎn)發(fā)給使用自己的父組件。

對于父組件采用“父組件 = 子組件 = ... = 子組件”跨層級通信的方式，如果按照上面父子組件通信方式層層傳遞，比較繁瑣，膠水代碼也較多。但是如果放開通信限制，允許任意組件之間進(jìn)行網(wǎng)狀通信，工程的復(fù)雜度會隨著組件數(shù)量的增加，爆炸性增長。因此，我們提供一種單向的，有明確數(shù)據(jù)類型的狀態(tài)同步機(jī)制。在組件樹上的某一個節(jié)點(diǎn)作為狀態(tài)的提供者(Provider)，它子樹上的組件，可以作為消費(fèi)者(Consumer)去注冊監(jiān)聽這個提供者狀態(tài)的變化，當(dāng)狀態(tài)發(fā)生變化的時候，消費(fèi)者可以收到消息。概況的說是Provider提供共享狀態(tài)，負(fù)責(zé)更新狀態(tài)，Consumer 監(jiān)聽Provider狀態(tài)的變化，對共享狀態(tài)只讀。