ES6中的模块化

概述

历史上，JavaScript一直没有自己模块体系（module），无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。
其他语言如java、python等都具备这项功能，唯独Javascript没有，在ES6之前，要想在前端做模块化开发，必须依赖第三方框架来实现，如：requireJS与seaJS。

特点

ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

export与import

export

在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。
第一种：分别暴露

export let msg = "Hello Module";

export const showMsg = function () {
    console.log("你好");
}

第二种：统一暴露（不想暴露模块变量名称可以通过as定义别名）

let message = "Hello Module";

const sayHello = function () {
    console.log("Hi !");
}

export { message as msg, sayHello };

第三种：默认暴露（一个模块只能有一个默认导出，导入的名称可以和导出的名称不一致）

let name="张三";

export default {
    name
}

除此之外，还可以混合导出

let name = "张三";

export default {
    name
}

export const myFun = function () {
    console.log("myFun");
}

import

第一种：通用导入方式

<script type="module">
    // 引入 m1.js 模块内容
    import * as m1 from "./m1.js";
    // 引入 m2.js 模块内容
    import * as m2 from "./m2.js";
    // 引入 m3.js 模块内容
    import * as m3 from "./m3.js";
</script>

第二种：解构赋值形式（有名称重复的话可以是用as定义别名）

<script type="module">
    import { msg, showMsg } from './m1.js';
    import { msg as hello, sayHello } from './m2.js';
    import { default as m3 } from './m3.js';
</script>

第三种：简便形式 （只针对默认暴露）

<script type="module">
    import m3 from './m3.js';
</script>

同样支持混合导入

<script type="module">
    import m4, { myFun } from './m4.js';
</script>