ES6 module export 语法

 

 

将一个JS文件看作一个模块，该模块默认所有变量或方法是私有的，只能文件内访问

在变量或方法前加上export 关键字，才可以在另外一个文件中通过import 访问该文件中的变量或方法

详细参考 ES6 module export语法 ，这个地方写的真是太详细了，下面写一些我对它的体会

 

export 与 import 以接口 “ {对象1,对象2, ... }” 的方式链接文件，这与高级语言(Java/c/c++/go等)访问外部文件的方式类似，这样写出来的JS更像是项目，而不再是一个脚本了

在高级语言中文件之间的链接建立是在编辑阶段，执行的是编辑之后的文件，ES6的export/import也是如此，在执行之前所有相关的文件已经链接在一起了

再通过webpack这样的工具，就可以将整个项目的JS打包成一个静态JS文件

 

export default 

// 正确
var a = 1;
export default a;

export default a的含义是将变量a的值赋给变量default

 

 

实时取值、类似引用

export只是通过接口的方式，访问另外一个文件中的变量或方法，这意味着如果所访问的文件的变量发生了变化，接口会体现这种变化；具体位置不限定

 

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代码输出变量foo，值为bar，500 毫秒之后变成baz。

 

foo();

import { foo } from 'my_module';

上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。

 

 

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

 

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

 

必须位于顶级作用域

因为export是在编辑阶段链接文件，所以不能放入方法或块等次级作用域以动态调用的方式使用

 

import

// main.js
import { firstName, lastName, year } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

 

 

模块整体加载

// circle.js

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

下面两种使用方式是等效的

// main.js

import { area, circumference } from './circle';

console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

import * as circle from './circle';

console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

 

export default

 

// export-default.js
export default function () {
  console.log('foo');
}

// import-default.js
import customName from './export-default';
customName(); // 'foo'