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命令,为模块指定默认输出。

// 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'

整体加载中的复合写法

// 第一个文件(源文件)

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

// 第二个文件(中转文件)

export * from './export'

// 第三个文件(接收文件)

import * as circle from './import.js'
    circle.foo()
    circle.bar()

默认接口中的复合写法(暂无实验成功)

export { default } from 'foo';
// 等同于
/*import {foo} from './export'
export default foo*/

你可能感兴趣的:(ES6 之模块export与import)