本發(fā)明涉及計(jì)算機(jī)，特別是涉及一種彈框組件配置化調(diào)用方法、裝置、設(shè)備和存儲(chǔ)介質(zhì)。

背景技術(shù)：

1、在前端開(kāi)發(fā)中，彈框組件是一種常見(jiàn)的交互元素，用于展示信息、填寫(xiě)表單，增刪改查操作等。傳統(tǒng)彈框組件的創(chuàng)建方式往往是需要在當(dāng)前業(yè)務(wù)頁(yè)面中編寫(xiě)大量的頁(yè)面結(jié)構(gòu)和邏輯代碼，使得獨(dú)立于業(yè)務(wù)的彈框內(nèi)容與原有業(yè)務(wù)頁(yè)面的混合在一起。

2、這種方式使得頁(yè)面代碼變得復(fù)雜和難以維護(hù)，從而可能帶來(lái)以下幾個(gè)開(kāi)發(fā)中難以避免的問(wèn)題：(1)代碼可讀性下降：當(dāng)彈框組件的代碼直接與業(yè)務(wù)頁(yè)面代碼混合在一起時(shí)，頁(yè)面結(jié)構(gòu)復(fù)雜，一個(gè)頁(yè)面可能同時(shí)包含業(yè)務(wù)邏輯、彈框的html結(jié)構(gòu)、css樣式以及javascript邏輯，整個(gè)頁(yè)面的代碼量會(huì)顯著增加，開(kāi)發(fā)者很難在其中快速找到特定的功能或組件代碼，很難快速定位到某個(gè)特定功能或組件的代碼段，缺乏結(jié)構(gòu)化和清晰的組織，會(huì)導(dǎo)致開(kāi)發(fā)者在閱讀和維護(hù)代碼時(shí)效率低下。(2)維護(hù)成本高：在修改某個(gè)功能時(shí)，可能會(huì)不小心影響到其他不相關(guān)的部分，這增加了修復(fù)bug和添加新功能的難度，提高了維護(hù)成本。(3)復(fù)用性差：在其他頁(yè)面需要相同的彈框時(shí)，需要重復(fù)編寫(xiě)相同的代碼，這不僅增加了工作量，還容易導(dǎo)致代碼的重復(fù)和不一致，即使某個(gè)功能或組件在多個(gè)地方被使用，也需要重復(fù)編寫(xiě)相同的代碼，降低了代碼的可重用性。

技術(shù)實(shí)現(xiàn)思路

1、基于此，有必要針對(duì)上述技術(shù)問(wèn)題，提供一種彈框組件配置化調(diào)用方法、裝置、設(shè)備和存儲(chǔ)介質(zhì)。

2、一種彈框組件配置化調(diào)用方法，所述方法包括：

3、根據(jù)預(yù)先設(shè)置的參數(shù)對(duì)象編寫(xiě)彈框組件；

4、通過(guò)定義構(gòu)造函數(shù)編寫(xiě)中間件；所述構(gòu)造函數(shù)用于根據(jù)所述參數(shù)對(duì)象動(dòng)態(tài)生成彈框組件實(shí)例；所述彈框組件實(shí)例包括屬性和方法；所述屬性包括彈框樣式配置項(xiàng)、業(yè)務(wù)組件和傳遞給子組件的參數(shù)；所述方法包括包含彈框打開(kāi)方法和彈框關(guān)閉方法；

5、在觸發(fā)打開(kāi)彈框操作時(shí)，利用預(yù)先定義的通用函數(shù)調(diào)用所述中間件，利用所述中間件接收所述參數(shù)對(duì)象并進(jìn)行處理，動(dòng)態(tài)生成對(duì)應(yīng)的彈框組件實(shí)例，利用彈框打開(kāi)方法傳入所述業(yè)務(wù)組件和所述業(yè)務(wù)數(shù)據(jù)，將業(yè)務(wù)組件和業(yè)務(wù)數(shù)據(jù)結(jié)合并掛載到所述彈框組件實(shí)例上，生成彈框html結(jié)構(gòu)并顯示到當(dāng)前頁(yè)面。

6、在其中一個(gè)實(shí)施例中，還包括：所述彈框打開(kāi)方法還用于接收業(yè)務(wù)數(shù)據(jù)，將業(yè)務(wù)數(shù)據(jù)傳入所述業(yè)務(wù)組件中。

7、在其中一個(gè)實(shí)施例中，還包括：所述彈框關(guān)閉方法用于銷毀彈框組件實(shí)例。

8、在其中一個(gè)實(shí)施例中，還包括：所述參數(shù)對(duì)象包括彈框常量參數(shù)：所述彈框常量參數(shù)包括元素插入的位置、生命周期的回調(diào)函數(shù)、自定義數(shù)據(jù)對(duì)象以及彈框的標(biāo)題、樣式、動(dòng)畫(huà)和ui組件的屬性。

9、在其中一個(gè)實(shí)施例中，還包括：根據(jù)預(yù)先設(shè)置的參數(shù)對(duì)象構(gòu)建彈框空框架，并將需要通過(guò)彈框展示的業(yè)務(wù)組件編寫(xiě)到獨(dú)立的文件中。

10、在其中一個(gè)實(shí)施例中，還包括：在彈框組件實(shí)例的創(chuàng)建到銷毀的過(guò)程中定義生命周期函數(shù)，將生命周期鉤子與參數(shù)對(duì)象中相應(yīng)配置對(duì)象綁定。

11、在其中一個(gè)實(shí)施例中，還包括：在觸發(fā)關(guān)閉彈框操作時(shí)，調(diào)用所述彈框關(guān)閉方法，觸發(fā)彈框打開(kāi)方法的.then回調(diào)機(jī)制，執(zhí)行彈框關(guān)閉后的自定義事件。

12、一種彈框組件配置化調(diào)用裝置，所述裝置包括：

13、彈框組件編寫(xiě)模塊，用于根據(jù)預(yù)先設(shè)置的參數(shù)對(duì)象編寫(xiě)彈框組件；

14、中間件編寫(xiě)模塊，用于通過(guò)定義構(gòu)造函數(shù)編寫(xiě)中間件；所述構(gòu)造函數(shù)用于根據(jù)所述參數(shù)對(duì)象動(dòng)態(tài)生成彈框組件實(shí)例；所述彈框組件實(shí)例包括屬性和方法；所述屬性包括彈框樣式配置項(xiàng)、業(yè)務(wù)組件和傳遞給子組件的參數(shù)；所述方法包括包含彈框打開(kāi)方法和彈框關(guān)閉方法；

15、彈框生成模塊，用于在觸發(fā)打開(kāi)彈框操作時(shí)，利用預(yù)先定義的通用函數(shù)調(diào)用所述中間件，利用所述中間件接收所述參數(shù)對(duì)象并進(jìn)行處理，動(dòng)態(tài)生成對(duì)應(yīng)的彈框組件實(shí)例，利用彈框打開(kāi)方法傳入所述業(yè)務(wù)組件和業(yè)務(wù)數(shù)據(jù)，將業(yè)務(wù)組件和業(yè)務(wù)數(shù)據(jù)結(jié)合并掛載到所述彈框組件實(shí)例上，生成彈框html結(jié)構(gòu)并顯示到當(dāng)前頁(yè)面。

16、一種計(jì)算機(jī)設(shè)備，包括存儲(chǔ)器和處理器，所述存儲(chǔ)器存儲(chǔ)有計(jì)算機(jī)程序，所述處理器執(zhí)行所述計(jì)算機(jī)程序時(shí)實(shí)現(xiàn)以下步驟：

17、根據(jù)預(yù)先設(shè)置的參數(shù)對(duì)象編寫(xiě)彈框組件；

18、通過(guò)定義構(gòu)造函數(shù)編寫(xiě)中間件；所述構(gòu)造函數(shù)用于根據(jù)所述參數(shù)對(duì)象動(dòng)態(tài)生成彈框組件實(shí)例；所述彈框組件實(shí)例包括屬性和方法；所述屬性包括彈框樣式配置項(xiàng)、業(yè)務(wù)組件和傳遞給子組件的參數(shù)；所述方法包括包含彈框打開(kāi)方法和彈框關(guān)閉方法；

19、在觸發(fā)打開(kāi)彈框操作時(shí)，利用預(yù)先定義的通用函數(shù)調(diào)用所述中間件，利用所述中間件接收所述參數(shù)對(duì)象并進(jìn)行處理，動(dòng)態(tài)生成對(duì)應(yīng)的彈框組件實(shí)例，利用彈框打開(kāi)方法傳入所述業(yè)務(wù)組件和業(yè)務(wù)數(shù)據(jù)，將業(yè)務(wù)組件和業(yè)務(wù)數(shù)據(jù)結(jié)合并掛載到所述彈框組件實(shí)例上，生成彈框html結(jié)構(gòu)并顯示到當(dāng)前頁(yè)面。

20、一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其上存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)以下步驟：

21、根據(jù)預(yù)先設(shè)置的參數(shù)對(duì)象編寫(xiě)彈框組件；

22、通過(guò)定義構(gòu)造函數(shù)編寫(xiě)中間件；所述構(gòu)造函數(shù)用于根據(jù)所述參數(shù)對(duì)象動(dòng)態(tài)生成彈框組件實(shí)例；所述彈框組件實(shí)例包括屬性和方法；所述屬性包括彈框樣式配置項(xiàng)、業(yè)務(wù)組件和傳遞給子組件的參數(shù)；所述方法包括包含彈框打開(kāi)方法和彈框關(guān)閉方法；

23、在觸發(fā)打開(kāi)彈框操作時(shí)，利用預(yù)先定義的通用函數(shù)調(diào)用所述中間件，利用所述中間件接收所述參數(shù)對(duì)象并進(jìn)行處理，動(dòng)態(tài)生成對(duì)應(yīng)的彈框組件實(shí)例，利用彈框打開(kāi)方法傳入所述業(yè)務(wù)組件和業(yè)務(wù)數(shù)據(jù)，將業(yè)務(wù)組件和業(yè)務(wù)數(shù)據(jù)結(jié)合并掛載到所述彈框組件實(shí)例上，生成彈框html結(jié)構(gòu)并顯示到當(dāng)前頁(yè)面。

24、上述彈框組件配置化調(diào)用方法、裝置、設(shè)備和存儲(chǔ)介質(zhì)，通過(guò)中間件的形式使用高階組件封裝不限于彈框組件的通用邏輯，使彈框與當(dāng)前頁(yè)面的業(yè)務(wù)關(guān)系進(jìn)行完全解耦來(lái)實(shí)現(xiàn)模塊化管理組件，從而簡(jiǎn)化彈框組件調(diào)用方式、提高代碼復(fù)用性、提高彈框組件可擴(kuò)展性，提供一種簡(jiǎn)單、高效、靈活的配置化調(diào)用方式，通過(guò)定義通用函數(shù)，通用函數(shù)可接收自定義組件和一系列配置參數(shù)作為輸入，自定義組件可以是原生業(yè)務(wù)組件，也可以是ui組件，根據(jù)這些參數(shù)動(dòng)態(tài)生成(虛擬)組件實(shí)例并按需調(diào)用后產(chǎn)生真實(shí)html節(jié)點(diǎn)顯示到界面上。本發(fā)明方法使得開(kāi)發(fā)者無(wú)需為每個(gè)彈框編寫(xiě)?yīng)毩⒌目蚣艽a，通過(guò)簡(jiǎn)單的配置即可實(shí)現(xiàn)多樣化的彈框顯示和業(yè)務(wù)功能需求。

技術(shù)特征：

1.一種彈框組件配置化調(diào)用方法，其特征在于，所述方法包括：

2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述彈框打開(kāi)方法還用于接收業(yè)務(wù)數(shù)據(jù)，將業(yè)務(wù)數(shù)據(jù)傳入所述業(yè)務(wù)組件中。

3.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述彈框關(guān)閉方法用于銷毀彈框組件實(shí)例。

4.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述參數(shù)對(duì)象包括彈框常量參數(shù)：所述彈框常量參數(shù)包括元素插入的位置、生命周期的回調(diào)函數(shù)、自定義數(shù)據(jù)對(duì)象以及彈框的標(biāo)題、樣式、動(dòng)畫(huà)和ui組件的屬性。

5.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述根據(jù)預(yù)先設(shè)置的參數(shù)對(duì)象編寫(xiě)彈框組件包括：

6.根據(jù)權(quán)利要求1-5任一項(xiàng)所述的方法，其特征在于，在彈框組件實(shí)例的創(chuàng)建到銷毀的過(guò)程中定義生命周期函數(shù)，將生命周期鉤子與參數(shù)對(duì)象中相應(yīng)配置對(duì)象綁定。

7.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述方法還包括：

8.一種彈框組件配置化調(diào)用裝置，其特征在于，所述裝置包括：

9.一種計(jì)算機(jī)設(shè)備，包括存儲(chǔ)器和處理器，所述存儲(chǔ)器存儲(chǔ)有計(jì)算機(jī)程序，其特征在于，所述處理器執(zhí)行所述計(jì)算機(jī)程序時(shí)實(shí)現(xiàn)權(quán)利要求1至7中任一項(xiàng)所述方法的步驟。

10.一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其上存儲(chǔ)有計(jì)算機(jī)程序，其特征在于，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)權(quán)利要求1至7中任一項(xiàng)所述的方法的步驟。

技術(shù)總結(jié)
本發(fā)明涉及一種彈框組件配置化調(diào)用方法、裝置、設(shè)備和存儲(chǔ)介質(zhì)。方法包括：根據(jù)參數(shù)對(duì)象編寫(xiě)彈框組件；通過(guò)定義構(gòu)造函數(shù)編寫(xiě)中間件；構(gòu)造函數(shù)用于根據(jù)參數(shù)對(duì)象動(dòng)態(tài)生成彈框組件實(shí)例；彈框組件實(shí)例包括屬性和方法；屬性包括彈框樣式配置項(xiàng)、業(yè)務(wù)組件和傳遞給子組件的參數(shù)；方法包括包含彈框打開(kāi)方法和彈框關(guān)閉方法；觸發(fā)打開(kāi)彈框操作時(shí)，利用預(yù)先定義的通用函數(shù)調(diào)用中間件，利用中間件接收參數(shù)對(duì)象并進(jìn)行處理，動(dòng)態(tài)生成對(duì)應(yīng)的彈框組件實(shí)例，利用彈框打開(kāi)方法傳入業(yè)務(wù)組件和業(yè)務(wù)數(shù)據(jù)，并結(jié)合掛載到彈框組件實(shí)例上，生成彈框HTML結(jié)構(gòu)并顯示到當(dāng)前頁(yè)面。采用本方法能夠簡(jiǎn)化彈框組件調(diào)用方式、提高代碼復(fù)用性、提高彈框組件可擴(kuò)展性。

技術(shù)研發(fā)人員：馬濤,屠旭明
受保護(hù)的技術(shù)使用者：中電信數(shù)智科技有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2024/12/19