概述：
历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
设置浏览器启用es6语法功能：（Chrome 61+，Firefox 54+）
1.在浏览器的url中输入：chrome://flags/
2.搜索 JavaScript 关键字
3.设置选项 Experimental JavaScript 为 Enable
4.重启浏览器后生效
不能写“裸”路径，即使是同一层级下面的文件，也要加上 './name.js'
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict"。
ES6 模块功能主要由两个命令构成：export 和 import。
export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。```
export 关键字
如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
以下代码放在 module1.js 文件中
不推荐
export var userName = 'xiaoming';
export var userSex = '男';
export var userAge = 27;推荐
var userName = 'xiaoming';
var userSex = '男';
var userAge = 27;
export { userName, userSex, userAge };export命令除了输出变量，还可以输出对象、函数或类（class）。
export function multiply(x, y) {
return x * y;
};
上面代码对外输出一个函数multiply。通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。
function f1() { ... }
function f2() { ... }
export {
f1 as test1,
f2 as test2,
f2 as test3
};
上面代码使用as关键字，重命名了函数f1和f2的对外接口。重命名后，f2可以用不同的名字输出两次。错误的写法：
// 报错
export 1;
// 报错
var m = 1;
export m;
// 报错
function f() {}
export f;
- 正确的写法：
// 正确
export var m = 1;
// 正确
var m = 1;
export {m};
// 正确
var n = 1;
export {n as m};
// 正确
export function f() {};
// 正确
function f() {}
export {f};
- export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
export var abc = '123';
setTimeout(() => abc = '456', 500);
上面代码输出变量abc，值为'123'，500 毫秒之后变成'456'。
import 关键字
如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
import { userName as xm } from './module1.js';import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
import {a} from './xxx.js'
a = 123; // Syntax Error : 'a' is read-only;如果a是一个对象，改写a的属性是允许的。
import {a} from './xxx.js'
a.foo = 'hello'; // 合法操作
注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。
show();
import { show } from './module1.js';
- 除了指定加载某些输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
import * as obj from './module1.js';
console.log(obj.userName);
console.log(obj.userSex);
console.log(obj.userAge);
export default 命令
使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。
为了给用户提供方便，用export default命令，为模块指定默认输出。
下面比较一下默认输出和正常输出:
第一组
export default function test() { // 输出
// ...
}
import test from './test.js'; // 输入第二组
export function test() { // 输出
// ...
};
import { test } from './test.js'; // 输入
第一组是使用export default时，对应的import语句中的变量不需要使用大括号；
第二组是不使用export default时，对应的import语句中的变量需要使用大括号。
可以以同时打默认和非默认的，但默认变量的写在前面拼接后面加大括号的非默认变量
- 一个模块只能有一个默认输出，因此export default命令只能使用一次。
因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。
// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
// 正确
export default 42;
// 报错
export 42;
跨模块常量
如果想设置跨模块的常量（即跨多个文件），或者说一个值要被多个模块共享，可以采用下面的写法。
constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;test1.js 模块
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3
浏览器加载规则
默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。
如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。
浏览器允许脚本异步加载，下面就是两种异步加载的语法：
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
上面代码中，<script>标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。
defer与async的区别是：
defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；
async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。
一句话，defer是“渲染完再执行”，async是“下载完就执行，比如几个js文件，若中间js文件先下载完，就会先加载，就出现问题”。
如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。
浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。
<script type="module" src="./foo.js"></script>
上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个 ES6 模块。
浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。
<script type="module" src="./foo.js" ></script>
<script src="./foo.js" defer></script>
如果网页有多个<script type="module">，它们会按照在页面出现的顺序依次执行。
ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致。
<script type="module">
import utils from "./utils.js";
// other code
// ...
</script>
对于外部的模块脚本（如上例的foo.js），有以下特点：
1.代码是在模块作用域之中运行，而不是在全局作用域运行。
2.模块内部的顶层变量，外部不可见。
3.模块脚本自动采用严格模式，不管有没有声明use strict。
4.模块之中，可以使用import命令加载其他模块，也可以使用export命令输出对外接口。
5.模块之中，顶层的this关键字返回undefined，而不是指向window。
6.同一个模块如果加载多次，将只执行一次。
7.模块同步加载。
require.js模块化开发案例 AMD规范
模块化开发，可以一次性引入多个模块文件 无关顺序
require.js加载的模块，采用AMD规范，也就是说模块必需按照AMD规定来写
具体来说，就是模块必须采用特定的define()函数来定义，如果一个模块不
依赖其他模块那么可以直接定义在define()函数中,使用requirejs()引入模块，并且不需要考虑模块的引入顺序。
- require.js模块化开发解决的问题：
- js引入的顺序问题
- js频繁引入的问题
require.js引入（整个页面只需要引入require.js即可）
<script src="../js/require.js" data-main="main"></script>
data-main ：程序入口
main ：自定义的js文件，实现程序，无需加扩展名
main实现：
其它依赖模块注入 并重命名
requirejs.config({
paths : {//模块路径
"jquery" : "js/jquery.min",//注意这里为重命名，不能加扩展名，jquery重命名名称必需为jquery
"eq" : "js/equal"//自定义功能模块
}
})
编写代码：["jquery","eq"]:依赖注入
requirejs(["jquery","eq"],function($,obj){
$("body").css("background","red");
})
自定义模块：equal.js,自定义模块写在define()函数中
define(function(){
return {
eq : function(a,b){
return a == b;
}
}
})