[發(fā)明專利]前端原型調(diào)試方法及裝置

在審

• 申請(qǐng)?zhí)枺?/td>: 202110417154.0
• 申請(qǐng)日: 2021-04-19
• 公開（公告）號(hào): CN113110828A
• 公開（公告）日: 2021-07-13
• 發(fā)明（設(shè)計(jì)）人: 劉泱;楊再同;詹嬌淑;康玉玲
• 申請(qǐng)（專利權(quán)）人: 中國(guó)工商銀行股份有限公司
• 主分類號(hào): G06F8/20
• 分類號(hào): G06F8/20;G06F8/34;G06F8/38;G06F8/41
• 代理公司: 北京三友知識(shí)產(chǎn)權(quán)代理有限公司 11127
• 代理人: 任默聞;王濤

本申請(qǐng)實(shí)施例提供一種前端原型調(diào)試方法及裝置，也可用于金融領(lǐng)域，方法包括：監(jiān)聽并獲取用戶在一編輯區(qū)域內(nèi)輸入的標(biāo)簽信息、動(dòng)態(tài)腳本信息以及層疊樣式表信息；根據(jù)設(shè)定代碼重構(gòu)規(guī)則將所述標(biāo)簽信息、所述動(dòng)態(tài)腳本信息以及所述層疊樣式表信息拼接為一漸進(jìn)式UI組件，并在一預(yù)覽區(qū)域渲染和展示所述漸進(jìn)式UI組件；本申請(qǐng)能夠有效提高前端原型的調(diào)試驗(yàn)證效率。

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

本申請(qǐng)涉及前端開發(fā)領(lǐng)域，也可用于金融領(lǐng)域，具體涉及一種前端原型調(diào)試方法及裝置。

背景技術(shù)

在開發(fā)基于Vue的前端項(xiàng)目時(shí)，通常以完整工程項(xiàng)目的形式進(jìn)行。由于工程化的需要，完整的工程項(xiàng)目不僅要求本地有相應(yīng)的開發(fā)環(huán)境，而且需要安裝依賴和較長(zhǎng)的啟動(dòng)編譯時(shí)間，同時(shí)熱更新的時(shí)間會(huì)隨著項(xiàng)目規(guī)模而增加。

在原型驗(yàn)證階段，通常只需要有一個(gè)能夠執(zhí)行Vue單文件組件的環(huán)境，而使用完整工程項(xiàng)目進(jìn)行原型驗(yàn)證的方式需要通過(guò)啟動(dòng)完整Vue工程的方式進(jìn)行原型驗(yàn)證，驗(yàn)證效率低下。

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

針對(duì)現(xiàn)有技術(shù)中的問題，本申請(qǐng)?zhí)峁┮环N前端原型調(diào)試方法及裝置，能夠有效提高前端原型的調(diào)試驗(yàn)證效率。

為了解決上述問題中的至少一個(gè)，本申請(qǐng)?zhí)峁┮韵录夹g(shù)方案：

第一方面，本申請(qǐng)?zhí)峁┮环N前端原型調(diào)試方法，包括：

監(jiān)聽并獲取用戶在一編輯區(qū)域內(nèi)輸入的標(biāo)簽信息、動(dòng)態(tài)腳本信息以及層疊樣式表信息；

根據(jù)設(shè)定代碼重構(gòu)規(guī)則將所述標(biāo)簽信息、所述動(dòng)態(tài)腳本信息以及所述層疊樣式表信息拼接為一漸進(jìn)式UI組件，并在一預(yù)覽區(qū)域渲染和展示所述漸進(jìn)式UI組件。

進(jìn)一步地，所述根據(jù)設(shè)定代碼重構(gòu)規(guī)則將所述標(biāo)簽信息、所述動(dòng)態(tài)腳本信息以及所述層疊樣式表信息拼接為一漸進(jìn)式UI組件，包括：

通過(guò)設(shè)定標(biāo)簽將所述層疊樣式表信息進(jìn)行包裝，并將經(jīng)過(guò)所述包裝后的層疊樣式表信息掛載至一初始頁(yè)面元素節(jié)點(diǎn)；

根據(jù)所述標(biāo)簽信息和所述動(dòng)態(tài)腳本信息在所述初始頁(yè)面元素節(jié)點(diǎn)上進(jìn)行漸進(jìn)式UI組件拼裝操作，并將完成所述拼裝操作后的漸進(jìn)式UI組件掛載至一目標(biāo)頁(yè)面元素節(jié)點(diǎn)。

進(jìn)一步地，所述根據(jù)所述標(biāo)簽信息和所述動(dòng)態(tài)腳本信息在所述初始頁(yè)面元素節(jié)點(diǎn)上進(jìn)行漸進(jìn)式UI組件拼裝操作，包括：

在所述初始頁(yè)面元素節(jié)點(diǎn)上通過(guò)將所述動(dòng)態(tài)腳本信息轉(zhuǎn)換為對(duì)象，并將所述標(biāo)簽信息設(shè)定為所述對(duì)象的模板屬性進(jìn)行漸進(jìn)式UI組件拼裝操作。

進(jìn)一步地，在所述監(jiān)聽并獲取用戶在一編輯區(qū)域內(nèi)輸入的標(biāo)簽信息、動(dòng)態(tài)腳本信息以及層疊樣式表信息之前，包括：

在編輯區(qū)域內(nèi)加載預(yù)設(shè)樣例代碼并在預(yù)覽區(qū)域渲染和展示與所述樣例代碼對(duì)應(yīng)的漸進(jìn)式UI組件。

第二方面，本申請(qǐng)?zhí)峁┮环N前端原型調(diào)試裝置，包括：

調(diào)試編輯模塊，用于監(jiān)聽并獲取用戶在一編輯區(qū)域內(nèi)輸入的標(biāo)簽信息、動(dòng)態(tài)腳本信息以及層疊樣式表信息；

調(diào)試預(yù)覽模塊，用于根據(jù)設(shè)定代碼重構(gòu)規(guī)則將所述標(biāo)簽信息、所述動(dòng)態(tài)腳本信息以及所述層疊樣式表信息拼接為一漸進(jìn)式UI組件，并在一預(yù)覽區(qū)域渲染和展示所述漸進(jìn)式UI組件。

進(jìn)一步地，所述調(diào)試預(yù)覽模塊包括：

元素節(jié)點(diǎn)掛載單元，用于通過(guò)設(shè)定標(biāo)簽將所述層疊樣式表信息進(jìn)行包裝，并將經(jīng)過(guò)所述包裝后的層疊樣式表信息掛載至一初始頁(yè)面元素節(jié)點(diǎn)；

組件代碼拼接單元，用于根據(jù)所述標(biāo)簽信息和所述動(dòng)態(tài)腳本信息在所述初始頁(yè)面元素節(jié)點(diǎn)上進(jìn)行漸進(jìn)式UI組件拼裝操作，并將完成所述拼裝操作后的漸進(jìn)式UI組件掛載至一目標(biāo)頁(yè)面元素節(jié)點(diǎn)。

進(jìn)一步地，所述組件代碼拼接單元包括：