面試必會---模塊化

概念

​ 什么是模塊， 一個模塊是一塊具有獨立功能的代碼， 可以是一個函數， 一個對象，甚至是一個字符串或數字，通常存儲為一個單獨的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使用了緩存， 保證每個模塊僅加載一次