面試必會---模塊化

概念

​ 什麼是模塊， 一個模塊是一塊具有獨立功能的代碼， 可以是一個函數， 一個對象，甚至是一個字元串或數字，通常存儲為一個單獨的j s文件。

為什麼需要模塊化？

過去，j s很難編寫大型應用， 因為有以下兩個問題：

1. 全局變數污染
2. 難以管理的依賴關係

這兩個問題導致j s無法進行精細的模塊劃分， 因為精細的模塊劃分會導致更多的全局污染以及更加複雜的依賴關係。

於是先後出現了兩大模塊化標準， 用於解決以上兩個問題：

• commonJs => amd => cmd (被歷史的車輪碾碎)
• ES6 Module

commonJs

目前只有node環境才支持commonJs模塊化標準， 所以要使用commonJs， 必須安裝node

Nodejs遵循ecmascript標準， 但是由於脫離了瀏覽器環境， 因此：

1. 你可以在nodej s里使用ecmascript標準的任何語法或API，例如：迴圈，判斷，數組，對象等

2. 你不能在nodej s里使用瀏覽器的web api ,例如： document對象， window對象， dom對象, Location,

   History 等等

Node 的全局變數叫做 global

commonJs標準和使用

node中的所有代碼都是在commonJs規範中運行的

具體規範如下：

1. 一個Js文件就是一個模塊
2. 如果一個模塊需要暴露一些數據或者功能，需要用module.exports = xxx 導出
3. 如果一個模塊需要使用另一個模塊導出的內容，需要使用require("模塊路徑")
   1. 路徑必須以./或者../開頭
   2. 如果模塊文件尾碼名為.js, 可以省略尾碼名
   3. require函數返回的是模塊導出的內容
4. 模塊中的所有全局代碼產生的變數，函數，均不會對全局造成任何污染，僅在模塊內使用
5. 模塊具有緩存， 第一次導入模塊時會緩存模塊的導出， 之後再導入同一個模塊，直接使用之前緩存的結果

原理

為什麼使用module.exports可以實現導出？

node實際上是將模塊文件中的代碼放置到一個函數環境中執行， 該函數類似下麵的樣子

function(module) {  
  module.exports = {};  
  var exports = module.exports;  
  // 模塊中的代碼。
  return module.exports;  
}

ES6 Module

由於種種原因， commonjs 標準難以在瀏覽器中實現， 因此瀏覽器端一直沒有合適的模塊化標準，直到ES6標準出現， ES6規範了瀏覽器的模塊化標準，一經發佈，各大瀏覽器廠商紛紛在自己的瀏覽器中實現了該規範。

模塊引入

瀏覽器使用以下方式引入一個ES6模塊化文件

<script src="./xxx.js" type="module"></script>

模塊導出

1. 模塊導出分為兩種， 基本導出和預設導出

   1. 基本導出

      1. export var a = 1 // 基本導出a=1  
         var c = 3; export {c} // 基本導出c=3. 
         var c = 3; export {c as temp} // 基本導出temp=3.  
         export {c as default} // 預設導出default = 3。

   2. 預設導出

      1. export default 3 // 預設導出default = 3

我們平時 直接 export default 一把梭。

模塊導入

import {a, b} from "模塊路徑"  
import {a as temp1 , b as temp2} from "模塊路徑"  
import {defalut as a} from "模塊路徑"
import c from "模塊路徑"  //相當於import {defalut as c} from "模塊路徑"  
import * as obj from "模塊路徑"

模塊導入時註意

1. ES6 module 採用依賴預載入模式， 所有模塊導入均會提升到代碼頂部
2. 不能將導入代碼放置到判斷， 迴圈中
3. 導入的內容放置到常量中， 不可更改
4. ES6 module使用了緩存， 保證每個模塊僅載入一次