[發(fā)明專利]一種前端代碼生成方法

在審

• 申請?zhí)枺?/td>: 201911174132.5
• 申請日: 2019-11-26
• 公開（公告）號: CN111124380A
• 公開（公告）日: 2020-05-08
• 發(fā)明（設(shè)計(jì)）人: 王沖;徐偉鋒;王開放;周鑫
• 申請（專利權(quán)）人: 江蘇艾佳家居用品有限公司
• 主分類號: G06F8/30
• 分類號: G06F8/30;G06F8/33
• 代理公司: 南京正聯(lián)知識產(chǎn)權(quán)代理有限公司 32243
• 代理人: 鄧唯

本發(fā)明公開了一種前端代碼生成方法，涉及軟件系統(tǒng)技術(shù)領(lǐng)域，具體包含步驟如下：將UI工程師提供的設(shè)計(jì)圖原稿,一鍵生成標(biāo)準(zhǔn)前端樣式代碼，并可在線編輯頁面樣式，代碼實(shí)時生成最新；自動生成前端所需的代碼，提高了前端代碼生成效率，進(jìn)而提高了前端開發(fā)的效率。在線編輯靜態(tài)頁樣式，代碼實(shí)時生成最新；從而提高代碼規(guī)范和開發(fā)效率；本發(fā)明可快速生成前端靜態(tài)頁面代碼，省去人員的開發(fā)，并且可在線編輯及修改頁面樣式，大大提高效率；本發(fā)明快速生成業(yè)務(wù)代碼。實(shí)現(xiàn)代碼風(fēng)格統(tǒng)一和結(jié)構(gòu)統(tǒng)一，便于維護(hù)開發(fā)代碼。

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

本發(fā)明屬于軟件系統(tǒng)技術(shù)領(lǐng)域，尤其涉及一種前端代碼生成方法。

背景技術(shù)

現(xiàn)在正常前端開發(fā)流程-由設(shè)計(jì)師出 UI設(shè)計(jì)圖、小前端編寫靜態(tài)頁面。頁面邏輯相同。工作量重復(fù)且開發(fā)效率低。通請本文發(fā)明公開了一種自動生成前端靜態(tài)頁代碼的方法。

現(xiàn)在前端開發(fā)存在的問題：

1.前端編寫靜態(tài)頁面，頁面編寫規(guī)則相同。重復(fù)勞動效率。

2.每個前端開發(fā)人員的代碼風(fēng)格和編寫方式不一致。代碼可讀性差。導(dǎo)致后期其它員工維護(hù)成本高。

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

本發(fā)明所要解決的技術(shù)問題是針對背景技術(shù)的不足提供一種前端代碼生成方法，其實(shí)現(xiàn)一鍵生成標(biāo)準(zhǔn)業(yè)務(wù)模塊代碼，及待處理細(xì)節(jié)代碼模塊。在線編輯靜態(tài)頁樣式，代碼實(shí)時生成最新；從而提高代碼規(guī)范和開發(fā)效率。

本發(fā)明為解決上述技術(shù)問題采用以下技術(shù)方案

一種前端代碼生成方法，具體包含如下步驟；

步驟1，基于現(xiàn)有sketch中imgcook插件將設(shè)計(jì)原稿解析成為初始UI樣式數(shù)據(jù)；

步驟2，根據(jù)預(yù)設(shè)的解析數(shù)據(jù)格式規(guī)則，對初始UI樣式數(shù)據(jù)進(jìn)行過濾篩選整合，進(jìn)而獲得與初始UI樣式數(shù)據(jù)所對應(yīng)的第二前端數(shù)據(jù)；

步驟3，依據(jù)生成的第二前端數(shù)據(jù)的結(jié)果，并基于預(yù)設(shè)的代碼規(guī)則轉(zhuǎn)換成與第二前端數(shù)據(jù)所對應(yīng)的前端初始化代碼；

步驟4，將前端初始化代碼加載到用戶配置界面；可加載成功的前端頁面進(jìn)行個性化配置；及界面功能的劃分；根據(jù)個性化配置修改內(nèi)容對第二前端數(shù)據(jù)進(jìn)行重新整合成為最終前端數(shù)據(jù)；

步驟5，根據(jù)預(yù)設(shè)的代碼規(guī)則轉(zhuǎn)換成最終開發(fā)使用的前端代碼。

作為本發(fā)明一種前端代碼生成方法的進(jìn)一步優(yōu)選方案，在步驟2中：所述初始UI樣式數(shù)據(jù)的數(shù)據(jù)類型為初始UI樣式數(shù)據(jù)中的類型數(shù)據(jù)和類型參數(shù)數(shù)據(jù)。

作為本發(fā)明一種前端代碼生成方法的進(jìn)一步優(yōu)選方案，所述步驟3具體如下：步驟3.1，獲取預(yù)先定義好的代碼模板，提供對第二前端數(shù)據(jù)進(jìn)行轉(zhuǎn)換的規(guī)則；

步驟3.2，輸出最新的前端初始化代碼；

其中，輸出前端初始化代碼方法包括：使用當(dāng)前已有技術(shù)node中文件讀寫模塊fs統(tǒng)一

進(jìn)行代碼生成到文件夾；代碼風(fēng)格使用現(xiàn)有前端插件perttier 進(jìn)行代碼格式化，實(shí)現(xiàn)代碼風(fēng)格統(tǒng)一；步驟3.3，根據(jù)生成的第二前端數(shù)據(jù)和獲取預(yù)先定義好的代碼模板提供對第二前端數(shù)據(jù)

進(jìn)行裝換規(guī)則方法；

步驟3.4，進(jìn)行匹配生成所需代碼； 其中，生成代碼方式；使用原生js 操作dom的API方法生成對應(yīng)的dom節(jié)點(diǎn)代碼,以及

代碼的css樣式代碼；并且在每一個生成的父級頭部放入當(dāng)前父級下面所有的子節(jié)點(diǎn)數(shù)據(jù)；子節(jié)點(diǎn)數(shù)據(jù)包括：節(jié)點(diǎn)的標(biāo)簽節(jié)點(diǎn)的展示的值；使用HTML的data-*屬性放入父級頭部；作為本發(fā)明一種前端代碼生成方法的進(jìn)一步優(yōu)選方案，在步驟4中，用戶進(jìn)行個性化配置方法，具體如下：

步驟4.1，根據(jù)生成好的前端頁面進(jìn)行修改文案及個性化方案；