javascript模塊化詳解

模塊化：每個模塊只完成一個獨立的功能，然後提供該功能的介面。模塊間通過介面訪問。模塊中的（過程和數據）對於其它模塊來說是私有的（不能訪問修改）

原始人寫法：

1 function m1(){
2 　　//...
3 }
4 function m2(){
5 　　//...
6 }

對象封裝寫法

1 var loveThing = {
2   mylove : "coding",
3   getLove :function() {
4     returnthis.mylove;
5   },
6   sayLove : function(thing) {
7     console.log(thing);
8   }
9 }

1 console.log(loveThing.getLove());//>>> coding
2 loveThing.sayLove('girl');//>>> girl

這種寫法已經有點模塊的樣子了，一下就能看出這幾個函數和變數之間的聯繫。

缺點在於所有變數都必須聲明為公有，所以都要加this指示作用域以引用這些變數。更危險的是，在對象之外也能輕鬆更改裡面的參數：

1 loveThing.mylove = "sleeping";
2 console.log(loveThing.getLove());//>>> sleeping

立即執行函數

外部可以訪問my這個介面，但以下代碼（過程和數據）對於其它模塊來說是私有的

以下這種方法返回一個對象，讓其他模塊去調用

 1 var loveThing = (function(){ 
 2     var my = {}; 
 3     var love = "coding"; 
 4      my.getLove = function() { 
 5         return love; 
 6      } 
 7      my.sayLove = function(thing) { 
 8         console.log(thing); 
 9      } 
10      return my; 
11 })(); 
12 console.log(loveThing.getLove());//>>> coding loveThing.sayLove('reading');//>>> reading

將局部的函數提升到 windows 下麵，可以讓其他地方使用。

1 (function(){
2   // private code
3     var  a = function(){
4      
5   }
6   window.a = a;
7 })();

我們試著獲取裡面的變數：

1 console.log(loveThing.love);//>>> undefined

果然，外部根本看不見裡面的零件，只能使用提供的介面。這樣才能保證私有變數的安全。 

輸入全局變數

獨立性是模塊的重要特點，模塊內部最好不與程式的其他部分直接交互。為了在模塊內部調用全局變數，必須顯式地將其他變數輸入模塊。

下麵除了保證模塊的獨立性，還使得模塊之間的依賴關係變得明顯。

1 var module1 = (function ($,) {
2 　　　　//...
3 })(jQuery,);

CommonJS和AMD

目前，通行的Javascript模塊規範共有兩種：CommonJS和AMD。

1 var math = require('math'); 

然後，就可以調用模塊提供的方法：

1 var math = require('math'); 
2 math.add(2,3); // 5 

然而，由於一個重大的局限，使得CommonJS規範不適用於瀏覽器環境。還是上一節的代碼，如果在瀏覽器中運行，會有一個很大的問題，你能看出來嗎？ 

第二行math.add(2, 3)，在第一行require('math')之後運行，因此必須等math.js載入完成。也就是說，如果載入時間很長，整個應用就會停在那裡等。

因此，瀏覽器端的模塊，不能採用"同步載入"（synchronous），只能採用"非同步載入"（asynchronous）。這就是AMD規範誕生的背景。 

AMD是"Asynchronous Module Definition"的縮寫，意思就是"非同步模塊定義"。require.js實現了AMD規範

AMD也採用require()語句載入模塊，但是不同於CommonJS，它要求兩個參數

require([module], callback); 

• [module]：數組，要載入的模塊；

• callback：載入成功之後的回調函數。