解决问题

  1. 全局变量污染
  2. 依赖混乱

模块化标准

名称 简称 标准 运行环境 详细文档
CommonJS CMJ 社区标准 node环境 CommonJS文档
ES Module ESM 官方标准 node环境、浏览器 ES Module文档
Asynchronous Module Definition AMD require.js 浏览器
Common Module Definition CMD sea.js 浏览器

1. CommonJS

标准类型:社区规范

支持环境:node

依赖类型:动态依赖

1-1. 如何导出

1
module.exports = 导出的值

1-2. 如何导入

注意: 路径只能以 ./../ 开头

1
require("模块路径") //函数返回模块导出的值

2. ES Module

标准类型:官方标准

支持环境:node、浏览器

依赖类型:静态依赖、动态依赖

2-1. 如何导出

ES Module 的导出

ES Module 分为两种导出方式:

  • 具名导出(普通导出),可以导出多个
  • 默认导出,只能导出一个

一个模块可以同时存在两种导出方式,最终会合并为一个「对象」导出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
export const a = 1;     //具名,常用
export function b() {}; //具名,常用
export function c(){} //具名,常用

const d = 2;
export { d } //具名

const k = 10
export { k as temp } // 具名

// export default 3 // 默认,常用
// export default function() {} // 默认,常用
// const e = 4;
// export { e as default } // 默认

const f = 4, g = 5, h = 6
export { f, g, h as default} // 基本 + 默认

// 以上代码将导出下面的对象
/*
{
a: 1,
b: fn,
c: fn,
d: 2,
temp: 10,
f: 4,
g: 5,
default: 6
}
*/

注意: 导出代码必须为顶级代码,即不可放到代码块中

2-2. 如何导入

针对具名导出和默认导出,有不同的导入语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 仅运行一次该模块,不导入任何内容
import "模块路径"

// 常用,导入属性 a、b,放到变量a、b中。a->a, b->b
import { a, b } from "模块路径"

// 常用,导入属性 default,放入变量c中。default->c
import c from "模块路径"

// 常用,default->c,a->a, b->b
import c, { a, b } from "模块路径"

// 常用,将模块对象放入到变量obj中
import * as obj from "模块路径"



// 导入属性a、b,放到变量temp1、temp2 中
import {a as temp1, b as temp2} from "模块路径"

// 导入属性default,放入变量a中,default是关键字,不能作为变量名,必须定义别名
import {default as a} from "模块路径"

//导入属性default、b,放入变量a、b中
import {default as a, b} from "模块路径"

// 以上均为静态导入

import("模块路径") // 动态导入,返回一个Promise,完成时的数据为模块对象

注意1: 静态导入的代码必须为在代码顶端,也不可放入代码块中

注意2: 静态导入的代码绑定的符号是常量,不可更改

3. 【扩展】AMD

全称是Asynchronous Module Definition,即异步模块加载机制

require.js实现了AMD规范

在AMD中,导入和导出模块的代码,都必须放置在define函数中

1
2
3
4
define([依赖的模块列表], function(模块名称列表){
//模块内部的代码
return 导出的内容
})

4. 【扩展】CMD

全称是Common Module Definition,公共模块定义规范

sea.js实现了CMD规范

在CMD中,导入和导出模块的代码,都必须放置在define函数中

1
2
3
define(function(require, exports, module){
//模块内部的代码
})

__END__