2.5.1 模塊化簡介

最早前端JavaScript代碼量不大，統一放在一個文件內，如下面一段代碼：

    var name = 'weixin'，
        age = 12;
    function getName() {
        // 實現代碼
    }
    function getAge() {
        // 實現代碼
    }

后來前端代碼越來越多，為了便于管理和工作拆分，我們不得不把代碼拆分為多個文件，這時將上述代碼封裝到user.js文件中，需要用時引入頁面（或打包到一個文件）就行。初期團隊成員少，一切都運行正常，直到團隊越來越大，開始有人抱怨：我想定義一個name變量但user.js中已經存在，我不得不定義為myName；為什么我在自己代碼中定了getAge方法就導致別人代碼出問題了呢？通過這種文件拆分的工作我們只是對代碼做了物理上的分離，能初步實現多人開發和簡單的代碼管理，但并沒有真正做到作用域的隔離，由于不知道其他文件內已存在的變量名，甚至讓全局沖突問題變得更容易、更嚴重。

再后來為了避免這種全局沖突，大家決定參考Java的方式，引入命名空間和閉包來解決變量沖突問題。于是user.js里的代碼變成了如下這樣：

    ( function() {
      myProject = myProject || {}; // 定義全局命名空間
      myProject.user = {};
      myProject.user.name = 'weixin';
      var age = 12; // 閉包內變量，外部不能訪問
      myProjecct.user.getName = function() {
        // 實現代碼
      }
      myProject.user.getAge = function() {
        // 實現代碼
      }
    } )();

這樣別的同事可以通過myProject.user獲取name，調用getName和getAge方法，通過命名空間，的確能緩解大部分沖突，但是為此我們不得不記住很長一串命名空間，同時當我使用user這個空間后，別人就不能使用，這也不能完美地解決問題。同時更可怕的是如果user.js依賴另外一個utils.js，別的同事必須通過閱讀user.js源碼搞懂這層依賴關系，按順序引入utils.js、user.js，直接引入user.js將會導致他代碼出錯，如果utils還依賴別的資源他還得必須搞懂相關的所有依賴，而他僅僅是想調用我的getName方法，這對調用的同事來說無疑是個噩夢。這時我們需要一種新的組織方式，于是誕生了模塊化：

□模塊是一段JavaScript代碼，具有統一的基本書寫格式。

□模塊之間通過基本交互規則，能彼此引用，協同工作。

目前模塊化的規范不統一，大致可分為CommonJS和ES6兩種規范，大家有興趣可以參考網上相關資料，小程序模塊化機制比較接近CommonJS規范，無論哪種規范，學習起來都十分簡單。