【ES6.0】-詳細模塊化、export與Import詳解

一、模塊化概述

JavaScript 程序本來很小——在早期，它們大多被用來執行獨立的腳本任務，在你的 web 頁面需要的地方提供一定交互，所以一般不需要多大的腳本。過了幾年，我們現在有了運行大量 JavaScript 腳本的復雜程序，還有一些被用在其他環境。

近年來，考慮提供一種將Javascript程序拆分為可按需導入的單獨模塊的機制。在ES6.0之前有很多Javascript庫和框架已經開始了模塊的使用如：CommonJS和基于AMD的其他模塊系統如RquireJS以及最新的Webpack和Babel。最新的瀏覽器也支持原始模塊功能。

二、ES6模塊化的語法規范

在ES6模塊中自動采用嚴格模式。規定如下：

• 變量必須先聲明
• 函數參數不能有同名屬性
• 不能使用with
• 對只讀屬性賦值、delete不可刪除屬性直接報錯
• 不可刪除變量delete prop、只能刪除屬性delete global[prop]
• evel不會再外層作用域有進入變量
• evel和arguments不可重新賦值
• arguments不會自動反應函數參數變化
• 禁止this指向全局
• 增加保留字：static、interface、protected等

三、export導出模塊

export語法聲明用于導出函數，對象，指定文件的原始值。

export有兩種模塊導出方式：命名導出與默認導出，命名式導出每個模塊可以多個，而默認導出每個模塊僅一個。

3.1 單變量導出

export var a=123
export const b='abc'
export let c='export demo'

3.2 導出多個變量

var a=123
const b = 'goyeer'
let c='goyeer export demo'
export {a,b,c}

3.3 導出函數

函數的導出與變量導出類似也需要添加export{函數名}

var add=function(a,b){return a+b
}
export {a}

3.4 導出對象

面向對象語言中一切皆對象，所以對象是一種數據類型，export也可以完成對象導出。對象的導出一般有兩種寫法，下面演示對象的導出：

第一種

export default{trueName:'李磊',engName:'tom',age:19
}
//導入obj.js類
//import obj from './obj.js'
//console.log(obj)

第二種：

var person = {firstName:"Bill",lastName:"Gates",age:62,eyeColor:"blue"
}
export default person

3.5 類的導出

類的導出與對象的導出類似，都是利用export default關鍵字，同樣有兩種寫法：

第一種

// person.js
export default class Person{firstName = 'Bill'lastName  = 'Gates'age       = 62eyeColor  = 'blue'show(){console.log(this.firstName)}
}

類的導入

import Person from './person.js'
let person = new Person()
person.show()

第二種

class Person{firstName = 'Bill'lastName  = 'Gates'age       = 62eyeColor  = 'blue'show(){console.log(this.firstName)}
}
//導出類
export default Person

導入類

import person from './person.js'
let person=new Person()
person.show()

四、import導入模塊

import語法用于從已導出的模塊，腳本中導入函數、對象、指定文件（或模塊）的原始值。

import模塊導入與export模塊導出功能相對應，也存在兩種模塊導入方式：命名式導入或默認式導入。

import的語法更require不同，而且import必須放在文件的最開始，且前面不允許有其他邏輯代碼，這和其他高級語言風格一致。

4.1 導入整個模塊

//導入module01的所有接口、類并制定模塊名稱為module01
import * as module01 from './modules/module01.js'
//使用時，需要通過新的模塊module01,來訪問導入文件中的成員
module01.show()

4.2 導入單個接口

// 導入單個接口
import {myExport} from '/modules/my-module.js';// 導入多個接口
import {foo, bar} from '/modules/my-module.js';// 導入接口，并制定別名，編碼時更容易使用
import {fun01 as funName} from '/modules/my-module.js';

4.3 導入單個接口

// 導入默認接口
import myDefault from '/modules/my-module.js';// 導入默認接口，也可以和其他導入方式一起使用
import myDefault, * as myModule from '/modules/my-module.js';
import myDefault, {foo, bar} from '/modules/my-module.js';

4.4 動態導入

靜態導入在頁面加載時就會被導入，有時模塊太大且不會在頁面加載時使用，可以使用動態導入，在需要用的時候在導入模塊。

// 方法一：
import('/modules/my-module.js').then((module) => {// Do something with the module.});// 方法二：
let module = await import('/modules/my-module.js');// 方法三：動態導入默認接口
(async () => {if (somethingIsTrue) {const { default: myDefault, foo, bar } = await import('/modules/my-module.js');}
})();

import標準用法是靜態模塊的導入，會使用所有被導入的模塊，在加載時被編譯（做不到按需編譯，降低頁面首次加載的速度）。在一些場景中，可以根據條件導入模塊或者按需導入模塊，此時可以使用import的動態導入功能替代靜態導入。動態導入應用場景有如下場景：

1. 當靜態導入的模塊很明顯的降低了代碼的加載速度且被使用的可能性很低，或者并不需要馬上使用它。
2. 當靜態導入的模塊很明顯的占用了大量系統內存且被使用的可能性很低。
3. 當被導入的模塊，在加載時并不存在，需要異步獲取。
4. 當導入模塊的說明符，需要動態構建。
5. 當被導入的模塊有副作用（這里說的副作用，可以理解為模塊中會直接運行的代碼），這些副作用只有在觸發了某些條件才被需要時。（原則上來說，模塊不能有副作用，但是很多時候，你無法控制你所依賴的模塊的內容）

請不要濫用動態導入（只有在必要情況下采用），靜態框架能更好的初始化依賴，而且更有利于靜態分析工具發揮作用。

4.5 僅為副本作用導入一個模塊

整個模塊僅為副作用（中性詞，無貶義含義）而導入，而不導入模塊中的任何內容（接口）。這將運行模塊中的全局代碼，但實際上不導入任何值。

import "/modules/my-module.js";

五、參考

https://blog.csdn.net/u014724048/article/details/128938477

import - JavaScript | MDN (mozilla.org)