1 關於amd

Asynchronous Module Definition 非同步模組定義
https://github.com/amdjs/amdjs-api/wiki/AMD

專門用於瀏覽器端，再amd規範中，模組的載入是非同步的

2 暴露模組

使用define定義暴露的模組,在暴露之前需要在入口檔案配置好模組與路徑的對映
define的陣列新參表示所需要的依賴，這些依賴可以從回撥函式的形參裡面拿到

main.js

(function () {
    // 配置
    require.config({
        // 基本路徑 為下面地址對映做配置
        baseUrl: '.',
        // 模組名與地址對映
        paths: {
            'module1': 'module/module1', // 配置之後可以用require匯入模組
            'module2': 'module/module2',
            'jquery':'../../lib/jquery-1.10.1'
        }
    })

    // 引入使用模組
    require(['module2'], function (pageRender) {
        pageRender.showMsg()
    })
}())
 

2.1 暴露沒有依賴的模組

define([], function () {
    let msg = 'module without dependency'
    return {
        msg
    }
})

2.2 暴露有依賴的模組

define([
    'jquery',
    'module1'
], function ($, data) {
    function showMsg() {
        $('body').css({ background: 'lightblue' })
        alert("module：" + data.msg)
    }
    return {
        showMsg
    }
});
 

3 引入模組

// 引入使用模組
require(['module2'], function (pageRender) {
    pageRender.showMsg()
})

4 使用不相容的模組

在入口檔案main.js中定義:

(function () {
  require.config({
    //基本路徑
    baseUrl: "js/",
    //模組標識名與模組路徑對映
    paths: {
      //第三方庫
      'jquery' : 'libs/jquery-1.10.1',
      'angular' : 'libs/angular',
      'angular-messages' : 'libs/angular-messages',
      //自定義模組
      "alerter": "modules/alerter",
      "dataService": "modules/dataService"
    },
    /*
     配置不相容AMD的模組
     exports : 指定匯出的模組名
     deps  : 指定所有依賴的模組的陣列
     */
    shim: {
      'angular' : {
        exports : 'angular'
      },
      'angular-messages' : {
        exports : 'angular-messages',
        deps : ['angular']
      }
    }
  })
  //引入使用模組
  require( ['alerter', 'angular', 'angular-messages'], function(alerter, angular) {
    alerter.showMsg()
    angular.module('myApp', ['ngMessages'])
    angular.bootstrap(document,["myApp"])
  })
})()