[發明專利]一種基于對象技術構建web前端應用的裝置及方法

在審

• 申請號: 202211056434.4
• 申請日: 2022-08-31
• 公開（公告）號: CN116149648A
• 公開（公告）日: 2023-05-23
• 發明（設計）人: 楊宇彤
• 申請（專利權）人: 成都索驥科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F16/958
• 代理公司: 成都金英專利代理事務所(普通合伙) 51218
• 代理人: 郭肖凌

1.一種基于對象技術構建web前端應用的裝置，其特征在于，包括：

主應用基類，用于創建前端應用的主應用類對象、管理所述前端應用的全局數據和主頁面視圖；

頁面視圖基類，用于派生視圖類和所述主頁面視圖，管理頁面的HTML、CSS資源和頁面所包含定義的DOM事件響應以及頁面相關的數據和自定義事件；

存儲基類，用于派生存儲類、派生所述全局數據、組織和管理私有和公有數據；

事件基類，用于派生事件類、管理事件的注冊、觸發及所述事件的處理函數；

加載和打包工具基類，用于派生加載和打包工具類以及所述前端應用文件的最終編譯和發布；

通過所述主應用基類創建前端應用的所述主應用類對象并以所述主應用類對象為根節點建立起層次嵌套的包括了各個頁面對象的對象樹，所述各個頁面對象由繼承自所述頁面視圖基類的各頁面視圖類創建，所述各個頁面視圖類將頁面所需的HTML、CSS資源和DOM以及相關數據、頁面相關事件管理起來，所述相關數據的操作通過繼承自所述存儲基類的本頁面派生存儲類來完成，同時所述頁面相關事件處理通過繼承所述事件基類的本頁面派生事件類來完成，前端應用的各種文件通過所述加載和打包工具基類來完成最終的編譯和發布。

2.根據權利要求1所述的一種基于對象技術構建web前端應用的裝置，其特征在于，主應用基類在前端應用中的操作包括：創建前端應用的主應用對象并將其作為頁面對象樹的根節點，觸發創建各下級頁面對象，創建和管理包含所有頁面、組件對象的嵌套對象樹，管理前端應用的全局數據，創建和管理應用級別的事件及所述應用級別的事件的響應函數。

3.根據權利要求2所述的一種基于對象技術構建web前端應用的裝置，其特征在于，所述主應用基類還包括內部成員函數，用于遍歷、篩選、使能所述對象樹各個對象節點。

4.根據權利要求1所述的一種基于對象技術構建web前端應用的裝置，其特征在于，所述頁面視圖基類在前端應用中的操作包括：

提供HTML、CSS資源的按順序加載以及DOM事件響應函數的注冊；

加載和管理頁面的DOM，注冊和管理DOM相關的回調函數；

管理頁面所屬的下級頁面、下級組件的定義和加載順序；

管理所述頁面相關的事件注冊和觸發響應已注冊的事件。

5.根據權利要求1所述的一種基于對象技術構建web前端應用的裝置，其特征在于，所述頁面視圖基類使用存儲類來處理頁面相關的業務數據。

6.根據權利要求1所述的一種基于對象技術構建web前端應用的裝置，其特征在于，所述存儲基類在前端應用中的操作包括：

提供函數完成所述私有和公有數據的存取、控制；

提供函數完成數據與DOM綁定、渲染操作的使能。

7.根據權利要求1所述的一種基于對象技術構建web前端應用的裝置，其特征在于，所述事件基類在前端應用中的操作包括：

由所述主應用基類和所述頁面視圖基類調用所述事件類以提供應用和頁面級別不同生命期的事件注冊、觸發和對應處理函數的定制化能力；

管理應用、頁面、組件、插件相關的事件的注冊、觸發及其處理函數。

8.根據權利要求1所述的一種基于對象技術構建web前端應用的裝置，其特征在于，所述加載和打包工具基類在前端應用中的操作包括：

管理所有所述主應用基類、頁面視圖基類、存儲基類、事件基類及所述主應用基類、頁面視圖基類、存儲基類、事件基類的派生類源文件的加載、組合、加密、打包；

調用系統工具編譯完整的所述前端應用的調試版本、發布版本；

提供日志打印、格式轉換、異步響應公共功能函數。

9.一種基于對象技術構建web前端應用的方法，包括權利要求1至8任意一項所述的主應用類、視圖類、存儲類、事件類、加載和打包工具類，其特征在于，步驟包括：

步驟一，初始化主應用類對象，包括以下子步驟：

步驟11、實例化主應用類；

步驟12、創建前端應用對象樹根節點；

步驟13、觸發主頁面視圖實例化；

步驟二，初始化主頁面視圖，包括以下子步驟：

步驟21、從頁面視圖基類派生出主頁視圖類；

步驟22、為所述主頁視圖類實現派生必要存儲類和事件類；

步驟23、為所述主頁視圖類定義所述主頁視圖類所屬的下一級子頁面視圖類的列表；

步驟24、實例化主頁視圖類；

步驟25、掛載主頁視圖類實例化對象到所述根節點；

步驟26、觸發所述下一級子頁面視圖類的實例化；

步驟三：初始化各子頁面視圖，包括以下子步驟：

步驟31、上級視圖類根據步驟23所述下一級子頁面視圖類的列表驅動各子頁面視圖類完成實例化；

步驟32、頁面視圖基類的資源加載函數自動調用并加載子頁面視圖類相關的資源；

步驟33、檢查子頁面DOM加載就緒并注冊回調處理函數；

步驟34、加載子頁面內部數據；

步驟35、注冊子頁面事件；

步驟四，前端應用構建結束，等待響應操作，包括以下子步驟：

步驟41、所有DOM回調函數處于回調響應狀態，等待響應用戶操作；

步驟42、所有注冊的事件處于回調響應狀態，等待響應事件。