[發明專利]一種快速透出web頁面模塊的方法及裝置

有效

• 申請號: 201810529266.3
• 申請日: 2018-05-29
• 公開（公告）號: CN110543341B
• 公開（公告）日: 2022-11-18
• 發明（設計）人: 劉曉鐘;苗輝
• 申請（專利權）人: 貴州白山云科技股份有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451
• 代理公司: 北京名華博信知識產權代理有限公司 11453
• 代理人: 白瑩;苗源

本發明公開了一種快速透出web頁面模塊的方法及裝置。所公開的快速透出web頁面模塊的方法，包括：接收與待快速透出的web頁面模塊相關的關鍵字；基于關鍵字在web頁面中搜索和快速透出待快速透出的web頁面模塊，其中，每個web頁面包括至少一個web頁面模塊，每個待快速透出的web頁面模塊包括至少一個組件。所公開的技術方案可以快速搜索需要的頁面信息模塊，并將這些頁面信息模塊顯示到瀏覽器的最前面、最直觀的位置。

技術領域

本發明涉及web應用和開發領域，尤其涉及一種快速透出web頁面模塊的方法及裝置。

背景技術

隨著使用React、vue或者其他框架開發web應用的盛行，組件化開發的思想越來越普遍。然而，如果頁面的模塊(包括至少一個組件)或其包括的組件越來越多，信息量越來越大，要查找的模塊就會分散在頁面中不易被找到。

另外，例如，對于每次只能在客戶端或瀏覽器中顯示一個頁面的單頁面形式的web應用，要查找的模塊可能在多個頁面中的一個頁面中，這個頁面可能不是頂部頁面，因此會出現多頁面路由的情況。

圖1示例性地示出了單頁面應用中的3個不同的頁面結構。圖1所示的單頁面應用包括3個不同的頁面(A頁面、B頁面和C頁面，對應3個不同的路由A、B、C)，每個頁面下都有4個模塊。在現有技術中，在當前的頂部頁面是A頁面(即，A路由)的情況下，是無法實現對于C頁面(即，C路由)中的各個模塊(例如，C1-C4模塊)的快速查找和顯示(即，快速透出)的。

盡管在面向瀏覽器的應用中，由于功能和模塊可能比面向客戶端的應用拆分得更加明顯，因此，可以通過React Router來管理頁面路由，這樣會使路由管理和查找更加方便。然而，如果用戶要找到某個頁面的某個模塊，仍然需要通過多次轉路由的方式來進行多次查找，不能通過簡單的全局搜索來一次性地查找和顯示所需要的模塊。

因此，需要提出一種新的技術方案，以快速搜索需要的頁面信息模塊，并將這些頁面信息模塊顯示到瀏覽器的最前面、最直觀的位置。

發明內容

根據本發明的快速透出web頁面模塊的方法，包括：

接收與待快速透出的web頁面模塊相關的關鍵字；

基于關鍵字在web頁面中搜索和快速透出待快速透出的web頁面模塊，

其中，每個web頁面包括至少一個web頁面模塊，每個待快速透出的web頁面模塊包括至少一個組件。

根據本發明的快速透出web頁面模塊的方法，在接收與待快速透出的web頁面模塊相關的關鍵字的步驟之前，還包括：

建立關鍵字與待快速透出的web頁面模塊之間的映射關系。

根據本發明的快速透出web頁面模塊的方法，在接收與待快速透出的web頁面模塊相關的關鍵字的步驟之前，還包括：

接收用戶用于輸入關鍵字的觸發操作；

向用戶顯示用于輸入關鍵字的全局搜索輸入框。

根據本發明的快速透出web頁面模塊的方法，在基于關鍵字在web頁面中搜索和快速透出待快速透出的web頁面模塊的步驟之前，還包括：

將至少一個組件實現為可以獨立渲染的純UI組件；

使用容器組件來實現用于首次請求、獲取待快速透出的web頁面模塊的內外部環境數據的接口，并且存儲用于渲染待快速透出的web頁面模塊所需的內外部環境數據。

根據本發明的快速透出web頁面模塊的方法，其建立關鍵字與待快速透出的web頁面模塊之間的映射關系的步驟包括：

使用裝飾器來建立關鍵字與待快速透出的web頁面模塊之間的映射關系。