es6 export ,这几点你知道嘛

455 阅读1分钟

es6 export 你需要知道的几点

以往写代码的时候没怎么注意,只知道 export 是个es6的输出模块,相当于 es5 的module.exports,径直就用了...

// moduleA.js
export default function print() {
    console.log('print module a.');
};
// main.js
import print from './moduleA';
// print module a.
print(); 

但是在es6中有个特性可以引入导出解耦,如

// 示例用法
import { print } from './moduleA';

--------------割-----------------------------------------

那么如此关联起来的话,我们还能随便 export 吗,当然不可以了~(小编我就是在这里吃了大亏,耽误了一次上线 -^-)

直接展示用法如下:

  • 第一种用法,如果直接通过 import 直接引入使用,我们需要通过 export default 直接导出
// moduleA.js
export default function print() {
    console.log('print module a.');
};
// main.js
import print from './moduleA';
  • 第二种用法,如果想获取 moduleA 的某个属性或方法,我们需要跟着 export 直接导出
// moduleA.js
export function print() {
    console.log('print module a.');
};
// main.js
import { print } from './moduleA';
// print module a.
print(); 

ps.加餐啦

module.exports 和 export 的区别,前者是值的复制,不存在动态更新;后者输出是接口,跟值是动态绑定关系