Module 的语法

概述

为了使 JavaScript 有模块体系,将各个功能拆分成小模块,在用简单的方法拼装起来

与 CommonJS 比较

  • ES6 模块采用编译时加载, CommonJS 是运行时加载
  • ES6 采用按需加载,只加载需要的属性, CommonJS 将模块作为一个对象全部加载

严格模式

ES6 模块自动采用严格模式,主要有以下限制

  1. 变量必须申明后使用
  2. 函数的参数不能有同名属性,否则报错
  3. 不能使用with语句
  4. 不能对只读对象赋值,否则报错
  5. 必能使用前缀 0 表示八进制数,否则报错
  6. 不能删除不可删除属性,否则报错
  7. 不能删除变量delete prop,会报错,只能删除属性delete global[prop]
  8. eval不会在外层作用域引入变量
  9. evalarguments不能被赋值 10.arguments不能反映参数的动态变化
  10. 不能使用arguments.callee
  11. 不能使用arguments.caller
  12. 禁止this 指向全局对象
  13. 不能使用fn.caller()fn.arguments来获取函数调用的堆栈
  14. 增加了保留字,(比如protected,static,interface

export 命令和 import命令

  • 模块主要由两个命令构成 export,importexport规定模块对外的借口,import主要用于输入其他模块的功能

export

模块内部可以直接通过export关键字输出模块内部定义的变量和方法

var bar = 1;
var foo = 2;
export { bar, foo }

export输出的变量名不变,可以通过as重命名

var bar = 1;
export { bar as a }

export输出的值与 module 内部变量的是关联的,这一点与 CommonJS 完全不同, CommonJS 输出的值是模块内部值的拷贝

import

import命令接受一对大括号,里面接受导入的变量名,必须与导出的变量名相同

import { bar, foo } from './config.js'

import输入的变量都是只读的,不可改写

如果重复执行多次同一条import语句,那么只会执行一次,也就是说,import语句是 Singleton 模式

import命令有提升效果

模块的整体加载

ES6 模块机制可以通过星号*实现模块的整体加载

import * as myModule from './myModule.js';

export default 命令

为模块指定默认输出

使用export default的输出不需要使用{}引入

因为输出的时候不需要指定名称,引入的时候可以随意命令

// myModule.js
export default function hello() {
  console.log('hello world')
}
import p from './myModule.js'
p()
// "hello word"
上次更新: 9/14/2018, 5:57:31 PM