ES6 之模块export与import

模块功能

模块功能主要由两个命令构成：export和import
export命令用于规定模块的对外“接口”
import命令用于输入其他模块提供的功能。

简单写法

指定加载

// export

对外接口

// export 指定加载
// ==》注意：1.接口：接口名与变量名相同，且加大括号；2. 重命名：as作为关键字可以重命名
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

// export 输出函数
function v1(x, y) {
  return x * y;
};

export {
  firstName,
  lastName,
  year,
  v1 as streamV1 // 重命名
}

// import

输入模块

// import 指定加载
// ==》注意：1.大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同  ；2. as 重命名
  import {firstName, lastName as surname, year, streamV1} from './profile.js'

整体加载（多个）

即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

// export

// export 整体加载
function area(radius) {
  return Math.PI * radius * radius;
}

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

//import

// import 整体加载
import * as circle from './circle.js'
   console.log('整体加载 圆面积：' + circle.area(4));
   console.log('整体加载 圆周长：' + circle.circumference(14));

export deafult（单个）

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载（整体加载除外）。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，<b>为模块指定默认输出。</b>

// export

// 本质上：export default命令其实只是输出一个叫做default的变量/方法，然后系统允许你为它取任意名字。
// 注意=》一个模块只能有一个默认输出,因此，export default命令只能使用一次。因此 import命令后面才不用加大括号，因为只可能对应一个方法。
// export default也可以用来输出类。
function foo() {
  console.log('foo');
}
export default foo

// import

  // 下面代码的import命令，
  // 可以用任意名称指向export-default.js输出的方法，
  // 这时就不需要知道原模块输出的函数名。
  // 注意=》这时import命令后面，不使用大括号。
  import customName from './export-default';

export 与 import 的复合写法

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。

指定加载中的复合写法

// 第一个文件（源文件）

function foo() {
  console.log('foo');
}
function bar() {
  console.log('bar')
}
export {foo,bar}

// 第二个文件（中转文件）

// export
export {foo,bar} from './export'
// 等同于
/*import {foo,bar} from './export.js'
export {foo,bar}
*/

// 接口改名
// export {foo,bar as baa} from './export'

// 第三个文件（接收文件）

// import
import {foo,bar} from './import.js'

整体加载中的复合写法