[發(fā)明專利]一種前端頁面組件化的方法、裝置及計算機(jī)可讀存儲介質(zhì)

在審

• 申請?zhí)枺?/td>: 202011026438.9
• 申請日: 2020-09-25
• 公開（公告）號: CN112162747A
• 公開（公告）日: 2021-01-01
• 發(fā)明（設(shè)計）人: 張鈺峰;祝君;張俊;肖昆
• 申請（專利權(quán)）人: 同程網(wǎng)絡(luò)科技股份有限公司
• 主分類號: G06F8/36
• 分類號: G06F8/36;G06F8/38;G06F8/76
• 代理公司: 暫無信息
• 代理人: 暫無信息

本申請涉及一種前端頁面組件化的方法，其特征在于，包括以下步驟；建立站點(diǎn)：將渠道側(cè)頁面需要使用的通用模板進(jìn)行抽離，生成獨(dú)立站點(diǎn)并進(jìn)行發(fā)布；代碼編譯：在獨(dú)立站點(diǎn)發(fā)布前對代碼進(jìn)行編譯生成符合不同平臺的頁面文件，并將；嵌套引用：渠道側(cè)頁面通過iframe嵌套獨(dú)立站點(diǎn)對應(yīng)頁面文件的URL；通信交互：站點(diǎn)的頁面文件完成數(shù)據(jù)操作后將操作數(shù)據(jù)回傳至渠道側(cè)頁面完成信息通信和交互。本申請依據(jù)預(yù)設(shè)的包含有各個渠道的渠道配置信息的配置文件建立編譯出符合不同渠道標(biāo)準(zhǔn)的頁面文件，提高了代碼的復(fù)用率，解決了不同平臺下的UI布局不統(tǒng)一問題，節(jié)約開發(fā)時間提高開發(fā)效率，使得多渠道的情況下無需單獨(dú)開發(fā)相同的業(yè)務(wù)模塊，節(jié)省開發(fā)成本。

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

本申請涉及前端的技術(shù)領(lǐng)域，尤其是涉及一種前端頁面組件化的方法、裝置及計算機(jī)可讀存儲介質(zhì)。

背景技術(shù)

在大型軟件系統(tǒng)中，web應(yīng)用的前后端已經(jīng)實(shí)現(xiàn)了分離，而隨著REST軟件架構(gòu)的發(fā)展，后端服務(wù)逐步傾向于微服務(wù)，簡單來說就是將一個大型后端服務(wù)，拆分成多個小服務(wù)，它們分別部署，降低了開發(fā)的復(fù)雜性，而且提高了系統(tǒng)的可伸縮性。而前端方面，隨著技術(shù)的發(fā)展，開發(fā)的復(fù)雜度也越來越高，傳統(tǒng)開發(fā)模式總是存在著開發(fā)效率低，維護(hù)成本高等的弊端。

隨著移動互聯(lián)網(wǎng)的高速發(fā)展，各個互聯(lián)網(wǎng)巨頭都推出的自己移動App平臺，這些APP平臺都有著大量的用戶群體。作為業(yè)務(wù)方，通常需要在上述多個平臺上同時開展業(yè)務(wù)，由于這些平臺都有自己的接入標(biāo)準(zhǔn)（接口、用戶界面）就會導(dǎo)致每個平臺對應(yīng)一個獨(dú)立的站點(diǎn)，即每個APP平臺的頁面（渠道側(cè)頁面）均對應(yīng)有一個獨(dú)立站點(diǎn)，該站點(diǎn)存儲對應(yīng)該app平臺的頁面文件。

當(dāng)業(yè)務(wù)中的某一個功能需要修改時，就需要將每個站點(diǎn)的代碼進(jìn)行修改、測試、發(fā)布，極大地浪費(fèi)了人力成本和時間成本。

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

為了改善不同站點(diǎn)的通用模塊需要修改時必須逐個站點(diǎn)進(jìn)行修改，容易導(dǎo)致工作內(nèi)容重復(fù)且浪費(fèi)時間的問題，本申請?zhí)峁┮环N前端頁面組件化的方法、裝置及計算機(jī)可讀存儲介質(zhì)。

第一方面，本申請?zhí)峁┮环N前端頁面組件化的方法，采用如下的技術(shù)方案：

一種前端頁面組件化的方法，包括；

將渠道側(cè)頁面需要使用的通用模板進(jìn)行抽離，生成獨(dú)立站點(diǎn)并進(jìn)行發(fā)布；

在獨(dú)立站點(diǎn)發(fā)布前對代碼進(jìn)行編譯生成符合不同平臺的頁面文件，并將頁面文件進(jìn)行分類存儲；

渠道側(cè)頁面通過iframe嵌套獨(dú)立站點(diǎn)對應(yīng)頁面文件的URL；

站點(diǎn)的頁面文件完成數(shù)據(jù)操作后將操作數(shù)據(jù)回傳至渠道側(cè)頁面完成信息通信和交互。

通過采用上述技術(shù)方案，將渠道側(cè)的需要使用使用的通用模板抽離進(jìn)行組件化封裝生成獨(dú)立轉(zhuǎn)點(diǎn)，并依據(jù)預(yù)設(shè)的包含有各個渠道的渠道配置信息的配置文件建立編譯出符合不同渠道標(biāo)準(zhǔn)的頁面文件，提高了代碼的復(fù)用率，解決了不同平臺下的UI布局不統(tǒng)一問題，節(jié)約開發(fā)時間提高開發(fā)效率，使得多渠道的情況下無需單獨(dú)開發(fā)相同的業(yè)務(wù)模塊，節(jié)省開發(fā)成本。

優(yōu)選的，所述獨(dú)立站點(diǎn)發(fā)布前對代碼進(jìn)行編譯生成符合不同平臺的頁面文件具體包括：

開發(fā)人員根據(jù)需求以px為單位撰寫用戶界面布局代碼；

獨(dú)立站點(diǎn)通過預(yù)設(shè)值的配置文件讀取渠道配置，將代碼的px值轉(zhuǎn)換為rem；

輸出不同渠道的頁面文件至獨(dú)立站點(diǎn)根目錄的不同子目錄，子目錄按照渠道進(jìn)行劃分。

通過采用上述技術(shù)方案，開發(fā)人員以px為單位撰寫用戶界面布局代碼較為方便容易，且便于開發(fā)人員設(shè)計用戶界面布局；在開發(fā)完成后，獨(dú)立站點(diǎn)通過預(yù)設(shè)值的配置文件讀取渠道配置，將代碼的px值轉(zhuǎn)換為rem并輸出對應(yīng)不同渠道側(cè)的頁面文件，使得頁面文件可以良好適配不同渠道側(cè)的規(guī)范，而且無需根據(jù)每個渠道側(cè)的規(guī)范單獨(dú)設(shè)置不同的獨(dú)立站點(diǎn)，節(jié)約開發(fā)時間提高開發(fā)效率，節(jié)省開發(fā)成本。