閉包
閉包是什么署惯？
當(dāng)函數(shù)可以記住并訪問所在的詞法作用域時，就產(chǎn)生了閉包镣隶，即使函數(shù)是在當(dāng)前詞法作用域之外執(zhí)行极谊，簡單上講诡右，就是在一個函數(shù)中內(nèi)部的函數(shù)。
function foo() {
var a = 2;
function bar() {
console.log( a );
}
return bar;
}
var baz = foo();
baz(); // 2 —— 朋友怀酷，這就是閉包的效果稻爬。
那么bar函數(shù)就是一個閉包，它可以在作用域外被訪問蜕依。
各種閉包實例：
function foo() {
var a = 2;
function baz() {
console.log( a ); // 2
}
bar( baz );
}
function bar(fn) {
fn(); // 媽媽快看呀桅锄，這就是閉包！
}
function setupBot(name, selector) {
$( selector ).click( function activator() {
console.log( "Activating: " + name );
} );
}
setupBot( "Closure Bot 1", "#bot_1" );
setupBot( "Closure Bot 2", "#bot_2" );
function wait(message) {
setTimeout( function timer() {
console.log( message );
}, 1000 );
}
wait( "Hello, closure!" );
本質(zhì)上無論何時何地样眠，如果將函數(shù)當(dāng)作第一級的值類型并到處傳遞友瘤，就會由閉包，在定時器檐束、事件監(jiān)聽器辫秧、Ajax請求、跨窗口通信被丧、Web Workers或者其他的異步（或者同步）任務(wù)中盟戏，只要使用了回調(diào)函數(shù)，實際上就是閉包
模塊
模塊實例：
function CoolModule() {
var something = "cool";
var another = [1, 2, 3];
function doSomething() {
console.log( something );
}
function doAnother() {
console.log( another.join( " ! " ) );
}
return {
doSomething: doSomething,
doAnother: doAnother
};
}
var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3
這種模式在JavaScript中就是模塊甥桂。
最常見的實現(xiàn)模塊模式的方法通常被稱為模塊暴露柿究。
模塊模式所具備的兩個必要特點：
必須有外部的封閉函數(shù)，該函數(shù)至少被調(diào)用一次（每次調(diào)用都會產(chǎn)生新的模塊實例）黄选。
封閉函數(shù)必須返回至少一個內(nèi)部函數(shù)蝇摸，這樣內(nèi)部函數(shù)才能在私有作用域中形成閉包，并且可以訪問或者修改私有的狀態(tài)办陷。
模塊模式的另一個簡單但強(qiáng)大的用法是命名將要作為公共API返回的對象貌夕。
var foo = (function CoolModule(id) {
function change() {
// 修改公共 API
publicAPI.identify = identify2;
}
function identify1() {
console.log( id );
}
function identify2() {
console.log( id.toUpperCase() );
}
var publicAPI = {
change: change,
identify: identify1
};
return publicAPI;
})( "foo module" );
foo.identify(); // foo module
foo.change();
foo.identify(); // FOO MODULE
通過在模塊實例的內(nèi)部保留對公共API對象的內(nèi)部引用，可以從內(nèi)部對模塊實例進(jìn)行修改民镜，包括添加或刪除方法和屬性啡专，以及修改他們的值。
現(xiàn)代的簡單模塊機(jī)制：
var MyModules = (function Manager() {
var modules = {}
function define(name, argus, func) {
for (var i = 0; i < argus.length; i++) {
argus[i] = modules[argus[i]]
}
modules[name] = func.apply(func,argus)
}
function get(name) {
return modules[name]
}
return {
define: define,
get: get
}
})()
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.call(undefined, "hippo")
); // Let me introduce: hippo
foo.awesome.call(undefined); // LET ME INTRODUCE: HIPPO
"foo"和"bar"模塊都是通過一個返回公共API的函數(shù)來定義的殃恒，“foo”甚至接受“bar”的實例作為依賴參數(shù)植旧，并能相應(yīng)的使用它。
它們符合前面列出的模塊模式的兩個特點：調(diào)用包裝了函數(shù)定義的包裝函數(shù)离唐，并且將返回值作為該模塊的API病附。
ES6的模塊機(jī)制
ES6中為模塊增加了一級語法支持。在通過模塊系統(tǒng)進(jìn)行加載時亥鬓，ES6會將文件當(dāng)作獨(dú)立的模塊來處理完沪。每個模塊都可以導(dǎo)入其他模塊或特定的API成員，同時也可以導(dǎo)出自身的API成員。
重構(gòu)之前的模塊得三個文件
- bar.js
function hello(who) {
return "Let me introduce: " + who
}
export hello
- foo.js
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("hippo"))
foo.awesome
import方法：將一個模塊中的一個或多個API導(dǎo)入到當(dāng)前作用域中覆积，并綁定在一個變量上听皿。
module方法：將整個模塊的API導(dǎo)入并綁定到一個變量上
export方法：將當(dāng)前模塊的一個標(biāo)識符導(dǎo)出為公共API
模塊文件中的內(nèi)容會被當(dāng)作包含在作用域閉包中一樣來處理。
