ES6 学习笔记 —— （五）模块化

笔记内容为 尚硅谷Web前端ES6教程，涵盖ES6-ES11 教学课程笔记整理

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的好处

1. 防止命名冲突
2. 代码复用
3. 高维护性

模块化规范产品

ES6 之前的模块化规范有：

1. CommonJS => NodeJS、Browserify
2. AMD => requireJS
3. CMD => seaJS

ES6 模块化语法

模块功能主要由两个命令构成：export 和 import

• export 命令用于规定模块的对外接口
• import 命令用于输入其他模块提供的功能

模块的三种暴露方式

1. 分别暴露

export let school = 'abc'
export function teach() {
    console.log('I can teach')
}

2. 统一暴露

let school = 'abc'
function findJob() {
    console.log('I can find a job')
}
export {school, findJob}

3. 默认暴露

export default {
    school: 'abc',
    change: function() {
        console.log('I can change you')
    }
}

模块的引入语法

1. 通用的导入方式

import * as m1 from "./src/js/m1.js";

2. 解构赋值形式

• 导入时有同名变量，可以使用 as 重命名
• 默认暴露不能直接解构赋值为 default，需要将它重命名

import {school, teach} from "./src/js/m1.js"
import {school as abc, findJob} from "./src/js/m2.js"
import {default as xyz} from "./src/js/m3.js"

3. 简便形式，只针对默认暴露

import m3 from "./src/js/m3.js"