JS中的模組化

今天看ydkjs時，明白了乙個以前一直疑惑的東西，那就是js中的模組開發，之前也使用過require.s進行模組化的開發，但是一直不能明白其中具體的原理，看了ydkjs的講解後，真的是豁然開朗，在此記錄其中乙個例項的**，並進行解析。

var mymodules = (function  foo();
function get(name)
function define(name, deps, impl)
} return 
})();
mymodules.define('foo',,function()
return 
});mymodules.define('test',['foo'],function(foo)
return 
}) mymodules.get('test').usehello('hello world');

說明：

iffe

在整個mymodules定義的最外層，使用了立即執行函式表示式var mymodules =(function foo())()，這樣做的目的是為了形成乙個閉包，使用mymodules儲存函式表示式function foo()其中的詞法作用域。

暴露公共介面

使用return，是為了將公共的介面get和define暴露出來，可以在mymodules上呼叫這些方法。同時因為這兩個方法的內部都使用了變數modules，所以modules就會在記憶體中被儲存起來，類似於mymodules的私有變數。

私有變數modules

變數modules類似於mymodules的私有變數，不通過mymodules是無法訪問到這個變數的，且其會一直儲存在記憶體中。使用這個變數，結合define方法，將所有定義的模組都掛載到modules上。

模組定義的方法

function define(name, deps, impl)
}

name: 定義的模組名稱

deps: 模組對應的依賴

impl: 模組的實現

模組定義的實現

我們來看看具體的模組定義和實現

mymodules.define('foo',,function()
return 
});

我們定義了foo模組，在foo模組中，我們暴露了hello方法，實際上此時mymodules內部的modules是這樣的

modules = 
}

可以看到modules上掛載的foo模組實際上是foo模組定義時的返回值，但是這個返回值中引用的方法hello此時會一直儲存在記憶體中。

模組間呼叫

mymodules.define('test',['foo'],function(foo)
return 
}) mymodules.get('test').usehello('hello world');

我們在模組test中呼叫了foo模組。注意，在test模組的實現中，我們加入了引數foo，那麼實際定義的過程如下

等價於所以，我們在test模組的實現中，可以直接使用變數foo，就像真的在呼叫foo模組一樣，然後後我們再將test模組中的返回值掛載到modules上

以上是我個人對於js中的模組化的理解，如有錯誤，歡迎各位老鐵指正。

參考資料：

[1]: %26 closures/ch5.md

JS中的模組化

js 模組化補充

js模組化規範

理解JS 模組化

JS中的模組化

js 模組化補充

js模組化規範

理解JS 模組化

相關推薦