ES6 的模組化

模組化的產生主要是為了將大型js程式拆分為相互依賴的小檔案，並且相互拼接起來。es6 模組功能主要由兩個命令構成：export和import。export命令用於規定模組的對外介面，import命令用於輸入其他模組提供的功能。在es6之前社群就已經有了commonjs 和 amd 模組兩種，在這裡暫且不講，有興趣的朋友可以自己去查閱相關資料

乙個模組就是乙個獨立的檔案。該檔案內部的所有變數，外部無法獲取。那麼我們需要從別的檔案裡面獲取什麼呢。有2個：變數和函式（或者類，類其實也是函式），即js儲存資料和運算元據的基礎結構。export 為了能讓其他檔案讀取檔案變數，就需要用 export 將檔案內變數或者函式輸出。

（1）輸出變數

//
export.js 乙個任一.js 檔案
export var firstname = 'michael';
export 
var lastname = 'jackson';
export 
var year = 1958;

export的寫法，除了像上面這樣，還有另外一種。

//
export.js
var firstname = 'michael';
var lastname = 'jackson';
var year = 1958;
export ;

上面**在export命令後面，使用大括號指定所要輸出的一組變數。它與前一種寫法（直接放置在var語句前）是等價的，但是應該優先考慮使用這種寫法。因為這樣就可以在指令碼尾部，一眼看清楚輸出了哪些變數。

（2）輸出函式或者類

export function
add(x, y)

上面**對外輸出乙個函式add。

通常情況下，export輸出的變數就是本來的名字，但是可以使用as關鍵字重新命名。

function
a () 
function
b () 
export

上面**使用as關鍵字，重新命名了函式a和b的對外介面。重新命名後，a 可以用不同的名字輸出兩次。

需要特別注意的是,export 命令規定的是對外的介面，其名字必須與模組內部變數一一對應。

（3）需要注意事項

export語句輸出的介面，與其對應的值是動態繫結關係，即通過該介面，可以取到模組內部實時的值。

export var foo = 'bar';
settimeout(() => foo = 'baz', 500);

（4）export default

從前面的例子可以看出，使用import命令的時候，使用者需要知道所要載入的變數名或函式名，否則無法載入。es6 給我們提供了不需要知道就可以直接使用的方法。

我們在這裡預設輸出乙個函式，匿名和命名函式都可以。

//
export-default.js
export default
function
()

export default function foo() 
// 或者寫成
function foo() 
export default foo;

其他模組載入時，import命令都可以為該函式指定任意名字

//
import-default.js
import customname from './export-default';
customname(); 
//匿名函式 或 'foo'

下面比較一下預設輸出和正常輸出。

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

使用export命令定義了模組的對外介面以後，其他 js 檔案就可以通過import命令載入這個模組。大括號裡面的變數名，必須與被匯入模組（export.js）對外介面的名稱相同。

//
main.js
import from './export.js'ele.name = firstname + ' ' + lastname

如果想為輸入的變數重新取乙個名字，import命令要使用as關鍵字，將輸入的變數重新命名。

import  from './export.js';

除了指定載入某個輸出值，還可以使用整體載入，即用星號（*）指定乙個物件，所有輸出值都載入在這個物件上面。

//
main.js
import from './circle';
console.log('圓面積：' + area(4));
console.log('圓周長：' + circumference(14));
//整體載入如下
import * as circle from './circle';
console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14));

ES6 的模組化

es6 的模組化

ES6的模組化

es6模組化規範

ES6 的模組化

es6 的模組化

ES6的模組化

es6模組化規範

相關推薦