模块是使用不同方式加载的JS文件
- 模块代码只在严格模式下运行
- 模块是个局部作用域,不会影响到全局
- 模块顶级作用域this是个undefined
- 模块里不能用html风格的注释
- 模块可以导入导出,导出时使用exprot,是暴露给外部使用。任何没有被显示导出的变量、函数或类都会在模块内保持私有;导出时使用import
当同一个模块被import多次时,被import的模块只会产生一个模块实例,就是example.js这个文件只会被执行一次
// 在js中console只会打印一次
import { age } form './example.js';
import { sex } form './example.js'
import { name } form './example.js'
模块语法的限制:不能在其他语句或者表达式里使用,就是不能被包在任何代码块内
1. export
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
或者写成:
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
可以导出函数
export function multiply(x, y) {
return x * y;
}
导入时必须写大括号将模块名对应 :
import {firstName, lastName, year} from './modules';
2. 如果需要对导出的模块重命名 ( as )
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
};
外面接收时就需要使用
import {streamV1, streamV2} from './moudules';
3. export
必须要有对外的接口
// 报错
export 1;
// 报错
var m = 1;
export m;
因为没有提供对外的接口(使用一个变量保存)。第一种写法直接输出1
,第二种写法通过变量m
,还是直接输出1
。1
只是一个值,不是接口。正确的写法是下面这样。
// 写法一
export var m = 1; // 将1保存至m变量中导出
// 写法二
var m = 1;
export {m}; // 将1保存至m变量中导出
// 写法三
var n = 1;
export {n as m}; // 将1保存至m变量中导出
4. export default
不需要定义变量来专门保存,因为他会默认把模块输出到一个叫做default
的变量或方法上。系统允许重命名
export default function () {
console.log('foo');
}
export default {
emoji: 2,
a: 3
}
导入的时候可以自己定义名字接收:
import emoji from './modules';
使用的时候就可以通过自定义的名字来访问export default
出来的属性和方法
emoji.a // 3
5. export default 和 export的对比
(1) 一个模块可以有多个export
,但只可以有一个export default
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export default {
kimi : 2,
a : 3
}
(2)export default
后面不能跟变量声明语句。
因为export default
命令其实只是输出一个叫做default
的变量,所以不可以重复定义。
// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
(3)export default
可以直接导出数值
export
必须将数值保存到变量中,然后导出变量。
// 正确
export default 42;
// 报错
export 42;
(4)导入的时候,接收export default
可以自定义名称,而export
需要一一对应名称
// 接收模块中的emoji方法
import {emoji} from './modules'
// 接收export default 并且自定义名称为emoji
import emoji from './modules'
6. import
// 接收模块中的emoji方法
import {emoji} from './modules'
// 接收export default 并且自定义名称为emoji
import emoji from './modules'
需要重命名时:
// 将模块中的lastName重命名为surname使用
import { lastName as surname } from './profile';
全部加载export
的方法时,可以使用:
// 将模块中export的方法全部加载出来 并且全部放到circle对象中。可以使用circle.kimi使用。
import * as circle from './circle';