[發明專利]一種前端架構系統

有效

• 申請號: 202010196845.8
• 申請日: 2020-03-19
• 公開（公告）號: CN111367525B
• 公開（公告）日: 2020-10-23
• 發明（設計）人: 金震;徐潔沖;劉紹忠;胡俊
• 申請（專利權）人: 北京三維天地科技股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/34;G06F16/957;G06F16/958
• 代理公司: 北京冠和權律師事務所 11399
• 代理人: 陳國軍

1.一種前端架構系統，其特征在于：

所述前端架構系統包括視圖層、Webpack功能層、控制層和模型層；其中，

所述視圖層、所述Webpack功能層、所述控制層和所述模型層依次通過相應的數據傳輸鏈路進行通信；

所述視圖層用于提供關于所述前端架構系統的可視化中介界面；

所述模型層用于提供對所述前端架構系統進行編輯的方法實現組件和/或虛擬工具組件；

所述Webpack功能層與所述控制層共同組成一Webpack+Vue框架；

所述Webpack+VUE框架通過Vue-router形成動態路由，以此實現關于動態化全局Vue組件的頁面加載模式和/或關于iframe嵌套的頁面加載模式；

所述視圖層與所述Webpack+Vue框架進行可視化圖像的數據交互，所述模型層與所述Webpack+Vue框架進行數據編輯相關交互；

所述Webpack+VUE框架通過Vue-router形成動態路由，以此實現關于動態化全局Vue組件的頁面加載模式具體包括，

步驟S1，采用可讀性最高的XML描述形成核心DOM；

步驟S2，通過所述動態路由傳遞相應的架構參數，以此按需獲取相應的核心DOM，并動態形成一個對應的全局Vue組件；

步驟S3，將所述全局Vue組件掛載于相應的HTML頁面上，并使每一個HTML頁面相對于平臺獨立運行；

步驟S4，將相應的前端模板和所述核心DOM部署在不同的服務器上，并通過Nignx進行負載均衡處理，以此實現關于動態化全局Vue組件的頁面記載模式；

或者，

所述Webpack+VUE框架通過Vue-router形成動態路由，以此實現關于iframe嵌套的頁面加載模式具體包括，

采用iframe嵌套不同HTML頁面，以此每一個HTML頁面相對于平臺獨立運行。

2.如權利要求1所述的前端架構系統，其特征在于：

所述Webpack+Vue框架包括打包組件、重構組件、壓縮組件和動態路由形成組件；其中，

所述打包組件用于對所述Webpack+Vue框架的模板語言代碼進行打包處理；

所述重構組件用于對所述Webpack+Vue框架的模板語言代碼進行重構處理；

所述壓縮組件用于對所述Webpack+Vue框架的模板語言代碼進行壓縮處理；

所述動態路由形成組件用于根據所述Vue-router形成所述動態路由。

3.如權利要求1所述的前端架構系統，其特征在于：

所述視圖層包括資源預加載組件、圖片轉換組件、按需加載組件和預定圖片生成組件；其中，

所述資源預加載組件用于對preload資源和/或prefetch資源進行預加載處理；

所述圖片轉換組件用于實現關于base64格式圖片向SVG格式圖片的轉換處理；

所述按需加載組件用于根據視圖層對應平臺的數據需求進行適應性的加載處理；

所述預定圖片生成組件用于根據所述預加載處理、所述轉換處理和所述加載處理的結果，生成JS圖片和/或CSS圖片，以此通過所述數據傳輸鏈路傳輸至所述Webpack功能層。

4.如權利要求1所述的前端架構系統，其特征在于：

所述Webpack功能層包括loader集合組件和Plugin集合組件；其中，所述loader集合組件至少包括css-loader子組件、file-loader子組件和bable-loader子組件，所述css-loader子組件、所述file-loader子組件或者所述bable-loader子組件用于實現對不同類型文件的加載處理；

所述Plugin集合組件至少包括HtmlWebpackPlugin子組件、PrefetchPlugin子組件和CommonsChunkPlugin子組件，所述HtmlWebpackPlugin子組件、所述PrefetchPlugin子組件或者所述CommonsChunkPlugin子組件用于實現對不同場合的插件安裝處理。