ES6 中export 命令

ES6 中引入了模塊功能，模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其他模塊提供的功能。

一.export 命令

1.export命令作用

• ① ES6中引入了模塊的概念，一個模塊就是一個獨立的JS文件。該文件內部的所有變量，外部無法獲取。
• ② 我們希望外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。

2.export的定義方式

1. export的定義方式，一種是輸出整個表達式；另一種是使用大括號，大括號中寫入導出變量。

2. export輸出變量，函數，類。

3. export輸出時可以使用as指定別名。

   //1.======輸出變量======
   // profile.js
   export var firstName = 'Michael';
   export var lastName = 'Jackson';
   export var year = 1958;
   
   // profile.js
   var firstName = 'Michael';
   var lastName = 'Jackson';
   var year = 1958;
   
   export { firstName, lastName, year };
   //2.======輸出函數======
   export function multiply(x, y) {
     return x * y;
   };
   
   function v1() { ... }
   function v2() { ... }
   
   export {
     v1 as streamV1,
     v2 as streamV2,
     v2 as streamLatestVersion
   };
   

3.export的輸出注意點

1. 如下方式都是定義錯誤的

   // 報錯
   export 1;
   
   // 報錯
   var m = 1;
   export m;
   
   // 報錯
   function f() {}
   export f;
   

2. export命令可以出現在模塊的任何位置，只要處於模塊頂層就可以。如果處於塊級作用域內，就會報錯

   function foo() {
     export default 'bar' // SyntaxError
   }
   foo()
   

二.export default 命令

1.export default命令作用

1. export default輸出默認的js模塊，在import引入的時候可以以任意名稱導入。

2. export default命令用於指定模塊的默認輸出。一個模塊只能有一個默認輸出，輸出一個函數，或者一個對象。

   //導出函數
   // export-default.js
   export default function () {
     console.log('foo');
   }
   
   //import 加載export-default.js默認模塊的時候，不需要使用大括號
   // import-default.js
   import customName from './export-default';
   customName(); // 'foo'
   

   //導出對象
   // export-default.js
   export default{
     say:'hi  I am Joey'
   }
   
   <script  type="module" >
    import m from './model.js'
     alert(m.say)
   </script>
   

3. export default命令用在非匿名函數前，也是可以的。引入的時候和匿名函數相同。

   //如下代碼，foo函數的函數名foo，在模塊外部是無效的。加載的時候，視同匿名函數加載。
   // export-default.js
   export default function foo() {
     console.log('foo');
   }
   
   // 或者寫成
   function foo() {
     console.log('foo');
   }
   
   export default foo;
   

2.export default和正常輸出比較

1. 第一組輸入不需要大括號，第二組需要大括號

   // 第一組
   export default function crc32() { // 輸出
     // ...
   }
   
   import crc32 from 'crc32'; // 輸入
   
   // 第二組
   export function crc32() { // 輸出
     // ...
   };
   
   import {crc32} from 'crc32'; // 輸入
   

3.export default實質

1. 因爲export default命令其實只是輸出一個叫做default的變量，所以它後面不能跟變量聲明語句。

   // 正確
   export var a = 1;
   
   // 正確  將變量a的值賦給變量default
   var a = 1;
   export default a;
   
   // 錯誤
   export default var a = 1;
   
   // 正確
   export default 42;
   
   // 報錯
   export 42;
   

4.同時導出，導入默認模塊和正常輸出

1. 在一條import語句中，同時輸入默認接口和其他接口

   export default function (obj) {
     // ···
   }
   
   export function each(obj, iterator, context) {
     // ···
   }
   
   export { each as forEach };
   
   //導入默認
   import _ from 'lodash';
   //導入默認和正常函數
   import _, { each, forEach } from 'lodash';