AMD规范与require.js

AMD规范

• AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"
• 它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行
• AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：require([module], callback)
• 第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数

require.js

• require.js是符合AMD规范的js库，通常使用require.js来实现AMD规范，进行模块的导出与导入
• 导入require.js的时候，需要添加data-main属性，代表网页程序的主模块

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

• 在主模块中，仍然符合AMD规范，使用require()函数来实现。第一个参数为数组，保存要依赖的模块，第二个参数为回调函数
• 使用require.config()方法对模块的加载方式进行自定义。该方法写在主模块main.js的头部
• 参数为对象，对象中的paths属性可以指定对应模块的名称以及路径
• baseUrl属性，可以指定对应模块公共的路径部分

require.js加载

• 对于使用require.js进行加载的模块，也符合AMD规范
• 使用define()方法进行加载，加载之后的模块可以被主模块所调用。define()方法与require()方法一致，有两个参数，分别是依赖的模块数组以及回调函数
• 当需要加载非AMD规范的模块时，不能直接使用，首先需要使用require.config()方法进行配置
• 在参数对象中添加shim属性进行非AMD规范模块的配置，shim属性是一个对象
• shim属性的值为要添加的模块名称，在模块中添加exports与deps属性
• exports属性代表外部模块引入时调用的模块名称；deps属性为一个数组，代表该模块引入时所依赖的其他模块
• moduleA.js

// 定义没有依赖的模块

define(function() {
  let data = 'moduleA.js'
  function getData() {
    return data;
  }
  return {getData}
});

• moduleB.js

// 定义有依赖的模块

define(['moduleA'], function(moduleA) {
  let msg = "moduleB.js"

  function getMsg() {
    console.log(msg, moduleA.getData());
  }

  return {getMsg}
  
});

• main.js

(function () {
  require.config({
    baseUrl: "js/modules/",
    paths: {
      moduleA: "moduleA",
      moduleB: "moduleB",
    },
    shim: {
      moduleC: {
        exports: "moduleC",
      },
    },
  });

  require(["moduleB", "moduleC"], function (moduleB, moduleC) {
    moduleB.getMsg();
    moduleC.showTest();
  });
})();