JS模塊化和閉包
js最初作為一個在瀏覽器中運行的腳本語言囱桨，設(shè)計的目標(biāo)是用來給html增加交互行為浙于，早期的網(wǎng)站都是在服務(wù)器端生成并返回給瀏覽器稻轨，js也只對單獨的一個html進(jìn)行操作政钟，所以模塊化并沒有在早期的JS中得到很好的考慮，隨著瀏覽器js引擎越發(fā)的快速潮秘，現(xiàn)在已經(jīng)有很多前端框架琼开，并不依賴與服務(wù)器生成html，而是自己直接通過js來生成枕荞，最典型的例子就是我們常聽到的webapp」窈颍現(xiàn)在所有的js庫都包裝的非常好了，我們今天看看一些js模塊化的基礎(chǔ)知識吧买猖。
名稱空間namespace
在js中如何實現(xiàn)命名空間改橘，我們來看一個例子。
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<body>
<button id="mybtn" onclick="display();">點我加載列表</button>
<h1>我想要不死族的英雄</h1>
<ul id="mylist"></ul>
<script type="text/javascript" src="./namespacejs1.js"></script>
<script type="text/javascript" src="./namespacejs2.js"></script>
</body>
</html>
我們先定義一個html文件玉控。點擊里面的按鈕飞主，顯示魔獸爭霸的軍隊。響應(yīng)按鈕的代碼分別定義在namespacejs1.js和namespacejs2.js兩個文件中高诺。
這是namespacejs1.js
var list = ['死亡騎士','巫妖','恐懼魔王'];
function display(){
var mylist = document.getElementById("mylist"),
fragment = document.createDocumentFragment(),
element;
for(var i = 0, x = list.length; i<x; i++){
element = document.createElement("li");
element.appendChild( document.createTextNode( list[i]) );
fragment.appendChild(element);
}
console.log(importGlobalVariable);
mylist.appendChild(fragment);
}
這是namespacejs2.js
var list = ['圣騎士','大法師','山丘之王'];
當(dāng)我們點擊按鈕的時候碌识，會顯示什么東東呢。我們期望顯示不死族的英雄（namespacejs1.js中的list）虱而，但是這里會顯示人類的英雄（namespacejs2.js中的list）筏餐。顯然，我們想要的數(shù)據(jù)被覆蓋了牡拇。怎么樣才能解決這個問題呢魁瞪？我們來加上名稱空間吧』莺簦看看改進(jìn)后的namespacejs1.js导俘。
var namespace1 = {
list : ['死亡騎士','巫妖','恐懼魔王'],
display : function display(){
var mylist = document.getElementById("mylist"),
fragment = document.createDocumentFragment(),
element;
for(var i = 0, x = list.length; i<x; i++){
element = document.createElement("li");
element.appendChild( document.createTextNode( this.list[i]) );
fragment.appendChild(element);
}
mylist.appendChild(fragment);
}
};
這時候點擊按鈕會沒有用，需要稍微改動一下
<button id="mybtn" onclick="namespace1.display();">點我加載列表</button>
可以看到display在namespace1的名稱空間下面了剔蹋。問題已經(jīng)圓滿解決旅薄。但是如果我們想擴展namespace1的功能怎么辦呢，難道只能修改namespace1.js的源文件嗎泣崩，還有l(wèi)ist很不安全啊少梁，誰都可以改動它，如何把它變成私有變量呢矫付？
js的封裝
在js中并沒有私有公有的直接支持凯沪，但是不代表js語言不能完成這個。我們看一下如何隱藏list买优。
var namespace1 = (function(){
var importGlobalVariable = gv;
var list = ['死亡騎士','巫妖','恐懼魔王'];
function display(){
var mylist = document.getElementById("mylist"),
fragment = document.createDocumentFragment(),
element;
for(var i = 0, x = list.length; i<x; i++){
element = document.createElement("li");
element.appendChild( document.createTextNode( list[i]) );
fragment.appendChild(element);
}
mylist.appendChild(fragment);
}
return {
display:display
};
})();
這段代碼返回了一個對象著洼，在這個對象中我們只能訪問display方法,是不是很牛逼呢樟遣，這樣就解決隱藏問題。
js模塊的擴展
我們知道js的繼承是用原型鏈來實現(xiàn)的身笤，但是這里要討論的是模塊的擴展，所以這邊不會說道繼承的問題葵陵。如何擴展namespace1的功能呢液荸。我么看一下下面的代碼。
var namespace1 = (function(n1){
var listArmy = ['4個蜘蛛','2個食尸鬼','2個冰龍']
n1.displayArmy = function(){
n1.display();
var mylist = document.getElementById("mylist"),
fragment = document.createDocumentFragment(),
element;
for(var i = 0, x = listArmy.length; i<x; i++){
element = document.createElement("li");
element.appendChild( document.createTextNode( listArmy[i]) );
fragment.appendChild(element);
}
mylist.appendChild(fragment);
}
return n1;
})(namespace1);
這段代碼我們用來增加一個displayArmy的方法脱篙，用來顯示不死族軍隊娇钱，也就是listArmy的數(shù)據(jù)吧。
我們看到上面的代碼把namespace1作為參數(shù)傳入到一個立刻調(diào)用函數(shù)中绊困，這樣在里面給它增加一個函數(shù)文搂。有沒有感覺js很強大啊。
閉包（Closures）
如果已經(jīng)習(xí)慣了C秤朗，C++煤蹭，C#或者Java，那么上面的實現(xiàn)簡直匪夷所思取视，感覺變量的作用域和生命周期都很奇怪硝皂。那么我們說說js中的一個重要概念閉包吧。
定義
Closures are functions that refer to independent (free) variables.
這里就不翻譯了作谭，因為翻譯過來實在是很奇怪稽物，比如，閉包是那些引用了獨立變量的函數(shù)折欠。那么按照定義是否可以認(rèn)為函數(shù)就是閉包呢贝或，為了搞清楚閉包的概念，我們需要了解函數(shù)對象锐秦，變量生命周期咪奖，和嵌套的作用域三個概念。
函數(shù)對象
什么是函數(shù)對象呢农猬，在C語言中和C++語言中赡艰，可以想函數(shù)那樣用()去調(diào)用，看起來和函數(shù)一樣的對象就叫函數(shù)對象斤葱。比如在C語言中：
typedef void (*func_t)(int); //定義函數(shù)指針
//定義一個函數(shù)
void f(int n){
printf("node(?)=%d\n",n);
}
int main(){
func_t pf = f;
f(1);
}
可以看到f很像一個函數(shù)吧慷垮，但是呢，其實它只是一個函數(shù)指針而已揍堕。在C++語言中料身，我們也看一個例子。
class Foreach
{
private:
struct node * myList;
public:
Foreach(){
}
~Foreach(){}
void operator()(){
//做點有意義的事情吧
}
};
int main(){
Foreach *foreach = new Foreach();
(*foreach)();
}
可以看到foreach對象也很像函數(shù)衩茸。
我們在看一下js中的函數(shù)對象吧芹血。
var f = function(){}；
f();
看看，是不是很簡單幔烛。
嵌套的作用域
我們已經(jīng)看到j(luò)s的函數(shù)對象的定義已經(jīng)很方便了啃擦，那么還有什么和傳統(tǒng)語言不一樣的地方呢？
我們看一下這個代碼饿悬。
var x = 10;
function f(){
var y=15;
function g(){
var z=25;
alert(x+y+z);
}
g();
}
f();//顯示50
這段代碼在C語言中沒法實現(xiàn)令蛉，原因是C語言的變量無法訪問當(dāng)前作用域外的變量。也就是說函數(shù)g里面訪問不了y狡恬，函數(shù)f也訪問不了x珠叔。但是js卻能做到。我們看一下這樣有什么強大的地方弟劲。
#include <stdio.h>
#include <stdlib.h>
struct node{
struct node *next;
int val;
};
// 函數(shù)指針祷安，JS中的函數(shù)對象
typedef void (*func_t)(int);
void foreach(struct node *list, func_t func){
while(list){
func(list->val);
list = list->next;
}
}
void f(int n){
printf("node(?)=%d\n",n);
}
int main(){
func_t pf = f;
f(1);
// bool b = false;
// b = true;
// b = "zifuchuan";
struct node * list = 0, *l;
int i;
for(i=0; i<4; i++){
l = malloc(sizeof(struct node));
l->val = i;
l->next = list;
list = l;
}
i=0;l=list;
//這個循環(huán)可以打印出index，也就是i兔乞，如下是打印結(jié)果
//node(0) = 3
//node(1) = 2
//node(2) = 1
//node(3) = 0
while(l){
printf("node(%d) = %d\n", i++, l->val);
l = l->next;
}
//foreach里面再調(diào)用函數(shù)f汇鞭，就不能訪問i了，如下是打印結(jié)果
//node(?)=3
//node(?)=2
//node(?)=1
//node(?)=0
foreach(list,f);
}
我們看到C語言的高階函數(shù)（函數(shù)調(diào)用函數(shù)）是沒法訪問外部變量的报嵌。那么js寫這段代碼怎么弄呢虱咧？
function foreach(list, func){
while(list){
func(list.val);
list=list.next;
}
}
var i = 0;
//這里可以使用變量i
foreach(list,function(n){
console.log("node("+ i +") = " +n);
i++;
});
我們發(fā)現(xiàn)js的變量作用域比C語言要牛逼一點吧。
生命周期
下面再看看js閉包的更牛逼的地方吧锚国。
function extent(){
var n=0;
return function (){
n++;
console.log("n="+n);
}
}
f = extent();
f();//=>n=1
f();//=>n=2
這里腕巡，當(dāng)extent函數(shù)執(zhí)行完畢后，n變量應(yīng)該掛了才對血筑，但是绘沉，我們通過結(jié)果看到，n變量還活的好好的呢豺总。
總結(jié)
屬于外部作用域的局部變量车伞，被函數(shù)對象給“封閉”在里面了。閉包（“closure”）這個詞原本就是封閉的意思喻喳。被封閉起來的變量的壽命另玖，與封閉它的函數(shù)對象的壽命相等。也就是說表伦，當(dāng)封閉這個變量的函數(shù)對象不再被訪問谦去，被垃圾回收器回收掉時，這個變量才掛蹦哼。
現(xiàn)在大家明白閉包的定義了吧鳄哭。在函數(shù)對象中，將局部變量封閉起來的結(jié)構(gòu)被叫做閉包纲熏。因此妆丘，C語言的函數(shù)指針并不是閉包锄俄，JavaScript中的函數(shù)對象才是閉包。另外C++等傳統(tǒng)面向?qū)ο笳Z言勺拣，也加入了對函數(shù)式編程的支持奶赠，其中一方面就是Lambda表達(dá)式，也有閉包的概念药有。
全局變量的導(dǎo)入
現(xiàn)在大家理解閉包的概念了车柠，我們看看全局變量導(dǎo)入的問題。因為閉包中內(nèi)部變量會一直持有外部變量塑猖，所以我們最好把外部變量當(dāng)做參數(shù)傳遞給我們要使用的內(nèi)部函數(shù)，這樣會節(jié)省內(nèi)存和查找變量的時間谈跛。因為找到一個外部變量羊苟，需要從內(nèi)部往外部一層層的查找，很費時間（對解析器來說）感憾。另外蜡励，一起開發(fā)代碼的人也會很迷惑這個變量到底在那里定義的，容易出錯阻桅，我們來看一個例子凉倚。
var globalVariable = "我是外層變量,從disply函數(shù)找到我需要很久很久";
var namespace1 = (function(gv){
var importGlobalVariable = gv;
var list = ['死亡騎士','巫妖','恐懼魔王'];
function display(){
var mylist = document.getElementById("mylist"),
fragment = document.createDocumentFragment(),
element;
for(var i = 0, x = list.length; i<x; i++){
element = document.createElement("li");
element.appendChild( document.createTextNode( list[i]) );
fragment.appendChild(element);
}
console.log(importGlobalVariable);
mylist.appendChild(fragment);
}
return {
display:display
};
})(globalVariable);
這個例子把globalVariable當(dāng)成參數(shù)傳入，這樣他就在匿名function函數(shù)的作用域里面了嫂沉。
我們不希望解析器去一直往上查找稽寒，所以幫幫它嘍。
