在经历了多种模块系统规范并存的情况下,ES6中终于加入了原生的模块系统了。 在语言级别设定模块系统规范对这门语言有很大的帮助作用。
在JavaScript中,一个模块就是一个.js
文件。 默认的,该文件中定义的任何东西都只在该文件中可见,其他模块是无法使用的,如果希望某个变量、函数、类等能够被其他模块使用, 就需要在这个模块内使用export
关键字指明该变量、函数、类需要在外部可用。
1、导出一个变量或者常量定义。示例:
export const PI = 3.14159;
2、导出一个函数定义。示例:
export function hex(str) {
}
3、导出一个类定义。示例:
export class Person {
var name;
var age;
constructor(name, age) {
this.name = name;
this.age = age;
}
}
4、导出一个变量或者常量。示例:
const PI = 3.14159;
export {PI}
function hex(str) {
}
export {hex}
当导出一个变量或者常量的时候,必须要用{}
把变量或者常量包裹起来。
一个模块中是可以导出多个元素的,也就是export
关键字可以使用多次,当然,也可以把这些都合在一起,如下:
const PI = 3.14159;
function hex(str) {
}
export {PI hex}
上面导出的变量就是我们定义的那个变量,我们还可以使用default
变量,当只导出一个变量的时候, 可以使用default
变量,使用default
变量的时候,不需要写大括号,示例:
const PI = 3.14159;
export default PI
如果您既不想使用定义的那个变量,也不想使用default
变量,您还可以使用as
关键字重命名想要导出的变量,示例:
const pi = 3.14159;
export {pi as PI}
加载模块的语法总体说来就是import xx from 'moduleName';
示例:
import PI from './yy';
console.log(PI);
import {PI} from './yy';
console.log(PI);
import {PI as pi} from './yy';
console.log(pi);
import * as xx from './yy';
console.log(xx);
ES6 Module
既能使用在Web浏览器,也能使用在Node.js中, 想必,它一定有与其他模块系统不一样的地方。除了语法表现上的不一样之外,最主要的就是:ES6 Module
导出的变量的引用传递,而CommonJS导出的变量是值传递,在CommonJS中一旦被导出一次, 以后这个导出的值就是确定的,不可能被改变了。而ES6 Module
导出的变量因为是引用传递,如果模块内部有异步操作,那么那么被导出的值随时都有可能被改变。
假如有一个ES6 Module
叫做x.js
,如下:
var x = 0;
setTimeout(() => {
x = 10;
}, 10);
export {x}
另外有一个ES6 Module
叫做main.js
导入了x.js
,如下:
import x from './x.js';
console.log(x); //=>0
setTimeout(() => {
console.log(x); //=>10
}, 100);