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

背景技術(shù)：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

技術(shù)特征：

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

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

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

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

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

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

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

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

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

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

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

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