[發明專利]基于組件化的前端頁面搭建方法、裝置、設備及存儲介質

有效

• 申請號: 202110691854.9
• 申請日: 2021-06-22
• 公開（公告）號: CN113419729B
• 公開（公告）日: 2023-10-20
• 發明（設計）人: 王世杰
• 申請（專利權）人: 康鍵信息技術（深圳）有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F9/445
• 代理公司: 北京市京大律師事務所 11321
• 代理人: 姚維

本發明涉及研發管理領域，公開了一種基于組件化的前端頁面搭建方法、裝置、設備及存儲介質，用于解決目前在不同框架中組件無法遷移使用的問題。所述方法包括：接收終端發送的頁面搭建請求并對頁面搭建請求進行解析，得到組件描述規則；根據組件描述規則構建多個候選組件；基于各候選組件創建組件描述文件集并將組件描述文件集發送至數據庫；接收終端發送的組件獲取指令并根據組件獲取指令從組件描述文件集中下載目標組件描述文件；根據目標組件描述文件確定多個目標組件并將各目標組件注冊至組件管理器；從組件管理器中調用各目標組件進行頁面搭建并根據初始頁面的框架類型確定渲染函數，采用渲染函數對各目標組件進行渲染，得到目標頁面。

技術領域

本發明涉及研發管理領域，尤其涉及一種基于組件化的前端頁面搭建方法、裝置、設備及存儲介質。

背景技術

隨著前端開發的日趨復雜，組件化開發便應運而生，早些年流行的jQuery庫就已經有了組件化的思想，當前盛行的前端三大框架，即React、Vue和Angular，都開發實現了各自框架的組件化系統，這些方案都已經被許多廠商廣泛地使用和實踐，能夠很好地服務于實際的業務。

但是仍然存在一些缺陷和不足。三大框架的組件化方案中最大的缺陷是對框架過分依賴，即基于某個框架開發好的組件庫，無法便捷地遷移給使用其他框架的系統使用。

發明內容

本發明的主要目的在于解決在不同的前端框架中組件無法遷移使用的問題。

本發明第一方面提供了一種基于組件化的前端頁面搭建方法，包括：接收終端發送的頁面搭建請求并對所述頁面搭建請求進行解析，得到對應的組件描述規則；根據所述組件描述規則構建用于頁面搭建的多個候選組件；基于所述多個候選組件創建對應的組件描述文件集，并將所述組件描述文件集發送至預置數據庫；接收終端發送的組件獲取指令，根據所述組件獲取指令從所述預置數據庫的所述組件描述文件集中下載對應的目標組件描述文件；根據所述目標組件描述文件確定對應的多個目標組件，并將所述多個目標組件注冊至預置初始頁面的組件管理器；從所述組件管理器中調用所述多個目標組件進行頁面搭建，并根據所述初始頁面的框架類型確定對應的渲染函數，采用所述渲染函數對所述多個目標組件進行渲染，得到目標頁面。

可選的，在本發明第一方面的第一種實現方式中，在所述接收終端發送的頁面搭建請求并對所述頁面搭建請求進行解析，得到對應的組件描述規則之后，在所述根據所述組件描述規則構建用于頁面搭建的多個候選組件之前，還包括：對所述頁面搭建請求進行信息掃描，得到待獲取的目標靜態資源文件；利用所述目標靜態資源文件進行運行環境搭建，并生成對應的初始頁面。

可選的，在本發明第一方面的第二種實現方式中，所述根據所述組件描述規則構建用于頁面搭建的多個候選組件包括：讀取所述組件描述規則，得到結構描述規則、樣式描述規則及數據描述規則；根據所述結構描述規則，生成對應的第一JSON格式文件，所述第一JSON格式文件用于定義組件的屬性及類型；根據所述樣式描述規則，生成對應的第二JSON格式文件，所述第二JSON格式文件用于定義組件的尺寸及形狀；根據所述數據描述規則，生成對應的組件基類文件，所述組件基類文件用于實現組件內部邏輯；將所述第一JSON格式文件、第二JSON格式文件及所述組件基類文件拼接為整合文件，并根據所述整合文件生成所述多個候選組件。

可選的，在本發明第一方面的第三種實現方式中，所述基于所述多個候選組件創建對應的組件描述文件集，并將所述組件描述文件集發送至預置數據庫包括：讀取所述多個候選組件，獲取所述多個候選組件的組件信息及組件操作類型信息；基于預設的自動化腳本，將所述組件信息及所述組件操作類型信息添加至預置描述文件，生成多個候選組件描述文件；將所述多個候選組件描述文件合并為組件描述文件集，并將所述組件描述文件集傳輸至預置數據庫中。