初識模塊化AMD和require.js

什麼是模塊化

模塊化是軟件系統的屬性，這個系統被分解爲一組高內聚，低耦合的模塊。那麼在理想狀態下我們只需要完成自己部分的核心業務邏輯代碼，其他方面的依賴可以通過直接加載被人已經寫好模塊進行使用即可。
作爲一個模塊化系統所必須的能力：
1. 定義封裝的模塊。
2. 定義新模塊對其他模塊的依賴。
3. 可對其他模塊的引入支持。

如何書寫模塊

一、函數寫法

  function m1(){
    //...
  }
  function m2(){
    //...
  }

函數m1和m2就是兩個最原始的模塊；但是它的缺點是，函數名高度暴露，污染了全局變量。

二、對象寫法

var module = new Object({
     m1: function(){
        //...
     },
     m2: funciton(){
        //...
     }
  })

以上代碼完成了模塊的書寫，調用它們只需要module.m1, module.m2即可。但是，缺點是，對象裏面的成員暴露出來了，在對象外部可以任意修改成員的值，例如：

module.m1=function(){
 //...修改原來的方法

三、立即執行函數的寫法

var module = function(){
   var m1 = funtion(){
      //...
    };
  var m2 = funtion(){
     //...
    };
  return {
     m1: m1,
     m2: m2
  }
}();

使用模塊 new module.m1(); new module.m2();

AMD規範

AMD：Asynchronous Module Definition 異步模塊定義；
官方文檔 https://github.com/amdjs/amdjs-api/wiki/AMD
語法規範：

require([module],callback)

第一個參數［module］，是一個數組，裏面的成員就是需要加載的模塊。第二個參數callback，則是加載成功之後的回調函數；因爲是異步加載，只有當依賴的模塊加載完成後，才能運行後面的回調函數，所以適合瀏覽器環境，瀏覽器加載模塊的速度往往取決於網速，所以比較慢，需要異步加載才行。

require.js

RequireJS 是一個JavaScript模塊加載器。它非常適合在瀏覽器中使用，但它也可以用在其他腳本環境，就像 Rhino and Node。使用RequireJS加載模塊化腳本將提高代碼的加載速度和質量。

在沒有出現require.js之前，在html中引入js需要很多script標籤，就像下面，不僅不便於書寫起來繁雜，並且爲了保證模塊加載的順序正確，必須保證依賴越多的js文件放在後面。

　　<script src="1.js"></script>
　　<script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>
　　<script src="6.js"></script>

然而，require.js的出現解決以上問題，它具有以下兩個優點：

實現js的異步加載，避免網頁失去響應。
管理模塊之間的依賴性，便於代碼的編寫和維護。

require.js的使用

step1、引入require.js文件

從官網下載require.js文件 http://requirejs.org/，然後再html中引入，注意要在body最底部引入，或者在script標籤中加入defer async=”true”

<script data-main="script/main.js" src="script/require.js"></script>

step2、模塊的定義

require.js模塊定義的規則符合AMD規範；
define（）的第一個參數是一個數組，是依賴模塊；第二參數是回調函數，當依賴加載完成後才能運行；

define(['module1'], function(m1){
    m1.doSomeThing();//...參數m1爲加載的依賴模塊'module';
}

step3、主模塊的書寫

<script data-main="script/main.js" src="script/require.js"></script>

這裏面的main.js文件，我把它稱爲”主模塊”，意思是整個網頁的入口代碼；書寫規則如下：

//main.js
require.config(
    paths:{jquery:'jquery-1.8.3.min'}
});
require(['jquery','window'], function($,w){
    $("#a").click(function(){
       new w.Window().alert('shaojinghong',function(){
        alert('button is clicked');
       });
    });
});

• require.config(
  paths:{jquery:’jquery-1.8.3.min’}
  });將模塊名和文件名關聯起來，前提是main.js和jquery-1.8.3.min.js 在一個文件夾下；

• 如果模塊和main.js不在同一個文件下，可以使用

　　require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min"
　　　　　　｝

• 如果模塊在cdn中，可以使用：

　　require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});