[發明專利]前端原型調試方法及裝置

在審

• 申請號: 202110417154.0
• 申請日: 2021-04-19
• 公開（公告）號: CN113110828A
• 公開（公告）日: 2021-07-13
• 發明（設計）人: 劉泱;楊再同;詹嬌淑;康玉玲
• 申請（專利權）人: 中國工商銀行股份有限公司
• 主分類號: G06F8/20
• 分類號: G06F8/20;G06F8/34;G06F8/38;G06F8/41
• 代理公司: 北京三友知識產權代理有限公司 11127
• 代理人: 任默聞;王濤

1.一種前端原型調試方法，其特征在于，所述方法包括：

監聽并獲取用戶在一編輯區域內輸入的標簽信息、動態腳本信息以及層疊樣式表信息；

根據設定代碼重構規則將所述標簽信息、所述動態腳本信息以及所述層疊樣式表信息拼接為一漸進式UI組件，并在一預覽區域渲染和展示所述漸進式UI組件。

2.根據權利要求1所述的前端原型調試方法，其特征在于，所述根據設定代碼重構規則將所述標簽信息、所述動態腳本信息以及所述層疊樣式表信息拼接為一漸進式UI組件，包括：

通過設定標簽將所述層疊樣式表信息進行包裝，并將經過所述包裝后的層疊樣式表信息掛載至一初始頁面元素節點；

根據所述標簽信息和所述動態腳本信息在所述初始頁面元素節點上進行漸進式UI組件拼裝操作，并將完成所述拼裝操作后的漸進式UI組件掛載至一目標頁面元素節點。

3.根據權利要求2所述的前端原型調試方法，其特征在于，所述根據所述標簽信息和所述動態腳本信息在所述初始頁面元素節點上進行漸進式UI組件拼裝操作，包括：

在所述初始頁面元素節點上通過將所述動態腳本信息轉換為對象，并將所述標簽信息設定為所述對象的模板屬性進行漸進式UI組件拼裝操作。

4.根據權利要求1所述的前端原型調試方法，其特征在于，在所述監聽并獲取用戶在一編輯區域內輸入的標簽信息、動態腳本信息以及層疊樣式表信息之前，包括：

在編輯區域內加載預設樣例代碼并在預覽區域渲染和展示與所述樣例代碼對應的漸進式UI組件。

5.一種前端原型調試裝置，其特征在于，包括：

調試編輯模塊，用于監聽并獲取用戶在一編輯區域內輸入的標簽信息、動態腳本信息以及層疊樣式表信息；

調試預覽模塊，用于根據設定代碼重構規則將所述標簽信息、所述動態腳本信息以及所述層疊樣式表信息拼接為一漸進式UI組件，并在一預覽區域渲染和展示所述漸進式UI組件。

6.根據權利要求5所述的前端原型調試裝置，其特征在于，所述調試預覽模塊包括：

元素節點掛載單元，用于通過設定標簽將所述層疊樣式表信息進行包裝，并將經過所述包裝后的層疊樣式表信息掛載至一初始頁面元素節點；

組件代碼拼接單元，用于根據所述標簽信息和所述動態腳本信息在所述初始頁面元素節點上進行漸進式UI組件拼裝操作，并將完成所述拼裝操作后的漸進式UI組件掛載至一目標頁面元素節點。

7.根據權利要求6所述的前端原型調試裝置，其特征在于，所述組件代碼拼接單元包括：

漸進式UI組件拼裝子單元，用于在所述初始頁面元素節點上通過將所述動態腳本信息轉換為對象，并將所述標簽信息設定為所述對象的模板屬性進行漸進式UI組件拼裝操作。

8.根據權利要求5所述的前端原型調試裝置，其特征在于，還包括：

默認加載單元，用于在編輯區域內加載預設樣例代碼并在預覽區域渲染和展示與所述樣例代碼對應的漸進式UI組件。

9.一種電子設備，包括存儲器、處理器及存儲在存儲器上并可在處理器上運行的計算機程序，其特征在于，所述處理器執行所述程序時實現權利要求1至4任一項所述的前端原型調試方法的步驟。

10.一種計算機可讀存儲介質，其上存儲有計算機程序，其特征在于，該計算機程序被處理器執行時實現權利要求1至4任一項所述的前端原型調試方法的步驟。