1、概述

  • 在 ES6 之前，社区制订了一些模块加载计划，最次要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言规范的层面上，实现了模块性能，而且实现得相当简略，齐全能够取代 CommonJS 和 AMD 标准，成为浏览器和服务器通用的模块解决方案
  • ES6 模块的设计思维是尽量的动态化，使得编译时就能确定模块的依赖关系，以及输出和输入的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些货色。比方，CommonJS 模块就是对象，输出时必须查找对象属性
// CommonJS模块 let { stat, exists, readfile } = require('fs');// 等同于 let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;

下面代码的本质是整体加载fs模块（即加载fs的所有办法），生成一个对象（_fs），而后再从这个对象下面读取 3 个办法。这种加载称为“运行时加载”，因为只有运行时能力失去这个对象，导致齐全没方法在编译时做“动态优化”

  • ES6 模块不是对象，而是通过export命令显式指定输入的代码，再通过import命令输出
  • 不再须要UMD模块格局了，未来服务器和浏览器都会反对 ES6 模块格局。目前，通过各种工具库，其实曾经做到了这一点
  • 未来浏览器的新 API 就能用模块格局提供，不再必须做成全局变量或者navigator对象的属性
  • 不再须要对象作为命名空间（比方Math对象），将来这些性能能够通过模块提供

2、严格模式

  • ES6 的模块主动采纳严格模式，严格模式有如下限度：

    1. 变量必须申明后在应用
    2. 函数的参数不能有同名属性，否则报错
    3. 不能应用with语句
    4. 不能对只读属性赋值，否则报错
    5. 不能应用前缀0示意八进制数，否则报错
    6. 不能删除不可删除属性，否则报错
    7. 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
    8. eval不会在它的外层作用域引入变量
    9. eval和arguments不能被重写赋值
    10. arguments不会主动反映函数参数的变动
    11. 不能应用arguments.callee
    12. 不能应用argements.caller
    13. 禁止this指向全局对象
    14. 不能应用fn.caller和fn.arguments获取函数调用的堆栈
    15. 减少了保留字，比方protected、static、interface

3、export命令

    • 模块性能次要由两个命令形成：export和import。export命令用于规定模块的对外接口，import命令用于输出其余模块提供的性能
    • 一个模块就是一个独立的文件。该文件外部的所有变量，内部无奈获取。如果你心愿内部可能读取模块外部的某个变量，就必须应用export关键字输入该变量。上面是一个 JS 文件，外面应用export命令输入变量
    // profile.js export let firstName = 'Michael';export let lastName = 'Jackson';export let year = 1958;// 另一种写法var firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export { firstName, lastName, year };
    • export命令除了输入变量，还能够输入函数或类
    export function multiply(x, y) {  return x * y;};
    • 通常状况下export输入的变量就是原本的名字，然而能够应用as关键字重命名
    function v1() { ... }function v2() { ... }export {  v1 as streamV1,  v2 as streamV2,  v2 as streamLatestVersion};
    • 因为没有提供对外的接口。第一种写法间接输入 1，第二种写法通过变量m，还是间接输入 1。1只是一个值，不是接口
    // 报错 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};
    • export语句输入的接口，与其对应的值是动静绑定关系，即通过该接口，能够取到模块外部实时的值
    export var foo = 'bar';setTimeout(() => foo = 'baz', 500);

    下面代码输入变量foo，值为bar，500 毫秒之后变成baz

    4、import命令

    • import命令承受一对大括号，外面指定要从其余模块导入的变量名。大括号外面的变量名，必须与被导入模块对外接口的名称雷同
    • 如果想为输出的变量从新取一个名字，import命令要应用as关键字，将输出的变量重命名
    • import命令输出的变量都是只读的，因为它的实质是输出接口。也就是说，不容许在加载模块的脚本外面，改写接口
    import {a} from './xxx.js'a = {}; // Syntax Error : 'a' is read-only;

    然而，如果a是一个对象，改写a的属性是容许的。不过，这种写法很难查错，倡议但凡输出的变量，都当作齐全只读，不要轻易扭转它的属性

    • 因为import是动态执行，所以不能应用表达式和变量，这些只有在运行时能力失去后果的语法结构
    // 报错 import { 'f' + 'oo' } from 'my_module';// 报错 let module = 'my_module';import { foo } from module;// 报错 if (x === 1) {  import { foo } from 'module1';} else {  import { foo } from 'module2';}

    5、模块的整体加载

    • 除了指定加载某个输入值，还能够应用整体加载，即用星号（*）指定一个对象，所有输入值都加载在这个对象下面
    import * as circle from './circle';

    6、export default命令

    • 为模块指定默认输入
    • 其余模块加载该模块时，import命令能够为该匿名函数指定任意名字
    // export-default.js export default function foo() {  console.log('foo');}// 或者写成 function foo() {  console.log('foo');}export default foo;

    下面代码中，foo函数的函数名foo，在模块内部是有效的。加载的时候，视同匿名函数加载

    • 实质上，export default就是输入一个叫做default的变量或办法，而后零碎容许你为它取任意名字
    // modules.js function add(x, y) {  return x * y;}export {add as default}; // 等同于 // export default add;  // app.js import { default as foo } from 'modules'; // 等同于 // import foo from 'modules';
    • 正是因为export default命令其实只是输入一个叫做default的变量，所以它前面不能跟变量申明语句
    // 正确export var a = 1;// 正确 var a = 1;export default a;// 谬误 export default var a = 1;

    下面代码中，export default a的含意是将变量a的值赋给变量default。所以，最初一种写法会报错

    • 因为export default命令的实质是将前面的值，赋给default变量，所以能够间接将一个值写在export default之后
    // 正确 export default 42;// 报错 export 42;
    • 如果想在一条import语句中，同时输出默认办法和其余接口，能够写成上面这样
    import _, { each, forEach } from 'lodash';

    而且默认输入必须写在最后面

    7、export与import的复合写法

    • 如果在一个模块之中，先输出后输入同一个模块，import命令能够与export命令写在一起
    export { foo, bar } from 'my_module'; // 能够简略了解为 import { foo, bar } from 'my_module';export { foo, bar };

    但须要留神的是，写成一行当前，foo和bar实际上并没有被导入以后模块，只是相当于对外转发了这两个接口，导致以后模块不能间接应用foo和bar

    • 模块的接口改名和整体输入，也能够采纳这种写法
    // 接口改名export { foo as myFoo } from 'my_module';// 整体输入 export * from 'my_module';
    • 默认接口的写法如下
    export { default } from 'foo';
    • 具名接口改为默认接口的写法如下
    export { es6 as default } from './someModule';// 等同于 import { es6 } from './someModule';export default es6;
    • 同样地，默认接口也能够改名为具名接口
    export { default as es6 } from './someModule';
    • ES2020 之前，有一种import语句，没有对应的复合写法
    import * as someIdentifier from "someModule";// `ES2020`补上了这个写法export * as ns from "mod"; // 等同于 import * as ns from "mod";export {ns};

    8、模块的继承

    • 其实就是在一个转发模块中再定义一些本身模块须要export的对象

    9、跨模块常量

    10、improt()

    • 反对动静加载
    • import()返回一个 Promise 对象。上面是一个例子
    const main = document.querySelector('main');import(`./section-modules/${someVariable}.js`)  .then(module => {    module.loadPageInto(main);  })  .catch(err => {    main.textContent = err.message;  });

    import()函数能够用在任何中央，不仅仅是模块，非模块的脚本也能够应用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有动态连贯关系，这点也是与import语句不雷同。import()相似于 Node 的require办法，区别次要是前者是异步加载，后者是同步加载

    • import()加载模块胜利当前，这个模块会作为一个对象，当作then办法的参数。因而，能够应用对象解构赋值的语法，获取输入接口
    • 如果模块有default输入接口，能够用参数间接取得
    import('./myModule.js').then(myModule => {  console.log(myModule.default);});// 具名输出模式import('./myModule.js').then(({default: theDefault}) => {  console.log(theDefault);});