解决问题

  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__