Module - ES6

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上”use strict”;

严格模式 - ES5

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性，否则报错
  • 不能使用with语句
  • 不能对只读属性赋值，否则报错
  • 不能使用前缀 0 表示八进制数，否则报错
  • 不能删除不可删除的属性，否则报错
  • 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
  • eval不会在它的外层作用域引入变量
  • eval和arguments不能被重新赋值
  • arguments不会自动反映函数参数的变化
  • 不能使用arguments.callee
  • 不能使用arguments.caller
  • 禁止this指向全局对象
  • 不能使用fn.caller和fn.arguments获取函数调用的堆栈
  • 增加了保留字（比如protected、static和interface）

ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export命令

  1. export var firstName = "Michael";
  2. export var lastName = "Jackson";
  3. export var year = 1958;
  1. var firstName = "Michael";
  2. var lastName = "Jackson";
  3. var year = 1958;
  4. export { firstName, lastName, year }

应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

  1. function v1() { ... }
  2. function v2() { ... }
  4. export {
  5.   v1 as streamV1,
  6.   v2 as streamV2,
  7.   v2 as streamLatestVersion
  8. };

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

import命令

  1. // main.js
  2. import { firstName, lastName, year } from './profile.js';
  3. function setName(element) {
  4.   element.textContent = firstName + ' ' + lastName;
  5. }

import命令如果直接在js文件中使用，script 的 type 要设置为 ‘module’
在 webpack 和 vue-cli 中可以直接使用