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

有效

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

本發明公開基于集成化組件構建前端頁面的方法、裝置及電子設備，其中該方法包括：創建多個集成化組件并存儲，其中，每個集成化組件包括多個用于實現相同頁面功能的子組件；依據頁面需求選取一個或多個集成化組件，并配置所述集成化組件的數據結構；解析所述數據結構，將解析后的數據分別傳入對應的子組件中，通過各個子組件響應數據進行頁面刷新渲染。本發明公開的基于集成化組件構建前端頁面的裝置采用上述基于集成化組件構建前端頁面的方法，通過創建多個集成化組件，并對集成化組件的進行數據配置以實現構建前端頁面，方便快捷，節省了大量的時間，提升了前端頁面的開發效率。

技術領域

本發明涉及Web前端數據處理方法技術領域，尤其基于集成化組件構建前端頁面的方法、裝置及電子設備。

背景技術

在Web頁面開發中，基本上所有的前端開發者在頁面布局時所使用的組件都是經過簡單封裝的功能性單一的小組件，如下拉框、輸入框、表格等。每一種組件都是一個獨立的個體單元，它們的共同點是都有自己的屬性、方法和事件，即每個組件都有獨立的API，而開發者在使用時除了要處理各組件的屬性、方法和事件外，還要花費大量的時間和精力在css布局和樣式排版上。

這種處理方式在頁面功能較為復雜，所需控件較多時，開發者花費在實現組件功能、處理樣式問題和交互邏輯上的時間大大增加，特別是多個頁面有相似功能的時候要重復書寫相同的代碼和邏輯，不僅耗費時間，還會造成代碼大量重復。

發明內容

本發明的目的在于提供基于集成化組件構建前端頁面的方法、裝置及電子設備，首先創建多個集成化組件，通過對集成化組件的進行數據配置以實現構建前端頁面，方便快捷。

為了實現上述目的，本發明提供如下技術方案：

一種基于集成化組件構建前端頁面的方法，包括：

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

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

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

優選地，創建所述集成化組件并存儲的方法包括：

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

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

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

具體地，將所述集成化組件按照頁面功能分類，包括：布局類組件、數據展示類組件、表單類組件和混合功能類組件。

進一步地，根據各個子組件功能和在頁面的位置，設置各個子組件在集成化組件內部的位置和具體表現樣式的方法包括：

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

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

較佳地，預實現各個子組件的渲染樣式的方法包括css技術、less技術或sass技術。

優選地，配置所述集成化組件的數據結構的方法包括：

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

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

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