ES2015入门系列11-模块 Modules

强调文字
看一下官方介绍：

Language-level support for modules for component definition.

JS在ES2015开始原生支持模块化开发，我们之前也曾借助于诸如：

• AMD
• CommonJS

等的模块加载器进行过模块化开发，我想说的是那些都没有今天要讲的简单好用。

⚠️ 警告，正式版中的ES2015中没有模块加载器，所以我们依然需要之前的模块加载器帮助我们。

先来介绍下语法(官方示例代码)：

//lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

//app.js
import * as math from 'lib/math';
import {
  sum, pi} from 'lib/math';
console.log("2π = " + math.sum(math.pi, math.pi));

• 模块中对象暴露

只需要 export xx 即可，可以是任何类型的对象。

• 从模块中导入

使用 import 即可, 几种方式

• import * as xx from ..

导入某个模块下的所有到某个命名空间下，如示例代码中的 import * as math from ‘lib/math’, 意即将lib/math下所有暴露的对象导入到math对象下，之后就可以只用math.xxx访问了。

• import {x, y, z} from ..

手动导入模块下某个对象，x, y, z 需要和模块中定义的名字对应，顺序无关。
略微有点啰嗦了是吧？来看下面这种：

//lib/math.js
export default function (x, y) {
   
  return x + y;
}
//app.js