[發明專利]一種視圖組件處理方法、電子設備及可讀存儲介質

有效

• 申請號: 201810015247.9
• 申請日: 2018-01-08
• 公開（公告）號: CN108228188B
• 公開（公告）日: 2021-04-27
• 發明（設計）人: 鄔江;陳少杰;張文明
• 申請（專利權）人: 武漢斗魚網絡科技有限公司
• 主分類號: G06F8/41
• 分類號: G06F8/41;G06F8/38;G06F8/76;G06F40/143
• 代理公司: 北京眾達德權知識產權代理有限公司 11570
• 代理人: 劉杰

本發明實施例提供了一種視圖組件處理方法、電子設備及可讀存儲介質，用于提供一種兼顧了多種主流框架，同時對瀏覽器又有高兼容性的視圖組件處理方法。該方法包括：在視圖組件編譯期間，對所述視圖組件進行解析，獲得與所述視圖組件對應的模板文件和腳本文件，所述模板文件包括所述視圖組件的渲染函數，所述腳本文件注入了所述視圖組件的構造函數；在所述視圖組件被上層視圖組件調用時，執行所述視圖組件的構造函數，通過調用覆寫后的get方法插入所述視圖組件的數據模型；加載所述視圖組件的渲染函數，通過所述渲染函數結合所述數據模型，生成與所述視圖組件對應的第一虛擬DOM樹，將所述第一虛擬DOM樹傳遞至所述視圖組件的根組件。

技術領域

本發明涉及電子技術領域，尤其涉及一種視圖組件處理方法、電子設備及可讀存儲介質。

背景技術

隨著近年來前端對于開發富交互站點的場景日益凸顯，涌現出了一些優異的主流視圖層框架，例如Angular、Vue、React、Knockout等等，此類前端框架的優點即實現了數據模型到視圖組件UI的映射關系，幫助開發者從繁重且難以維護的文件對象模型應用程序接口DOM API調用中釋放。新的視圖層框架關注業務邏輯與通信層對數據模型的影響，視圖即可自動的維護自身渲染、更新、銷毀等行為，極大地提升了前端開發的效率，以及代碼的可復用性、可讀性與可維護性。這些框架實現的原理都不盡相同，對于基于活動模版技術的框架，使用了低版本瀏覽器無法模擬的語法方案，難以兼容老舊版本的瀏覽器。

發明內容

本發明實施例提供了一種視圖組件處理方法、電子設備及可讀存儲介質，用于提供一種兼顧了多種主流框架，同時對瀏覽器又有高兼容性的視圖組件處理方法。

第一方面，本發明提供了一種視圖組件處理方法，包括：

在視圖組件編譯期間，對所述視圖組件進行解析，獲得與所述視圖組件對應的模板文件和腳本文件，其中，所述模板文件包括所述視圖組件的渲染函數，所述渲染函數基于所述模板文件的抽象語法樹生成，所述腳本文件注入了所述視圖組件的構造函數；

在所述視圖組件被上層視圖組件調用時，執行所述視圖組件的構造函數，所述構造函數中覆寫了所述視圖組件的數據對象的獲取get方法，通過調用覆寫后的所述get方法插入所述視圖組件的數據模型；

加載所述視圖組件的渲染函數，通過所述渲染函數結合所述數據模型，生成與所述視圖組件對應的第一虛擬DOM樹，將所述第一虛擬DOM樹傳遞至所述視圖組件的根組件，以使得在所述根組件獲取到所有子視圖組件的虛擬DOM樹后，對完整的虛擬DOM樹解析并渲染到頁面，其中，在所述完整的虛擬DOM樹渲染到頁面時，所述視圖組件渲染完成。

可選的，在所述調用覆寫后的所述get方法時，所述方法還包括：

生成所述數據模型的視圖觀察者；

在對所述視圖組件渲染期間，通過所述視圖觀察者將所述get方法調用過程中的訪問數據記錄在所述視圖組件的依賴表中。

可選的，所述構造函數中覆寫了所述視圖組件的數據對象的設置set方法，在所述視圖組件渲染完成后到所述組件銷毀期間，所述方法還包括：

在所述視圖組件的視圖狀態發生變更情況下，通過調用所述set方法來修改所述視圖組件對應的數據模型；

通過所述視圖觀察者將所述get方法修改的數據記錄在所述視圖組件的依賴表中；

在所述修改的數據的類型為預設類型情況下，對所述視圖組件進行渲染更新。

可選的，所述對所述視圖組件進行渲染更新，包括：

獲得所述視圖組件初次渲染結果對應的靜態部分的虛擬DOM樹；

加載所述視圖組件的動態渲染函數，通過所述動態渲染函數結合所述修改的數據，生成修改部分對應的虛擬DOM樹；