[發明專利]基于集成化組件構建前端頁面的方法、裝置及電子設備

有效

• 申請號: 202010436960.8
• 申請日: 2020-05-21
• 公開（公告）號: CN111796820B
• 公開（公告）日: 2022-11-18
• 發明（設計）人: 程賓;孫遷;楊成穎;黃文浩;張心政
• 申請（專利權）人: 蘇寧云計算有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F16/958
• 代理公司: 北京市萬慧達律師事務所 11111
• 代理人: 盛安平

1.一種基于集成化組件構建前端頁面的方法，其特征在于，包括：

創建多個集成化組件并存儲，其中，每個集成化組件包括多個用于實現相同頁面功能的子組件；

依據頁面需求選取一個或多個集成化組件，并配置所述集成化組件的數據結構；

解析所述數據結構，將解析后得到的數據分別傳入對應的子組件中，通過各個子組件響應數據進行頁面刷新渲染。

2.根據權利要求1所述的基于集成化組件構建前端頁面的方法，其特征在于，創建所述集成化組件并存儲的方法包括：

根據集成化組件要實現的頁面功能去選擇多個功能單一的子組件；

根據各個子組件功能和在頁面的位置，設置各個子組件在集成化組件內部的位置和具體表現樣式，封裝得到所述集成化組件；

將所述集成化組件存儲到集成化組件庫中。

3.根據權利要求2所述的基于集成化組件構建前端頁面的方法，其特征在于，將所述集成化組件按照頁面功能分類，包括：布局類組件、數據展示類組件、表單類組件和混合功能類組件。

4.根據權利要求2或3所述的基于集成化組件構建前端頁面的方法，其特征在于，根據各個子組件功能和在頁面的位置，設置各個子組件在集成化組件內部的位置和具體表現樣式的方法包括：

在保留各個子組件原有方法和基本事件的基礎上，通過方法調用的方式實現各個子組件的方法交互，并且通過事件觸發的方式實現各個子組件的事件交互；

在集成化組件內部配置各個子組件之間的渲染邏輯，同時預實現各個子組件的渲染樣式。

5.根據權利要求4所述的基于集成化組件構建前端頁面的方法，其特征在于，預實現各個子組件的渲染樣式的方法包括css技術、less技術或sass技術。

6.根據權利要求4所述的基于集成化組件構建前端頁面的方法，其特征在于，配置所述集成化組件的數據結構的方法包括：

配置每個子組件的開關數據，所述開關數據用于設置各個子組件是否需要渲染；

配置需要渲染的子組件的基礎數據，所述基礎數據用于子組件的正常顯示和使用；

配置需要渲染的子組件渲染完成后要執行的方法數據和事件數據。

7.根據權利要求6所述的基于集成化組件構建前端頁面的方法，其特征在于，配置所述集成化組件的數據結構的方法還包括：

利用需要渲染的子組件的自定義接口，根據業務需求配置需要渲染的子組件的自定義渲染樣式數據、自定義事件數據、自定義方法數據中的一個或多個。

8.根據權利要求7所述的基于集成化組件構建前端頁面的方法，其特征在于，解析所述數據結構，將解析后得到的數據分別傳入對應的子組件中，通過各個子組件響應數據進行頁面刷新渲染的方法包括：

利用所述集成化組件對應的生命周期鉤子函數，解析所述集成化組件的數據結構；

將解析后得到的子組件的開關數據、基礎數據、方法數據和事件數據傳送給對應的子組件，同時各子組件響應接收到的數據進行web頁面的刷新，以實現web頁面的渲染。

9.一種基于集成化組件構建前端頁面的裝置，其特征在于，包括組件創建模塊、組件配置模塊及解析渲染模塊，其中，

所述組件創建模塊用于創建多個集成化組件并存儲，其中，每個集成化組件包括多個子組件；

所述組件配置模塊用于依據頁面需求選取一個或多個集成化組件，并配置所述集成化組件的數據結構；

所述解析渲染模塊用于解析所述數據結構，并解析后的數據分別傳入對應的子組件中，通過各個子組件響應數據進行頁面刷新渲染。

10.一種電子設備，其特征在于，所述電子設備包括：

至少一個處理器；以及，

與所述至少一個處理器通信連接的存儲器；其中，

所述存儲器存儲有可被所述至少一個處理器執行的指令，所述指令被所述至少一個處理器執行，以使所述至少一個處理器能夠執行前述權利要求1-8任一項所述的基于集成化組件構建前端頁面的方法。