模块化规范

服务器端规范主要是CommonJS，node.js用的就是CommonJS规范。
客户端规范主要有：AMD、CMD。 AMD规范的实现主要有RequireJS,CMD规范的主要实现有SeaJS。RequireJS在国外用的比较多，SeaJS在国内用的比较多，并且SeaJS的创始人为阿里的玉伯。

模块化图解.png

区别

CMD 推崇依赖就近;AMD 推崇依赖前置
CMD 是延迟执行;AMD 是提前执行
CMD性能好,因为只有用户需要的时候才执行;AMD用户体验好,因为没有延迟,依赖模块提前执行了

ES6模块

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案

1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
3：模块内部的变量或者函数可以通过export导出；
4：一个模块可以导入别的模块

语法

export

//模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能
**特别注意**
// 报错
export 1;
// 报错
var m = 1;
export m;

**正确写法**
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};

//同样的，function和class的输出，也必须遵守这样的写法。
// 报错
function f() {}
export f;

// 正确
export function f() {};
// 正确
function f() {}
export {f};
// 正确
function f() {}
export {f as m};

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as firstName,
  v2 as lastName,
  v2 as year
};
//上面代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。

import

import {firstName, lastName, year} from './profile.js';

//如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
import { lastName as surname } from './profile.js';

示例：
模块的单一加载

//a.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {
    firstName, 
    lastName, 
    year
};
//b.js
import {firstName,lastName,year as years} from './js/my.js';
console.log(firstName);//Michael
console.log(lastName);//Jackson
console.log(years);//1958

输出部分如果使用export {}，可以为每个输出项设置as重命名，引用部分import 需要使用{}，也可以使用as重命名

模块的整体加载

function area(radius) {
  return Math.PI * radius * radius;
}
function circumference(radius) {
  return 2 * Math.PI * radius;
}
export {
    area,
    circumference
}

import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));
引用部分import 如果使用整体加载，输出部分export{}则不可以使用as重命名

export default

//a.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export default {
    firstName, 
    lastName, 
    year
};

//b.js
import data from './js/my.js';
console.log(data);// {firstName: "Michael", lastName: "Jackson", year: 1958}
console.log(data.firstName);//Michael
console.log(data.lastName);//Jackson
console.log(data.year);//1958

输出部分如果使用export default {}，为全部输出，不可以重命名，引用部分import 需要去掉{}，可以用 * as 重命名
推荐使用此写法：
好处：
1.不会因为误操作将一些无关变量导出 
2.通过 export default，由第三方引用时无需知道其名称，较为简洁

因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。
export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号

// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;

// export default a的含义是将变量a的值赋给变量default。所以，最后一种写法会报错

动态加载 import()
import函数的参数specifier，指定所要加载的模块的位置。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载
（1）按需加载

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

（2）条件加载

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

（3）动态的模块路径

import(f())
.then(...);

如果模块有default输出接口，可以用参数直接获得

import('./myModule.js')
.then(myModule => {
  console.log(myModule.default);
});
//上面的代码也可以使用具名输入的形式
import('./myModule.js')
.then(({default: theDefault}) => {
  console.log(theDefault);
});

如果想同时加载多个模块，可以采用下面的写法

Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

import()也可以用在 async 函数之中

async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();