js模块化 AMD规范

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"])
  })
})()