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命令第一次加载该脚本，就会执行整个脚本，然后在内存中生成一个对象 |
| 不缓存 | 缓存 |
网友评论