es6 export ，這幾點你知道嘛

tomastong發表於2019-04-09
Export

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 的區別，前者是值的複製，不存在動態更新；後者輸出是介面，跟值是動態繫結關係

相關文章