閉包的總結(乾貨2)--模塊機制

現代模塊機制：

var MyModules = (function Manager() {
        var modules = {};
        function define(name, deps, impl) {
            for (var i = 0; i < deps.length; i++) {
                deps[i] = modules[deps[i]];
            }
            modules[name] = impl.apply(impl, deps);
        }
        function get(name) {
            return modules[name];
        }
        return {
            define: define,
            get: get
        };
    })();

 

首先是匿名函數當即運行，返回一個對象，對象包含2個方法，一個定義模塊，一個get獲取模塊 

定義模塊：     name ：定義的模塊名，字符串   deps：依賴的列表  impl 模塊的實現

apply將deps導入到impl 並返回模塊對象存入 modules[name]

實際例子：

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() {
console.log( bar.hello( hungry ).toUpperCase() );
}
return {
awesome: awesome
};
} );
var bar = MyModules.get( "bar" );
var foo = MyModules.get( "foo" );
console.log(
bar.hello( "hippo" )
); // Let me introduce: hippo
foo.awesome(); // LET ME INTRODUCE: HIPPO

將來模塊機制

經過模塊系統進行加載時，ES6 會將文件看成獨立的模塊來處理。每一個模塊均可以導入其餘模塊或特定的API 成員，一樣也能夠導出本身的API 成員。

基於函數的API：並非一個能被穩定識別的模式（編譯器沒法識別），它們的API 語義只有在運行時纔會被考慮進來。所以能夠在運行時修改一個模塊
                   的API

ES6 模塊API ：更加穩定，編譯期就會檢查模塊是否存在，ES6沒有行內格式，一個文件一個模塊 ，引擎有默認的模塊加載器，能夠導入模塊的時候 

                   異步的加載模塊文件

bar.js
function hello(who) {
return "Let me introduce: " + who;
}
export hello;
foo.js
// 僅從"bar" 模塊導入hello()
import hello from "bar";
var hungry = "hippo";
function awesome() {
console.log(
hello( hungry ).toUpperCase()
);
}
export awesome;
baz.js
module foo from "foo";
module bar from "bar";
console.log(
bar.hello( "rhino" )
); // Let me introduce: rhino
foo.awesome(); // LET ME INTRODUCE: HIPPO

module 整個導入到當前做用域 

import 是導入一個或多個API

模塊文件中的內容會被看成好像包含在做用域閉包中同樣來處理，就和前面介紹的函數閉包模塊同樣。

模塊有兩個主要特徵：（1）爲建立內部做用域而調用了一個包裝函數；（2）包裝函數的返回值必須至少包括一個對內部函數的引用，這樣就會建立涵蓋整個包裝函數內部做用域的閉包

《你不知道的javascript》