06 ES6子產品化規範基礎詳解

ES6子產品規範

1.1 ES6規範說明

曆史上，JavaScript 一直沒有子產品（module）體系，無法将一個大程式拆分成互相依賴的小檔案，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的

require

、Python 的

import

，甚至就連 CSS 都有

@import

，但是 JavaScript 任何這方面的支援都沒有，這對開發大型的、複雜的項目形成了巨大障礙。

自從ES6的推出，ES6定義了自己的子產品化規範，使用

export

和

import

導出導入實作子產品化管理

1.2 基本文法

子產品功能主要由兩個指令構成：

export

和

import

。

export

指令用于規定子產品的對外接口，

import

指令用于輸入其他子產品提供的功能

1.21暴露子產品

一個子產品就是一個獨立的檔案。該檔案内部的所有變量，外部無法擷取。如果你希望外部能夠讀取子產品内部的某個變量，就必須使用

export

關鍵字輸出該變量。下面是一個 JS 檔案，裡面使用

export

指令輸出變量

export：它是用來定義子產品的，可以導出對象、函數、類、字元串等等

（1）單獨導出資料

export var name = 'guo';
export function foo(x, y){}
           

（2）或者直接導出一個對象(推薦使用)

// person.js 
const name = 'guo';
const age = '18';
const addr = '過青年';

export { name, age, addr };
           

（3）使用

as

重命名，并且可以利用它将資料暴露多次

// person.js 
const name = 'guo';
const age = '18';
export {
	name as firstName,
	age as oneAge,
    age as twoAge
}
           

（4）使用

export default

導出資料；

export default

其實是導出一個叫做

default

的變量，是以其後面不能跟變量聲明語句；

​ 預設暴露隻能暴露一次，暴露多次，後面的預設暴露覆寫前面的預設暴露

// guo.js
// export default var name = 'guo'   錯誤
export default name = 'guo';
           

1.22引入子產品

1）一般用法

import { name, age } from './person.js';
           

（2）As用法

import { name as personName } from './person.js';
           

import指令具有提升效果，會提升到整個子產品的頭部，首先執行；如下也不會報錯：

getName();

import { getName } from 'person_module';
           

（3）整體子產品加載 *

//person.js
export name = 'xixi';
export age = 23;

//逐一加載
import { age, name } from './person.js';

//整體加載
import * as person from './person.js';
console.log(person.name);
console.log(person.age);
           

（4）加載

export default

導出的資料，不需要加

{}

号

import guo from './person.js';
           

總結

• 使用

  export

  和

  export default

  向外暴露資料，使用

  import

  擷取資料
• 使用

  as

  重命名，使用

  *

  符号整體加載

• import

  指令具有提升效果，會提升到整個子產品的頭部

• export default

  以最後一次暴露為準，且暴露的資料加載時，不需要加入{ }号