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。

 

最近在學習node，node.js的模塊系統，就是參照CommonJS規範實現的。只使用require()，用得一個爽字

 

例如：

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：加載成功以後的回調函數。