小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
今天我们来学习ES6的模块化系统，如何从模块中导出变量、函数、类，在其他模块中去使用。
在ES6的模块系统中，每个JS文件可以理解为一个模块，模块代码以严格模式执行，所以模块中的变量、函数不会添加全局作用域中。
在ES6之前，我们可能需要使用require.js来实现模块化编程，在Node.js中使用commonjs规范来模块化编程，JS并没有一个统一的规范，所以在ES6推出了全新的模块化方案。
在浏览器中运行
创建一个文件 message.js
export let message = 'ES6 Modules';
复制代码message.js是ES6中的一个模块，包含一个message变量，使用 export 语句将message变量暴露给其他模块。
然后创建一个 app.js，在app.js中我们引入 message.js模块，在app.js中，我们创建一个h1元素并插入到页面中。
import 语句用来从 message.js 模块导入 message 变量。
import { message } from './message.js'
const h1 = document.createElement('h1');
h1.textContent = message
document.body.appendChild(h1)
复制代码最后，创建一个html文件，引入 app.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6 Modules</title>
</head>
<body>
<script type="module" src="./app.js"></script>
</body>
</html>
复制代码注意：这里我们需要在script标签上加type="module"用来引入 app.js 模块。运行成功如下
注意：需要起个本地服务器来打开页面，不能直接使用本地打开文件方式。
export 导出
要从一个模块中导出一个变量、函数或者类，我们需要用到export关键字
// log.js
export let message = 'Hi';
export function getMessage() {
return message;
}
export function setMessage(msg) {
message = msg;
}
export class Logger {
}
复制代码在上面的例子中，我们创建了log.js这个模块，里面有1个变量，两个函数，1个类，然后我们使用export来导出它们。
要注意的是，用export导出的函数或者类需要有名称，我们不能使用export导出匿名函数或者类。
我们也可以先定义变量或者函数，然后在后面再将其导出
// foo.js
function foo() {
console.log('foo');
}
function bar() {
console.log('bar');
}
export foo;
复制代码在上面例子中，我们首先定义了foo函数，然后在后面将其导出，由于我们没有导出bar函数，所以在其他模块中是无法访问的，只能在当前模块中使用，我们可以称之为私有函数。
import 导入
有了带有导出的模块后，我们就可以使用import关键字去访问另一个模块中的变量、函数或者类
import { what, ever } from './other_module.js';
复制代码在花括号内指定要导入的变量、函数或者类名称。
注意：当我们导入模块时，就像是const定义变量一样，引入后what和ever不允许再去更改。
举个例子
// greeting.js
export let message = 'Hi';
export function setMessage(msg) {
message = msg;
}
复制代码当我们引入message变量和setMessage()函数后，我们可以调用setMessage() 函数去改变模块内message变量的值。
// app.js
import { message, setMessage } from './greeting.js';
console.log(message); // 'Hi'
setMessage('Hello');
console.log(message); // 'Hello'
复制代码但如果直接去修改message变量，就会报错
message = 'Hallo'; // error
复制代码其实，当我们调用setMessage()函数时，JS会去到greeting.js模块中去执行代码并修改message变量，然后导入的message变量也会随着变化。
import 导入多个变量/函数
在cal.js中导出a、b、result变量和sum()、multiply()函数
// cal.js
export let a = 10,
b = 20,
result = 0;
export function sum() {
result = a + b;
return result;
}
export function multiply() {
result = a * b;
return result;
}
复制代码接着在app.js中去引入，使用它们
// app.js
import {a, b, result, sum, multiply } from './cal.js';
sum();
console.log(result); // 30
multiply();
console.log(result); // 200
复制代码import导入整个模块作为对象
沿用上面的例子，我们可以使用*号关键字，将模块中的所有内容作为单个对象导入
import * as cal from './cal.js';
复制代码然后可以使用cal对象去访问导出的变量和函数
cal.a;
cal.b;
cal.sum();
复制代码import / export 的限制
注意，import / export语句只能在代码的最外层执行，不能在其他作用域内执行，下面的代码会报语法错误
const a = 10
if(true) {
export a;
}
复制代码同样下面的import语句也会报语法错误
function importSum() {
import { sum } from './cal.js';
}
复制代码产生错误的原因是，ES6的import / export只能通过静态方式确定导入或者导出的内容，无法动态引入模块。
但在ES2020中引入了import()函数，可以支持动态导入模块。
别名导出 /导入
下面我们将add()函数使用别名sum进行导出，我们使用as关键字，在后面写上要导出的别名
// math.js
function add( a, b ) {
return a + b;
}
export { add as sum };
复制代码然后在引入模块时，我们要使用引入add()时，我们要用sum去代替
import { sum } from './math.js';
复制代码如果在导入时我们不想使用sum作为导入，我们也可以使用as关键字去使用其他名称
import {sum as total} from './math.js';
复制代码重新导出
重新导出导入的模块
import { sum } from './math.js';
export { sum };
复制代码下面这个语法等同于上面
export { sum } from './math.js';
复制代码我们也可以使用别名进行重新导出
export { sum as add } from './math.js';
复制代码重新导出所有，我们可以使用*号
export * from './cal.js';
复制代码有的同学可能不知道这重新导出有什么作用，其实这作用还挺大的，比如我们写了20个组件，我们不想写20条import语句，只想写1条import语句，那么我们就可以建一个中间文件将这个20个组件引入，然后全部导出，然后我们在用的时候就一条import语句就好了，可以参考ant design的组件库的写法。
// 参考：https://github.com/vueComponent/ant-design-vue/blob/next/components/index.ts
import * as components from './components';
import { default as version } from './version';
export * from './components';
复制代码匿名导入
有时，我们会开发一个不需要指定名称导入的模块，如果我们想给原生Array增加一个方法
// array.js
if (!Array.prototype.contain) {
Array.prototype.contain = function(e) {
// ...
}
}
复制代码接着，我们直接去import该模块，然后使用数组的contain方法
import './array.js';
[1,2,3].contain(2); // true
复制代码默认导出
一个模块只能有一个默认导出，一般来说默认导出更容易被导入，因为我们不需要再去看导入的变量、函数或者类的名称就可以导入，一般来说一个模块若只有一个导出我们可以使用默认导出。
下面的 sort.js模块默认导出一个函数
// sort.js
export default function(arr) {
// 给数组排序
}
复制代码使用sort.js模块
import sort from './sort.js';
sort([2,1,3]);
复制代码引入的sort就相当于sort.js模块中导出的默认函数。
同样，在有默认导出的同时我们也可以导出其他函数
// sort.js
export default function(arr) {
// 给数组排序
}
export function heapSort(arr) {
// 堆排序
}
复制代码要从模块中导入默认导出和非默认导出我们要遵循下面的规则
- 首先，默认导出要在最前面
- 其他非默认导出，在后面用花括号导入
比如这样
import sort, { heapSort } from './sort.js';
sort([2,1,3]);
heapSort([3,1,2]);
复制代码如果要别名默认导出，我们也可以使用as关键字，像这样
import { default as quicksort, heapSort} from './sort.js';
复制代码总结
今天我们学习了JavaScript ES6模块化编程的方方面面，如果有问题欢迎留言评论。我们明天见。
如果本文有帮助，微信搜索【小帅的编程笔记】，让我们每天进步