JavaScript模塊化開發

1：發展歷史

早期的Javascript是做爲瀏覽器的腳本語言，使用<script>標籤直接引入，沒有所謂的模塊化。也就是說若是咱們須要一個js文件，咱們就加一個<script>標籤，把須要的js引入進來。這種方式的特色在於：簡單粗暴。

可是當項目愈來愈大，依賴愈來愈多時可能就會出現問題，好比邏輯愈來愈混亂，頁面也越複雜，而後可維護性就變差了，除此以外還存在全局變量暴露、文件的引入順序的問題。好比說一個文件引入另外一個文件，另外一個文件又依賴另外一個文件，那麼這三個加載數據就會很重要，若是第一個沒有加載完，那麼接下來就會出錯。

實際上，在JavaScript的發展歷史上，第一個真正模塊化的是nodejs，nodejs就是使用了咱們其中的一個模塊化標準的規範，它就是common js。

有了這個模塊化的概念後，便有了node，node的文件管理都是基於模塊化的；咱們能夠從另外一個角度來看，若是JavaScript想要進軍服務端，在服務端沒有模塊化這是一個災難，所以common js社區制定了一個commonjs規範，也就是模塊化的規範；有了這個規範以後，node就出現了。

JavaScript引入模塊化解決了哪些問題：

• 避免了全局污染

• 模塊複用，提升了開發效率和協做

• 模塊功能單一職能方便維護

• 解決了文件依賴順序

模塊化的標準（有三個）：

• CommonJs

• AMD - 異步模塊

• CMD - 通用模塊

2：CommonJs(CommonJS社區貢獻)

定義了哪些規範：

• 定義了模塊標識規範，也就是說這個模塊這個文件怎麼命名

  var basic = 1; var increase = function(value){   return value + basic; } module.exports.increase = increase;

• 定義了一個全局的require，require是引用模塊，咱們能夠傳入模塊標識符來引入其餘模塊，解決了模塊之間的相互引用。引入其餘模塊咱們引入的是另外的模塊導出的內容，或者叫作暴露的API。定義require的同時，也定義了一個exports導出模塊。

  var myModule = require('./myModule.js'); console.log(myModule.increase(1));

• 模塊嵌套，依次加載引用模塊

• 經過exports暴露API

Common.js解決了模塊依賴可是沒有解決順序。

3：AMD(Asynchronous Module Definition)

AMD又叫作異步加載模塊，它作的主要的事情是在加載模塊的時候容許傳入另一個回調，在加載完以後，就會執行這個回調，只有在回調裏面，咱們就能保證須要加載的文件已經加載完成了。

AMD使用define關鍵字定義模塊，define接收三個參數：id,dependencies,factory；第一個參數是id，或者是模塊的名字，第二個參數是模塊的依賴，這個依賴是一個數組['module1','module2']，第三個參數是工廠，也就是模塊的邏輯，咱們的回調函數。

• 定義模塊

  define(\['increase', 'reduce'\], function(increase, reduce) {
      return function(value) {
          return increase(value) + reduce(value);
      }
  });

• 引入模塊

  require.config({
      baseUrl: "./js",
      paths: {
          "myModule": "myModule.js"
      }
  });
  require(\['myModule'\], (myModule) => console.log(myModule(1)));

AMD解決了瀏覽器端異步的依賴問題。

4：CMD(Common Module Definition)

CMD 是由一個阿里巴巴的前端工程師提出的一個概念，開源出的一個代碼叫sea.js。 AMD叫require.js，CMD叫sea.js。CMD解決了按需加載，它不像AMD同樣在引入第一次時就所有加載完成。 CMD有一個標準，一個文件只能有一個模塊。

定義模塊

define(function(require,exports,module) {
    var increase = require('increase');
    var reduce = require('./reduce');
    module.exports = function(value){
        return increase(value) + reduce(value);
    }
});

引入模塊

seajs.use('./myModule',function(myModule){
    console.log(myModule(1));
})