1.引言

      在實現js的模組化之前，我們首先想一下為什麼要實現模組化程式設計呢？實現模組化程式設計有什麼好處呢？或者說實現模組化程式設計我們可以解決什麼樣子的問題呢？如果在看本篇部落格之前你不懂js的作用域鏈，請務必先看js的作用域鏈原理：Javascript之作用域鏈

2.js實現模組化程式設計

      在一個Web網站開發過程中，肯定不是一個人單獨完成的，是由多個人共同完成一個網站的開發，每個人負責幾個js檔案的編寫，假設我們現在有一個專案由兩個人開發，A負責a.js編寫，B負責b.js的編寫，其中a.js有一個函式叫做deal，B中也有一個函式叫做deal。如下圖所示

a.js

    function deal(){
        return 1;
    }

b.js

    function deal(){
        return 2;
    }

當我們呼叫的時候肯定在主頁面這樣引用

   <script src="a.js"></script>
　　<script src="b.js"></script>

注意：這裡就出現了問題，我們在作用域鏈那裡講過，標籤的下面為一級作用域，同時一級作用域是共享的，也就是說在一級作用域中出現了兩個deal函式，那麼我們呼叫deal函式時，返回0還是返回1呢？（後引入的js檔案中的deal函式會把前面引入的js檔案中的deal函式覆蓋掉）這就造成了程式碼的不相容性，這才是一個函式不相容，當我們程式碼越來越多時，從程式碼中尋找bug也會是一個非常類的過程，所以實現js的模組化也是非常必要的（也就是控制js的作用域）

2.1利用function來建立模組（無返回值）

a.js

    var moduleA = function(){
        this._count = 0;
　　　　  this.deal= function(){
　　　　　　return 0;
　　　　};
　　}

b.js

    var moduleB = function(){
        this._count = 0;
　　　　 this.deal= function(){
　　　　　　return 1;
　　　　};
　　}

解釋：利用函式我們建立了兩個二級作用域，一個js檔案只向外暴漏一個屬性，這樣就很好了控制了作用域，但是有一個缺點，假設我們的_conut是私有屬性，那麼var a=new moduleA();alert(a._count)

2.2利用function來建立模組（有返回值）

為了解決上面的缺點，即我們不希望外界訪問類的私有屬性，我們通過給函式新增返回值實現

a.js

var moduleA = function(){
        this._count = 0;
　　　　this.deal= function(){
　　　　　　return 0;
　　　　};
        return {
            deal:this.deal
        }
　　}

解釋 : 此時var a=new moduleA();alert(a._count),這時候顯示a._count未定義。但是這一種寫法還是有缺點，比如，我想在我模組中使用jquery物件，那應該怎麼辦呢？

2.3利用function來建立模組（可傳參）

      我們利用function的建構函式實現模組內呼叫全域性物件

var moduleB = (function ($) {
    this.$=$;
　　　　

　　})($);

2.4動態新增模組方法

假設我們模組想要擴充套件方法，那麼我們應該怎麼實現呢？

var moduleA = (function (m){
       m.talk= function () {
　　　　　　
　　　　};
　　　　return m;

　　})(moduleA);

我們給moduleA動態添加了一個方法叫做talk

3.總結

在上面我們提供了4種方法來實現js的模組化程式設計，但是還是存在很多問題，比如：

   <script src="a.js"></script>
　　<script src="b.js"></script>

問題1：當我們載入js檔案的時候，若檔案過大，頁面會出現假死現象
問題2 : 我們實現模組的方式都是我們自己想的，所以缺少一個規範，即大家必須要用同樣的方式來寫模組

這兩個問題我們將在下一篇部落格介紹，也就是我們的AMD規範