import、export使用介绍

ES6提供的import、export方法, 使组件化开发模式迈向新高度。本文来介绍import、export的语法及使用方法。

根据 export 的导出方式,可以概括为命名导出、默认导出两种方式。

命名导出常用语法:

export { name1, name2, ..., nameN };  
export { variable as name1, variable as name2, ..., nameN };  
export const name1 = ..., name2 = ..., nameN; // also var, let  
export * from ...;  
export { name1, name2, ..., nameN } from ...;  
export { import1 as name1, import2 as name2, ..., nameN } from ...;  

默认导出:

export default expression;
export default function() { ... }; // also class, function*
export default function name1() { ... }; // also class, function*
export { name1 as default, ... };

对应 export 的多种导出方式,import 也有多种倒入方式,使调用方式更加灵活多变。

import 使用语法如下:

import defaultExport from 'module-name';
import * as name from 'module-name';
import { exportName1, exportName2, ... } from 'module-name';
import { exportName1, exportName2 as alias, ... } from 'module-name';
import defaultExport, * as name from 'module-name';
import 'module-name';

接下来,我们将根据使用常见使用场景来举例说明使用方法。

导出已声明的变量或函数:

util.js

const aaa = 'aaa';

function cube(x) {
  return x * x * x;
}

// 导出已声明的变量时,只能用这种方式,否则会报错
export { aaa, cube };

上述导出的引用方式如下:

index.js

import { aaa, cube } from './util';

console.log(aaa, cube);  //  'aaa' 8

考虑到导出变量名 aaa 的语义化辨识度低,可考虑如下引入方式:

import { aaa as baseStr, cube } from './util';

console.log(baseStr, cube(2)); // 'aaa', 8

此时,若在index.js文件中调用变量aaa,会提示" aaa is not defined " 。

变量命名费时费心还怕冲突吗?直接导入整个模块也不错:

import * as util from './util';

console.log(util.aaa, util.cube(2)); // 'aaa' 8

若只需引入 cube 方法,引用方式如下:

import { cube } from './util';

console.log(cube(2)); // 8

也可以直接导出声明的变量或函数,如下:

export const aaa = 'aaa';

export function cube(x) {
  return x * x * x;
}

使用方式与先声明再导入的使用方式一致,不在赘述。


export 方式决定了 import 方式。上述的多种引入方式中,引入的变量名都是固定的,即引入的变量名必须与导出的变量名保持一致。而 export 的默认导出却能打破这个限制。

可以被设置为默认导出的,有以下几种情况:

默认导出函数:
util.js

export default function cube(x) {
  return x * x * x;
}

index.js

import math from './util';

console.log( math(2)); // 8

默认导出类:

util.js

export default class {
  constructor (name, age) {
    this.name = name;
    this.age = age;
  }
}

index.js

import Person from './util';

const obj =  new Person('xiaoming', 24);

console.log( obj ) ;  //  { name: 'xiaoming', age: 24 }

默认导出表达式:

util.js

export default 1 + 2;

index.js

import result from './util';

console.log( result ) ; // 3

注:不能使用var、let、const语句直接作为默认导出,可以声明变量后再作为导出
错误示例:

export default const aaa = 'aaa';

正确示例:

const aaa = 'aaa';

export default aaa;

默认导出的其他尝试:

1,每个组件只能有一个默认导出语句,否则会报错 "Duplicate export 'default'"
2,一个组件包含默认导出与命名导出,如下:
util.js

const aaa = 'aaa';

export { aaa };
export default 1 + 2; 

index.js

import result, { aaa } from './util’;  // 默认导出命名在前,否则会报错

console.log( result, aaa ) ; // 3 'aaa'

兼容性

截止目前,有些浏览器并不支持 import 与 export 方法,在实际项目中多使用转换器做转换来实现,常用转换器有:Babel、Webpack、Rollup等。

你可能感兴趣的:(import、export使用介绍)