[發(fā)明專利]在多個文檔對象模型節(jié)點(diǎn)掛載實(shí)例的方法與裝置

在審

• 申請?zhí)枺?/td>: 202210049968.8
• 申請日: 2022-01-17
• 公開（公告）號: CN114491366A
• 公開（公告）日: 2022-05-13
• 發(fā)明（設(shè)計(jì)）人: 謝海峰;尹召華
• 申請（專利權(quán)）人: 北京皮爾布萊尼軟件有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958
• 代理公司: 北京思睿峰知識產(chǎn)權(quán)代理有限公司 11396
• 代理人: 趙愛軍;高攀

本發(fā)明公開了一種在多個文檔對象模型節(jié)點(diǎn)掛載實(shí)例的方法、裝置與計(jì)算設(shè)備，包括：根據(jù)根實(shí)例，構(gòu)造用于數(shù)據(jù)傳遞和事件綁定的一個或者多個子組件；遍歷根實(shí)例中的全部參數(shù)中的每個屬性對象，按照數(shù)據(jù)傳遞和事件綁定的需求分別確定每個子組件的綁定數(shù)據(jù)部分；實(shí)例化每個子組件，并按照每個子組件的綁定數(shù)據(jù)部分將根實(shí)例和對應(yīng)的子組件實(shí)例建立關(guān)聯(lián)關(guān)系；將根實(shí)例掛載到根文檔對象模型上，并將每個子組件實(shí)例分別掛載到與一個或者多個文檔對象模型上；以及在根實(shí)例中對每個子組件的綁定數(shù)據(jù)部分的屬性值進(jìn)行監(jiān)聽，當(dāng)一個或者多個屬性值發(fā)生變動時，根據(jù)建立的關(guān)聯(lián)關(guān)系更新對應(yīng)的子組件實(shí)例中變動的屬性對象的屬性值。

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

本發(fā)明涉及網(wǎng)頁生成技術(shù)技術(shù)領(lǐng)域，尤其是一種多個文檔對象模型(dom，Document Object Model)節(jié)點(diǎn)掛載實(shí)例的方法、裝置與計(jì)算設(shè)備。

背景技術(shù)

近些年，前端技術(shù)快速發(fā)展，vue.js(構(gòu)建數(shù)據(jù)驅(qū)動的web界面的漸進(jìn)式框架)+webpack(資源加載/打包工具)技術(shù)棧，已經(jīng)成為很多互聯(lián)網(wǎng)公司的首選，vue.js在使用的過程中，需要將Vue實(shí)例對象掛載到唯一的根級的dom元素上，該dom所有的子元素都由Vue實(shí)例負(fù)責(zé)渲染和托管。所以，如果需要將一個Vue實(shí)例同時掛載到多個dom元素上，相關(guān)技術(shù)中無法使用vue.js進(jìn)行開發(fā)，只能采取操作原生dom操作的方式，該方式開發(fā)效率低，開發(fā)時間長，無法享受vue.js框架帶來的效率提升。同時，對于團(tuán)隊(duì)內(nèi)已經(jīng)積累的vue組件和工具也無法復(fù)用，從而不得不進(jìn)行重新開發(fā)。

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

為此，本發(fā)明提供了一種在多個文檔對象模型節(jié)點(diǎn)掛載實(shí)例的方法、裝置與計(jì)算設(shè)備，以力圖解決或者至少緩解上面存在的至少一個問題。

根據(jù)本發(fā)明的一個方面，提供了一種在多個文檔對象模型節(jié)點(diǎn)掛載實(shí)例的方法，包括步驟：根據(jù)根實(shí)例，構(gòu)造用于數(shù)據(jù)傳遞和事件綁定的一個或者多個子組件；遍歷所述根實(shí)例中的全部參數(shù)中的每個屬性對象，按照所述數(shù)據(jù)傳遞和事件綁定的需求分別確定每個子組件的綁定數(shù)據(jù)部分；實(shí)例化每個所述子組件，并按照所述每個子組件的綁定數(shù)據(jù)部分將所述根實(shí)例和對應(yīng)的所述子組件實(shí)例建立關(guān)聯(lián)關(guān)系；將所述根實(shí)例掛載到根文檔對象模型上，并將每個所述子組件實(shí)例分別掛載到與一個或者多個文檔對象模型上；以及在所述根實(shí)例中對所述每個子組件的綁定數(shù)據(jù)部分的屬性值進(jìn)行監(jiān)聽，當(dāng)一個或者多個所述屬性值發(fā)生變動時，根據(jù)建立的所述關(guān)聯(lián)關(guān)系更新對應(yīng)的所述子組件實(shí)例中變動的屬性對象的屬性值。

可選地，在根據(jù)本發(fā)明的掛載實(shí)例的方法中，更新對應(yīng)的所述子組件實(shí)例中變動的屬性對象的屬性值的步驟之后還包括：利用變動后的所述根文檔對象模型和所述子文檔對象模型生成對應(yīng)的頁面。

可選地，在根據(jù)本發(fā)明的掛載實(shí)例的方法中，所述根文檔對象模型與所述一個或者多個文檔對象模型沒有共同的父文檔對象模型。

可選地，在根據(jù)本發(fā)明的掛載實(shí)例的方法中，根據(jù)根實(shí)例，構(gòu)造用于數(shù)據(jù)傳遞和事件綁定的一個或者多個子組件的步驟包括：根據(jù)根實(shí)例，使用Vue.extend方法，按照所述數(shù)據(jù)傳遞和事件綁定的需求，擴(kuò)充對應(yīng)的一個或者多個子組件。

可選地，在根據(jù)本發(fā)明的掛載實(shí)例的方法中，遍歷所述根實(shí)例中的全部參數(shù)中的每個屬性對象，按照所述數(shù)據(jù)傳遞和事件綁定的需求分別確定每個子組件的綁定數(shù)據(jù)部分的步驟包括：對于每個子組件，按照數(shù)據(jù)傳遞和事件綁定的需求情況，將所述根實(shí)例中的每個屬性對象進(jìn)行綁定判斷處理；當(dāng)所述屬性對象被判定為綁定時，將所述屬性對象作為待綁定對象；當(dāng)所述待綁定對象為常量時，將所述屬性對象的內(nèi)容作為綁定數(shù)據(jù)部分；當(dāng)所述待綁定對象為變量時，將所述屬性對象的屬性作為綁定數(shù)據(jù)部分。

可選地，在根據(jù)本發(fā)明的掛載實(shí)例的方法中，實(shí)例化每個所述子組件，并按照所述每個子組件的綁定數(shù)據(jù)部分將所述根實(shí)例和對應(yīng)的所述子組件實(shí)例建立關(guān)聯(lián)關(guān)系的步驟包括：對于每個子組件實(shí)例，將參數(shù)中的共享數(shù)據(jù)狀態(tài)管理信息、屬性信息和事件信息分別以vue.js框架所定義的store、parentListeners、propsData的屬性名傳遞給所述子組件的構(gòu)造函數(shù)，以建立所述根實(shí)例和所述子組件之間的關(guān)聯(lián)關(guān)系。