关于javascript:ES6语法总结Module的语法

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 关键字输入该变量。上面是一个 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);
});