本文例項講述了javascript 模組依賴管理的本質。分享給大家供大家參考，具體如下：

模組模式定義

模組是'javascript'的一種設計模式，它為函式定義一個包裝函式，並且該包裝函式的返回值與模組的API保持一致：

function createModule() {
 function hello(name) {
 console.log(name + '帥哥你好!');
 }

 return {
 hello: hello
 }
}
// 這裡呼叫 createModule 來建立一個模組例項
var foo = createModule();
foo.hello('fayin');

單例模組模式

仔細研究上面的模組，我們發現每次呼叫 createModule 都會生成一個例項，很浪費。於是我們簡單的包裝一下，就有了單例模組模式：

var myModule = (function createModule() {
 function hello(name) {
 console.log(name + '帥哥你好!');
 }

 return {
 hello: hello
 }
})()

// 呼叫方式
myModule.hello('fayin')

模組依賴管理

現代大多數模組依賴管理器本質上都是將這種模組定義封裝進一個友好的API。其核心的方法可以通過下面的例子一窺究竟：

// 通過模組的單例模式來儲存定義的方法
var MyModules = (function() {

 var modules = {};

 function define(name,deps,impl) {
 console.log(deps.length)
 for(var i = 0,len = deps.length; i < len; i++) {
  // deps[i] 看做是函式名
  // modules[deps[i]] 是儲存在 modules 物件上的一個屬性為 deps[i] 的方法
  // 每次遍歷將對應的方法繫結到函式名上
  deps[i] = modules[deps[i]]

 }
 // 在modules 物件上儲存方法，其函式名為 name 
 // 如函式 bar ，impl 為 bar 的函式體
 modules[name] = impl.apply(null,deps);

 console.log( modules)
 }

 function get(name) {
 return modules[name]
 }
 return {
 define: define,get: get
 };
})();

// 這裡定義一個函式 bar，返回一個物件
MyModules.define('bar',[],function() {
 function hello(who) {
 return 'Let me introduce: ' + who;
 }
 return {
 hello: hello
 }
})

MyModules.define('foo',['bar'],function(bar) {
 var hungry = 'hippo';

 function awesome() {
 return bar.hello(hungry).toUpperCase()
 }

 return {
 awesome: awesome
 }
})

var bar = MyModules.get('bar')
console.log(bar.hello('fay'))

var foo = MyModules.get('foo')

console.log(foo.awesome())

模組模式的缺陷

從上面的案例我們知道，這個模式是基於函式來實現的，它的優勢這裡不在贅述（參考jQuery），而它的缺點也非常的明顯。由於函式的上下文環境是在執行時確定的，在編譯期間無法確定它的依賴關係，在執行期間我們可以隨意更改API，這導致基於函式的模組模式並不穩定。

而相比之下，ES6的模組API更加的穩定......

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。