AMD 和 CMD 模块化规范

随着ES6模块化标准的普及, AMD和CMD的使用逐渐减少, 本章内容作为了解即可

AMD 模块化规范

官网: https://requirejs.org/

AMD(Asynchronous Module Definition)是一种用于浏览器环境的JavaScript模块化规范, 允许异步加载模块, 适合浏览器端的开发

环境准备

第一步: 准备文件结构

• 下载 require.js

project/
├── js/ # 业务逻辑代码
│   ├── main.js # 汇总各模块
│   ├── school.js
│   └── welcome.js
├── libs/ # 第三方库
│   └── require.js # AMD 核心文件
└── index.html

第二步: 在index.html中配置main.js与require.js

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

第三步: 在main.js中编写模块配置对象, 注册所有模块

// AMD_require.js 模块化的入口文件, 需要编写配置对象
reuirejs.config({
  // 基本路径
  baseUrl: './js',

  // 模块标识名与模块路径映射
  paths: {
    school: 'school',
    student: 'student',
    welcome: 'welcome'
  }
})

导出数据

AMD规范使用define函数来定义模块和导出模块

• 示例: /js/welcome.js

define(function() {
  const message = '打豆豆'

  function getStatus() {
    return true
  }

  // 导出数据
  return { message, getStatus }
})

导入数据

导入数据则需要define传人两个参数, 分别为: 依赖项数组和回调函数

• 示例: /js/welcome.js

/*
  ['welcome'] 表示当前模块要依赖的模块名称
  回调函数接收到的是 welcome 模块导出的数据
*/
define(['welcome'], function(message) {
  const name = '家里蹲大学'
  const slogan = `吃饭, 睡觉, ${message}`

  function getTel() {
    return '010-987650321'
  }

  // 导出数据
  return { name, slogan, getTel }
})

CMD 模块化规范

CMD是另一种JavaScript模块化规范, 主要应用于浏览器环境, 由国内开发者玉伯(Sea.js作者)提出

环境准备

第一步: 准备文件结构

• 下载 sea.js

project/
├── modules/ # 业务逻辑代码
│   ├── main.js # 汇总各模块
│   ├── school.js
│   └── welcome.js
├── libs/ # 第三方库
│   └── sea.js # CMD 核心文件
└── index.html

第二步: 在index.html中配置main.js与sea.js

<script type="text/javascript" src="./libs/sea.js"></script>

<script type="text/javascript">
  seajs.use('./modules/main.js')
</script>

导出数据

CMD同样使用define函数定义模块并导出数据

• 示例: /modules/welcome.js

/*
  收到 require exports module 三个参数
  1. require 用于引入其他模块
  2. exports, module 用于导出数据
*/
define(function(require, exports, module) {
  const message = '打豆豆'

  function getStatus() {
    return true
  }

  module.exports = { message, getStatus }
})

导入数据

CMD规范中使用收到的require参数进行模块导入

• 示例: /modules/school.js

define(function(require, exports, module) {
  // 引入 welcome 模块
  const welcome = require('./welcome.js')

  const name = '家里蹲大学'
  const slogan = `吃饭, 睡觉, ${welcome.message}`

  function getTel() {
    return '010-987650321'
  }

  // 导出数据
  exports.name = name
  exports.slogan = slogan
  exports.getTel = getTel
})

使用模块

• 示例: main.js

define(function(require) {
  const school = require('./school.js')

  console.log(school)
})