乐趣区

es6-export-and-import

一:export 和 import 的正常用法
1:export 变量

// ./module/example.js

export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

// index.js
import  {firstName, lastName, dob} from './module/example.js';

2:export 方法

// ./module/example.js
// 定义方法的时候,就可以 export
export function sum(a, b) {return a + b;}

function multiply(a, b) {return a * b;}
// 也可以先定义,再 export
export {multiply};

在别的文件里面 import 上面 2 个方法,是一样的

//./index.js
import  {sum, multiply} from './module/example.js';    

3:export 重命名
有时候你也许不想用一个变量,方法,类的原本的名字,而是想换一个别的名字。那么你可以使用 as
,而且在 export 和 import 的时候都可以,例如:

// ./module/example.js
function sum(a, b) {return a + b;}
export {sum as add};

//./index.js
import  {add} from './module/example.js';

4: import 重命名
在第三点里面,我们看到了可以在 export 的时候重命名变量。同样的效果,也可以在 import 的时候做,依然是用as

// ./module/example.js
function sum(a, b) {return a + b;}
export {sum};

//./index.js
import  {sum as add} from './module/example.js';

// 此时在 index.js 里面可以被使用的方法是 add(),而不是 sum()

5:export default
我们可以给一个 js module 制定默认值,也就是这里的 default。导出一个 default 和前面我们讲到的导出一个变量一样也是有三种方式:

  1. 在定义的时候 export

       //./module/example.js
       export  default  function(a, b) {return a + b;}
       
       //./index.js
       import  sum  from './module/example.js';

export 的可以是一个匿名函数,在导入的时候,用任意合理的名字代表默认导出,但是注意与非 default 变量的区别在于,这里 没有花括号({})

  1. 先定义再 export

       //./module/example.js
       function sum(a, b) {return a + b;}
       export default sum;
       
       //./index.js
       import  sum  from './module/example.js';

在 import 的时候,依然可以是任意的合理的变量名,不一定得是 sum。

  1. 使用 as

       //./module/example.js
       function sum(a, b) {return a + b;}
       export {sum as default}
    
       //./index.js
       import  sum  from './module/example.js';

在 import 的时候,依然可以是任意的合理的变量名,不一定得是 sum。

6:export default 和其他变量一起
一个 module 可以 export default 的同时 export 其他变量,语法与只 export 其中一样没有区别;只是在 import 的时候,default 一定要在非 default 前:

//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {return a + b;}
export {sum as default}

// ./index.js
// 语法正确
import  sum, {firstName, lastName, dob}  from './module/example.js';

//error: 语法错误
import  {firstName, lastName, dob}, sum  from './module/example.js';

7: import *
当我们想把一个 module 所有 export 的东西都一次性 import 的时候,就可以使用 import * as

// ./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {return a + b;}
export {sum as default}

//./index.js
import  * as example  from './module/example.js';

console.log(example.firstName);
console.log(example.lastName);
console.log(example.dob);
example.default(1, 2);

这里特别注意的是,这里的 example.default 就是我们 export 的 default 变量。

8:export import
我们可以把从别的 module 导入的变量作为本 module 的导出。例如下面的例子./mian.js 从./idnex.js 导入变量 firstName, 而 firstName 原本是./index.js 从./module/example.js 导入的:

//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {return a + b;}
export {sum as default}

//./index.js
import {firstName}  from './module/example.js';
export {firstName};

//./main.js
import {firstName} from './index.js'

在./index.js 文件里的 2 行代码等同于下面的一行:

export {firstName} from './module/example';

这个时候也可以使用 as:

export {firstName as nickName} from './module/example';

也可以使用 *

export * from './module/example';

export * 的时候,是不包含 default 的。如果我们想要包含 default, 得单独导入和导出 default:

//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {return a + b;}
export {sum as default}

//./index.js
export * from './module/example';
import sum from './module/example';
export {sum};

//./main.js
import {firstName, lastName, dob} from './index.js'
import {sum} from './index'

二:export 和 import 的注意点可能的错误
1:在没有 default 的情况下,不能 export 匿名函数
2:export 和 default 都只能用到 module 的最高层 scope
3:module 的影响是全局的

退出移动版