[發明專利]一種可與后端架構分離開發的瀏覽器前端架構系統

有效

• 申請號: 202010192629.6
• 申請日: 2020-03-18
• 公開（公告）號: CN111428168B
• 公開（公告）日: 2020-11-10
• 發明（設計）人: 金震;耿金帥;張憲濤
• 申請（專利權）人: 北京三維天地科技股份有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958;G06F3/0484
• 代理公司: 北京冠和權律師事務所 11399
• 代理人: 陳國軍

1.一種可與后端架構分離開發的瀏覽器前端架構系統，其特征在于，所述瀏覽器前端架構系統包括：

訪問層，用于執行對瀏覽器的訪問操作；

HTML單頁面應用模塊，用于利用單頁面應用的方式對瀏覽器所展示的業務頁面進行開發，構建業務頁面的應用內容；

視圖模塊，用于通過資源預加載、圖片格式轉換以及組件加載的方式將所述HTML單頁面應用模塊構建的業務頁面應用內容展示出來，并實現人與業務頁面交互功能；

webpack模塊打包器，用于對視圖模塊中的預加載資源文件進行分析，找到預加載資源中的JavaScript模塊，并將JavaScript模塊轉換和打包為與使用的瀏覽器匹配的格式，同時將前端工程打包壓縮形成靜態資源；

控制模塊，用于當用戶訪問靜態資源時，接收用戶請求并針對用戶請求調用模型層中的模型進行數據處理，將數據處理結果發送至視圖模塊，將用戶訪問的靜態資源展示出來；其中，所述模型層為由公共方法、組件解析器、工具類和頁面緩存機制形成的模型庫；所述瀏覽器前端架構系統還包括白屏情況確定模塊和白屏信息反饋模塊；

所述白屏情況確定模塊，用于用戶啟動瀏覽器進行網頁訪問時，根據白屏期間的鼠標動、靜狀態來監控瀏覽器當前頁面被訪問時的白屏情況；

所述白屏信息反饋模塊，用于白屏情況確定模塊在確認白屏時間超時后，將白屏時間超時信息反饋給視圖模塊。

2.根據權利要求1所述瀏覽器前端架構系統，其特征在于，所述視圖模塊包括：

資源預加載子模塊，用于瀏覽器首屏被訪問之前，將瀏覽器首屏的頁面資源提前進行加載；

圖片轉換子模塊，用于對資源預加載過程中出現的圖片資源進行格式轉換，將資源中的圖片轉換為SVG格式圖片；

組件加載子模塊，用于在資源預加載的同時，對瀏覽器首屏的網頁組件進行加載。

3.根據權利要求2所述瀏覽器前端架構系統，其特征在于，所述視圖模塊還包括：

時間信息接收子模塊，用于接收瀏覽器頁面展示過程中白屏信息反饋模塊發送的白屏時間超時的時間檢測信息；

網絡狀態檢測子模塊，用于在時間信息接收子模塊接收到時間檢測信息后，進行網絡狀態檢測，如果首屏訪問當前存在網絡故障問題，則在首屏頁面上顯示網絡故障狀態；如果首屏訪問當前無網絡故障問題，則向資源重置子模塊發出資源重置指令；

資源重置子模塊，用于在接收到網絡狀態檢測子模塊和白屏情況確定模塊發來的資源重置指令后，重新進行網頁的資源加載；

瀏覽器故障提示子模塊，用于在資源重置后時間信息接收子模塊仍然持續接收到白屏時間超時的檢測信息時，在頁面上提示瀏覽器故障信息；以及，當白屏情況確定模塊對瀏覽器當前網頁連續自動刷新兩次后當前網頁仍處于白屏階段時，在頁面上提示瀏覽器故障信息。

4.根據權利要求1所述瀏覽器前端架構系統，其特征在于，所述控制模塊包括

Vue組件子模塊，用于進行Vue的單文件組件形式開發，使瀏覽器的業務邏輯處理和瀏覽器的頁面視圖展示處理分別進行，互不影響；

頁面組件子模塊，用于進行登錄頁面和首頁頁面的構建，以及進行首頁面板自定義配置、CRON表達式可視化配置和節假日設置；

狀態管理模塊，用于通過集中式存儲方式管理所有組件的狀態，并根據瀏覽器運行的相應規則保證所有組件的狀態在系統允許的范圍內進行變化。