文章目錄

• 1. 模塊化的發展
• 2. export
• 3. as
• 4. export default
• 5. import

1. 模塊化的發展

隨著前端的發展，web技術日趨成熟，js功能越來越多，代碼量也越來越大。之前一個項目通常各個頁面公用一個js，但是js逐漸拆分，項目中引入的js越來越多. 在js模塊化誕生之前，開發者面臨很多問題:

• 全局變量污染：各個文件的變量都是掛載到window對象上，污染全局變量。
• 變量重名：不同文件中的變量如果重名，后面的會覆蓋前面的，造成程序運行錯誤。
• 文件依賴順序：多個文件之間存在依賴關系，需要保證一定加載順序問題嚴重。

模塊化是指解決一個復雜問題時自頂向下逐層把系統劃分成若干模塊的過程， 有多種屬性，分別反映其內部特性。

模塊化其實是一種規范，一種約束，這種約束會大大提升開發效率。將每個js文件看作是一個模塊，每個模塊通過固定的方式引入，并且通過固定的方式向外暴露指定的內容。 按照js模塊化的設想，一個個模塊按照其依賴關系組合，最終插入到主程序中。

我們梳理一下模塊化的發展情況：
無模塊化 > CommonJS規范 > AMD規范 > CMD規范 > ES6模塊化

CommonJS規范(Node中模塊化規范)的誕生給js模塊化發展有了重要的啟發，基于Node原生api在服務端可以實現模塊同步加載， 但是僅僅局限于服務端，客戶端如果同步加載依賴的話時間消耗非常大，所以需要一個 在客戶端上基于Commonjs但是對于加載模塊做改進的方案，于是AMD規范誕生了。

AMD規范, 異步模塊定義, 允許指定回調函數，AMD 是 RequireJS 在推廣過程中對模塊定義的規范化產出。它采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到所有依賴加載完成之后（前置依賴），這個回調函數才會運行。

CMD規范，同樣是受到Commonjs的啟發，國內（阿里）誕生了一個CMD（Common Module Definition）規范。該規范借鑒了Commonjs的規范與AMD規范，在兩者基礎上做了改進。CMD 是 SeaJS 在推廣過程中對模塊定義的規范化產出。

到了2015年，ES6規范中，終于將模塊化納入JavaScript標準，從此js模塊化被官方扶正，也是未來js的標準. 在ES6中，我們可以使用 import 關鍵字引入模塊，通過 exprot 關鍵字導出模塊，功能較之于前幾個方案更為強大，也是我們所推崇的， 但是由于ES6目前無法在瀏覽器中執行，所以，我們只能通過babel將不被支持的import編譯為當前受到廣泛支持的 require。

2. export

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

一個模塊就是一個獨立的文件。該文件內部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。

導出變量或者常量

export const name = 'hello' export let addr = 'BeiJing City' export var list = [1, 2, 3]// 或者 const name = 'hello' let addr = 'BeiJing City' var list = [1, 2, 3] export {name,addr,list }

導出函數

export function say(content) {console.log(content) } export function run() {console.log('run') }// 或者 const say = (content) => {console.log(content) } let run = () => {console.log('run') } export {say,run }

導出Object對象

export ({code: 0,message: 'success' })// 或者 let data = {code: 0,message: 'success' } export {data }

導出 Class

class Test {constructor() {this.id = 2} } export {Test }// 或者 export class Test {constructor() {this.id = 2} }

3. as

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

const name = 'hello' let addr = 'BeiJing City' var list = [1, 2, 3] export {name as myName,addr as myAddr,list }

4. export default

使用import命令的時候，用戶需要知道所要加載的變量名或函數名，否則無法加載。但是，用戶肯定希望快速上手，未必愿意閱讀文檔，去了解模塊有哪些屬性和方法。

為了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令，為模塊指定默認輸出。

const name = 'hello' let addr = 'BeiJing City' var list = [1, 2, 3] export {name as myName,addr as myAddr } export default list

5. import

使用export命令定義了模塊的對外接口以后，其他 JS 文件就可以通過import命令加載這個模塊。

// 直接導入 import list, {myName, myAddr} from A// 修改導入名稱 import list, {myName as name, myAddr} from A// 批量導入 import list, * as mod from A

總結

以上是生活随笔為你收集整理的【ES6(2015)】Module模块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。