携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情 >>

一、什么是前端模块化

模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便地使用别人的代码，要用什么功能就加载什么模块。且模块可以存储多个独立的功能块，复用性高

1. 模块化开发的好处

避免变量污染，命名冲突
提高代码利用率
提高维护性
依赖关系的管理

2. 模块定义的流程：

定义模块（对象）
导出模块
引用模块

二、ES6 Module

ES6 模块化，import 导入 export 导出与 Common.js、CMD.js、AMO.js 不同。属于纯静态加载外部文件。也称为：编译时加载。

1. import 导入

// 导入外部文件变量
import {a, _b ,c} from './profile'

// 也可以使用 as 关键字重命名导入的变量
import {stream1 as firstVal} from './profile'

1.1 模块的整体加载

导入模块时可以使用 * 来指定对象，将输出值都加载到这个对象上。（Echarts 也是这种导入法）

// 指定 circle 对象
import * as circle from './module1'
// 使用导入的方法
circle.foo()
circle.bar()

// 因为 ES6 的模块加载是完全静态的，所以在运行时是不允许改变的
// 下面两行代码都会报错
circle.foo = 123
circle.bar = function(){}

1.2 import() 方法

因为 import 是静态加载的，所以必须将 import 导入语句放在代码的最上面，否则就会报错。但是可以使用 import() 函数实现异步、动态加载。

// 获取 DOM 元素存放加载结果
const main = document.querySelector('main')
// 使用变量存储加载指定的模块名
let someVariable = 'profile'

// 使用 import() 函数加载外部文件
import(`./section-modules/${someVariable}.js`)
	// 加载成功时
	.then(module => {
  	module.loadPageInto(main)
	}, err => {
  	// 加载失败时
		main.textContext = err.message
	})

2. export 导出

// 声明两个变量和一个常量
var a = '123';
const _b = '2323'
let c = '2222' 
// 导出 两个变量和一个常量
export {a, _b, c}

2.1 使用 as 关键字重命名

var a = '123'
const _b = '2323'
let c = '2222'
// 导出的同时重命名
export {
  a as stream1,
  _b as stream2,
  c as stream3 
}

Tips：

export 语句输出的接口是对应值的引用，也就是一种动态绑定关系，通过该接口可以获取模块内部实时的值。
对比 CommonJS规范：CommonJS 模块输出的是值的缓存，不存在动态更新。
export 命令规定要处于模块顶层，一旦出现在块级作用域内，就会报错，import 同理。

3. export default 默认输出

// 导出默认内容
export default function(){
  console.log('123')
}

// 相当于
function a(){
  console.log('123')
}
export {a as default};

JS进阶之ES6模块化