本發(fā)明涉及前端開發(fā)領(lǐng)域，尤其涉及一種基于javascript的模塊加載方法及系統(tǒng)。

背景技術(shù)：

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

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

1)拼接的html字符串無法直接體現(xiàn)網(wǎng)絡(luò)節(jié)點的層次結(jié)構(gòu)，導(dǎo)致代碼的可讀性差；

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

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

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

技術(shù)實現(xiàn)要素：

本發(fā)明所要解決的技術(shù)問題是針對現(xiàn)有動態(tài)加載技術(shù)具有代碼可讀性差、可維護性低、復(fù)用度低以及開發(fā)過程中易出錯等問題，提供一種基于javascript的模塊加載方法及系統(tǒng)。

本發(fā)明解決上述技術(shù)問題的技術(shù)方案如下：

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

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

步驟2，通過javascript代碼調(diào)用加載函數(shù)，從所述配置文件中讀取所述配置數(shù)據(jù)；

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

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

步驟5，將所述待加載內(nèi)容渲染到與所述位置信息對應(yīng)的元素區(qū)域。

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

在上述技術(shù)方案的基礎(chǔ)上，本發(fā)明還可以做如下改進。

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

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

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

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

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

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

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

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

進一步地，還包括：

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

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

本發(fā)明解決上述技術(shù)問題的另一種技術(shù)方案如下：

一種基于javascript的模塊加載系統(tǒng)，包括：依次連接的獲取模塊、讀取模塊、循環(huán)模塊和加載模塊，其中：

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

所述讀取模塊用于通過javascript代碼調(diào)用加載函數(shù)，從所述配置文件中讀取所述配置數(shù)據(jù)；

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

所述加載模塊用于從所述待加載文件中提取待加載內(nèi)容和元素區(qū)域的信息，并將所述待加載內(nèi)容渲染到所述元素區(qū)域。

進一步地，還包括編寫模塊，用于以模塊的形式編寫html，得到html模塊，并將所述html模塊進行組合并存儲。

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

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

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

進一步地，所述循環(huán)模塊具體用于根據(jù)所述配置數(shù)據(jù)，對多個所述html模塊進行循環(huán)加載，通過ajax分別得到每個html模塊的待加載文件。

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

進一步地，所述讀取模塊還用于修改所述配置文件中多個html模塊的組合信息。

本發(fā)明附加的方面的優(yōu)點將在下面的描述中部分給出，部分將從下面的描述中變得明顯，或通過本發(fā)明實踐了解到。

附圖說明

圖1為本發(fā)明實施例提供的一種基于javascript的模塊加載方法的流程示意圖；

圖2為本發(fā)明另一實施例提供的一種基于javascript的模塊加載系統(tǒng)的結(jié)構(gòu)框架圖。

具體實施方式

以下結(jié)合附圖對本發(fā)明的原理和特征進行描述，所舉實例只用于解釋本發(fā)明，并非用于限定本發(fā)明的范圍。

如圖1所示，為本發(fā)明實施例提供的一種基于javascript的模塊加載方法的流程示意圖，該方法包括：

s101，獲取多個html模塊和多個html模塊之間的組合信息，作為配置數(shù)據(jù)存儲在配置文件中；

s102，通過javascript代碼調(diào)用加載函數(shù)，從配置文件中讀取配置數(shù)據(jù)；

s103，根據(jù)配置數(shù)據(jù)，對多個html模塊進行循環(huán)加載，分別得到每個html模塊的待加載文件；

s104，從待加載文件中提取待加載內(nèi)容和元素區(qū)域的位置信息；

s105，將待加載內(nèi)容渲染到與位置信息對應(yīng)的元素區(qū)域。

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

在另一實施例中，以加載個人相關(guān)信息為例，對本發(fā)明提供的一種基于javascript的模塊加載方法進行說明，該方法包括：

以模塊的形式編寫html，分別得到個人信息模塊和圈子內(nèi)容模塊，兩個模塊的形式具體為標準的html標簽格式，而不是字符串格式，例如，個人信息模塊可以為“wodexinxi#mydiv”，圈子內(nèi)容模塊可以為"quanzineirong#topicdiv"；

將個人信息模塊和圈子內(nèi)容模塊按先后順序進行組合并存儲，例如，可以存儲為"myinfo2":["wodexinxi#mydiv","quanzineirong#topicdiv"]，模塊的先后順序也是配置數(shù)據(jù)中的一項，當(dāng)對模塊進行循環(huán)時，是按先后順序?qū)δK進行循環(huán)的，即，先循環(huán)"wodexinxi#mydiv"，再循環(huán)"quanzineirong#topicdiv"；

獲取個人信息模塊和圈子內(nèi)容模塊的代碼、組合信息等后，作為配置數(shù)據(jù)存儲在配置文件中，配置文件中還存儲有其他模塊的模塊名稱、組合信息等，例如，配置文件中可以包括以下內(nèi)容：

"topicinfo":["quanzineirong#topicdiv","zengjiatiezihuifu#replydiv"]

"myinfo":["wodexinxi#mydiv"]

"myinfo2":["wodexinxi#mydiv"，"quanzineirong#topicdiv"]，

其中，"myinfo2"為我們需要加載的個人相關(guān)信息；

通過javascript代碼調(diào)用加載函數(shù)app.initpage，initpage內(nèi)部首先讀取配置文件，然后先從配置文件中篩選出名稱為"myinfo2"的配置數(shù)據(jù)["wodexinxi#mydiv"，"quanzineirong#topicdiv"]；

通過加載函數(shù)initpage，根據(jù)配置數(shù)據(jù)["wodexinxi#mydiv"，"quanzineirong#topicdiv"]的配置，對"myinfo2"模塊的內(nèi)容進行循環(huán)加載，通過ajax分別得到"myinfo2"模塊的異步待加載文件，例如，"wodexinxi#mydiv"代表會加載wodexinxi/index.html文件，"quanzineirong#topicdiv"代表會加載quanzineirong/index.html文件；

將wodexinxi/index.html文件和quanzineirong/index.html文件渲染到#后標識的元素區(qū)域，例如，將wodexinxi/index.html文件渲染到mydiv區(qū)域，將quanzineirong/index.html文件渲染到topicdiv區(qū)域，完成頁面的加載。

在另一實施例中，如圖2所示，為本發(fā)明另一實施例提供的一種基于javascript的模塊加載系統(tǒng)的結(jié)構(gòu)框架圖，該系統(tǒng)包括：

依次連接的獲取模塊201、讀取模塊202、循環(huán)模塊203和加載模塊204，其中：

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

讀取模塊202用于通過javascript代碼調(diào)用加載函數(shù)，從配置文件中讀取配置數(shù)據(jù)；

循環(huán)模塊203用于根據(jù)配置數(shù)據(jù)，對多個html模塊進行循環(huán)加載，分別得到每個html模塊的待加載文件；

加載模塊204用于從待加載文件中提取待加載內(nèi)容和元素區(qū)域的信息，并將待加載內(nèi)容渲染到元素區(qū)域。

進一步，還包括編寫模塊205，用于以模塊的形式編寫html，得到html模塊，并將所述html模塊進行組合并存儲。

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

進一步，組合信息包括各html模塊與html模塊名稱的對應(yīng)關(guān)系，以及各html模塊之間的包括先后順序的組合方式。

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

進一步，循環(huán)模塊203具體用于根據(jù)配置數(shù)據(jù)，對多個html模塊進行循環(huán)加載，通過ajax分別得到每個html模塊的待加載文件。

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

進一步，讀取模塊202還用于修改配置文件中多個html模塊的組合信息。

所屬領(lǐng)域的技術(shù)人員可以清楚地了解到，為了描述的方便和簡潔，上述描述的系統(tǒng)和模塊的具體工作過程，可以參考前述方法實施例中的對應(yīng)過程，在此不再贅述。

在本申請所提供的幾個實施例中，應(yīng)該理解到，所揭露的系統(tǒng)和方法，可以通過其它的方式實現(xiàn)。例如，以上所描述的系統(tǒng)實施例僅僅是示意性的，例如，模塊的劃分，僅僅為一種邏輯功能劃分，實際實現(xiàn)時可以有另外的劃分方式，例如多個模塊或單元可以結(jié)合或者可以集成到另一個系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另外，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口、裝置或單元的間接耦合或通信連接，也可以是電的，機械的或其它的形式連接。

以上所述僅為本發(fā)明的較佳實施例，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進等，均應(yīng)包含在本發(fā)明的保護范圍之內(nèi)。