ES6 Module

2018-04-10

为什么要添加这一功能:

让JavaScript可以分割成互相依赖的小文件,然后能用简单的方法拼装起来;有利于大型项目的管理。

设计思想:

尽量静态化,解析时加载,解析时就能确定模块间关系以及输入输出的变量。

语法:

export :
export var firstName = 'Michael';
// 或者
var firstName = 'Michael';
export  { firstName }
  • 最好将需要输出的变量放在模块最下方一并输出,一目了然。
function v1 () {}
export {
   v1 as anotherName
}
  • 可以用as重命名输出变量
  • 不能将export放入块级作用域
import:
import { firstName } from './export'
  • 导入名要与被导出模块对外接口名一致
  • import有提升效果,会提升到整个模块头部首先执行
import { firstName as surname } from './export'
  • as重命名
export { es6 as default } from './export';
// 等同于
import { es6 } from './export';
export default es6;
  • 输入输出连写; 推荐下面的写法。
模块的整体加载
import * as variableName from './export';
// 或者
module variableName from './export'
export default
export default function () {
   console.log('foo');
} // 匿名函数
function foo () {
   console.log('foo')
};
export default  foo; // 具名函数

import name from './export' // 即使时具名函数被输出,也会被name这个变量名代替;
console.log(name()); // foo

  • 默认输出
  • 一个模块只能有一个默认输出
import defaultVariable, { notDefault } from './export' // 输出默认和非默认的变量/函数的写法
  • export * 会忽略模块的default方法

commonJs 和 ES6模块加载比较

ES6 commonJs
模块输出是输出值的引用 模块输出是输出值的拷贝
原始值变,输入值改变;且变量只读,不可改变其地址,否则报错 在模块引入后,模块内的任何变化不影响输出后的值
遇到import,不执行模块,而是生成一个动态的只读引用;等到用时,再在模块中取值 require命令第一次加载该脚本,就会执行整个脚本,然后在内存中生成一个对象
不缓存 缓存

你可能感兴趣的:(ES6 Module)