[發明專利]一種基于JavaScript的模塊加載方法及系統

在審

• 申請號: 201710253670.8
• 申請日: 2017-04-18
• 公開（公告）號: CN106951271A
• 公開（公告）日: 2017-07-14
• 發明（設計）人: 羅國俊
• 申請（專利權）人: 北京思特奇信息技術股份有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44;G06F9/445
• 代理公司: 北京輕創知識產權代理有限公司11212
• 代理人: 楊立

技術領域

本發明涉及前端開發領域，尤其涉及一種基于JavaScript的模塊加載方法及系統。

背景技術

當人們使用互聯網瀏覽網頁時，在網頁中顯示的內容均來源于html頁面代碼，在當前互聯網環境下，網頁中需要顯示的內容越來越多，用戶對體驗的要求也越來越高，而html頁面的加載速度是用戶體驗中最重要的一環，為了提高加載速度，以往將所有代碼寫在一個html文件中的方法已經無法滿足需求。

因此，現有前端開發技術趨向于模塊化，將需要實現的功能代碼封裝在不同的文件中，按需動態加載，但是現有的動態加載技術，都是通過在JavaScript中拼接html字符串或通過后端服務返回html字符串實現，這兩種方法具有以下缺點：

1)拼接的html字符串無法直接體現網絡節點的層次結構，導致代碼的可讀性差；

2)拼接的html字符串無法表達完整的功能含義，只是以變量的方式存在，導致代碼的可維護性低；

3)拼接的html字符串沒有抽象成具備獨立功能的模塊，導致代碼的復用度低；

4)在開發過程中，極易因拼接符號缺失而出錯。

發明內容

本發明所要解決的技術問題是針對現有動態加載技術具有代碼可讀性差、可維護性低、復用度低以及開發過程中易出錯等問題，提供一種基于JavaScript的模塊加載方法及系統。

本發明解決上述技術問題的技術方案如下：

一種基于JavaScript的模塊加載方法，包括以下步驟：

步驟1，獲取多個html模塊和多個所述html模塊之間的組合信息，作為配置數據存儲在配置文件中；

步驟2，通過JavaScript代碼調用加載函數，從所述配置文件中讀取所述配置數據；

步驟3，根據所述配置數據，對多個所述html模塊進行循環加載，分別得到每個html模塊的待加載文件；

步驟4，從所述待加載文件中提取待加載內容和元素區域的位置信息；

步驟5，將所述待加載內容渲染到與所述位置信息對應的元素區域。

本發明的有益效果是：本發明提供的一種基于JavaScript的模塊加載方法，通過將編寫的代碼存儲在模塊中，并以模塊的方式加載html頁面，具有代碼的可讀性好、可維護性高、復用度高等優點，并且在開發過程中，以模塊的方式編寫html，具有不會因拼接符號缺失而出錯的優點，并且模塊的加載順序、組合情況都是在配置文件中配置，即使后續因需求變更需要修改組合的情況，只需要修改此配置文件即可，并且模塊代碼與主網頁代碼完全解耦，同一個模塊可以在多個組合中復用，具有更高的實用性和適用性。

在上述技術方案的基礎上，本發明還可以做如下改進。

進一步地，在步驟1之前還包括：

以模塊的形式編寫html，得到html模塊；

將所述html模塊進行組合并存儲。

進一步地，所述html模塊的形式具體為標準的html標簽格式。

進一步地，所述組合信息包括各所述html模塊與html模塊名稱的對應關系，以及各所述html模塊之間的包括先后順序的組合方式。

進一步地，所述html模塊名稱為所述html模塊的唯一標識。

進一步地，步驟3中，根據所述配置數據，對多個所述html模塊進行循環加載，通過ajax分別得到每個html模塊的待加載文件。

進一步地，所述待加載文件為異步加載文件。

進一步地，還包括：

步驟6，修改所述配置文件中多個html模塊的組合信息，并對修改后的所述配置文件執行步驟2至步驟5。

采用上述進一步方案的有益效果是：當因需求變更，需要對模塊的組合進行修改時，只需要對配置文件進行修改就可以了，修改方便，具有良好的可擴展性。

本發明解決上述技術問題的另一種技術方案如下：

一種基于JavaScript的模塊加載系統，包括：依次連接的獲取模塊、讀取模塊、循環模塊和加載模塊，其中：

所述獲取模塊用于獲取多個html模塊和多個所述html模塊之間的組合信息，作為配置數據存儲在配置文件中；

所述讀取模塊用于通過JavaScript代碼調用加載函數，從所述配置文件中讀取所述配置數據；

所述循環模塊用于根據所述配置數據，對多個所述html模塊進行循環加載，分別得到每個html模塊的待加載文件；