這篇文章主要為大家展示了“js簡易模塊加載器的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js簡易模塊加載器的示例分析”這篇文章吧。

為靜安等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及靜安網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、靜安網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

前端模塊化

關(guān)注前端技術(shù)發(fā)展的各位親們，肯定對模塊化開發(fā)這個名詞不陌生。隨著前端工程越來越復(fù)雜，代碼越來越多，模塊化成了必不可免的趨勢。

各種標(biāo)準(zhǔn)

由于javascript本身并沒有制定相關(guān)標(biāo)準(zhǔn)（當(dāng)然es6已經(jīng)有了import和export），所以在模塊化方面誕生了各種不同的規(guī)范。主要有AMD規(guī)范（隨requirejs誕生而普及），CMD規(guī)范（隨seajs的出現(xiàn)而普及），commonjs（主要用于node，并不適合前端）。至于以上幾種規(guī)范的異同，無恥的我在這里就不多費(fèi)口水了，請還不了解的親們自行去找google爸爸。

簡易模塊加載器示例

G點(diǎn)來了！

接下來我們先來看一段建議模塊加載器的示例代碼：

let Module = (() => {
let module_list = {};
function define(name,rely,callback){
if (module_list[name]){
console.log("The module have already existed!")
}else{
for(let i = 0;i < rely.length;i++){
rely[i] = module_list[rely[i]];
}
module_list[name] = callback.apply(callback,rely);
}
}
function require(name){
if (module_list[name]){
return module_list[name]
}else{
console.log("There is no such module!")
}
}
let api = {
"define":define,
"require":require
};
return api;
})();

以上是加載器的實(shí)現(xiàn)，再來看看如何使用吧：

Module.define("test",[],()=>{
function sayHello(name){
return name+",你好啊";
}
return {
"sayHello":sayHello
}
})
Module.define("haha",[],()=>{
function gotoHZ(name){
return name+"要去杭州玩了";
}
return {
"gotoHZ":gotoHZ
}
})
Module.define("my_module",["test","haha"],(test,haha)=>{
let name = "andrew";
function sayHello2() {
let str = test.sayHello(name);
console.log(haha.gotoHZ("章煒"))
str = str + ",今天天氣不錯噢";
return str;
}
return {
"sayHello2":sayHello2
}
})
console.log(Module.require('my_module').sayHello2())
console.log(Module.require('test').sayHello("steve"))

在以上代碼中，我們定義了三個模塊，分別名為test,haha,my_module?？吹竭@里的你，如果js基礎(chǔ)不好，可能是一臉懵逼，腦子繞暈...先不急，讓我們來看看運(yùn)行的結(jié)果：

結(jié)果很簡單，打印了一些我們想要的信息。

代碼分析

接下來我們詳細(xì)來解析一下代碼原理。

加載器中的幾個重點(diǎn)，

1.dule_list

module_list是一個對象，用于存儲定義的模塊，以模塊名：callback這樣
的鍵值對的形式存儲；

2.fine函數(shù)

然后我們定義了一個define函數(shù)，其三個參數(shù)分別為模塊名、此模塊依賴列表、此模塊回調(diào)函數(shù)，當(dāng)我們調(diào)用define函數(shù)時，首先先去檢查module_list對
象中是否已經(jīng)有同名模塊，如果有，直接告訴用戶該模塊名字已被使用，如果沒有，我們循環(huán)依賴列表rely，循環(huán)中的操作用于將依賴列表從名稱列表轉(zhuǎn)換為真正的模塊列表，然后利用apply函數(shù)，將其逐個傳入到定義好的callback函數(shù)中。

3.quire函數(shù)

由于我們的module_list存在于內(nèi)部作用域，保證了模塊的私密性，外部并不能
直接操作模塊列表去讀取模塊，因此我們定義了一個require函數(shù)，利用閉包來讀取操作相應(yīng)模塊

4.解析

Module.define("my_module",["test","haha"],(test,haha)=>{
let name = "andrew";
function sayHello2() {
let str = test.sayHello(name);
console.log(haha.gotoHZ("章煒"))
str = str + ",今天天氣不錯噢";
return str;
}
return {
"sayHello2":sayHello2
}
})

這里我們定義了my_module模塊，它依賴的模塊有test、haha兩個模塊，而在回調(diào)函數(shù)中，我們將這兩個模塊傳入，可以看到我們能調(diào)用test模塊的sayHello方法，可以調(diào)用haha模塊的gotoHZ方法，至此，一個簡單的模塊加載器就實(shí)現(xiàn)了。

以上是“js簡易模塊加載器的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！