概述：

历史上，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.重启浏览器后生效

image.png

不能写“裸”路径，即使是同一层级下面的文件，也要加上 './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); // 3
test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3

浏览器加载规则

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到

上面代码中，
上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个 ES6 模块。

浏览器对于带有type="module"的

如果网页有多个

对于外部的模块脚本（如上例的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模块化开发解决的问题：
1. js引入的顺序问题
2. js频繁引入的问题

require.js引入（整个页面只需要引入require.js即可）
    
    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;
           }
       }
    })

第十二章 ES6Moudule及require.js模块化开发

概述：