概念
? 什么是模塊， 一個模塊是一塊具有獨立功能的代碼， 可以是一個函式， 一個物件，甚至是一個字串或數字，通常存盤為一個單獨的j s檔案，
為什么需要模塊化？
過去，j s很難撰寫大型應用， 因為有以下兩個問題：
- 全域變數污染
- 難以管理的依賴關系
這兩個問題導致j s無法進行精細的模塊劃分， 因為精細的模塊劃分會導致更多的全域污染以及更加復雜的依賴關系，
于是先后出現了兩大模塊化標準， 用于解決以上兩個問題：
- commonJs => amd => cmd (被歷史的車輪碾碎)
- ES6 Module
commonJs
目前只有node環境才支持commonJs模塊化標準， 所以要使用commonJs， 必須安裝node
Nodejs遵循ecmascript標準， 但是由于脫離了瀏覽器環境， 因此：
-
你可以在nodej s里使用ecmascript標準的任何語法或API，例如：回圈，判斷，陣列，物件等
-
你不能在nodej s里使用瀏覽器的web api ,例如： document物件， window物件， dom物件, Location,
History 等等
Node 的全域變數叫做 global
commonJs標準和使用
node中的所有代碼都是在commonJs規范中運行的
具體規范如下：
- 一個Js檔案就是一個模塊
- 如果一個模塊需要暴露一些資料或者功能，需要用module.exports = xxx 匯出
- 如果一個模塊需要使用另一個模塊匯出的內容，需要使用require("模塊路徑")
- 路徑必須以./或者../開頭
- 如果模塊檔案后綴名為.js, 可以省略后綴名
- require函式回傳的是模塊匯出的內容
- 模塊中的所有全域代碼產生的變數，函式，均不會對全域造成任何污染，僅在模塊內使用
- 模塊具有快取， 第一次匯入模塊時會快取模塊的匯出， 之后再匯入同一個模塊，直接使用之前快取的結果
原理
為什么使用module.exports可以實作匯出？
node實際上是將模塊檔案中的代碼放置到一個函式環境中執行， 該函式類似下面的樣子
function(module) {
module.exports = {};
var exports = module.exports;
// 模塊中的代碼，
return module.exports;
}
ES6 Module
由于種種原因， commonjs 標準難以在瀏覽器中實作， 因此瀏覽器端一直沒有合適的模塊化標準，直到ES6標準出現， ES6規范了瀏覽器的模塊化標準，一經發布，各大瀏覽器廠商紛紛在自己的瀏覽器中實作了該規范，
模塊引入
瀏覽器使用以下方式引入一個ES6模塊化檔案
<script src="https://www.cnblogs.com/LHLVS/p/xxx.js" type="module"></script>
模塊匯出
-
模塊匯出分為兩種， 基本匯出和默認匯出
-
基本匯出
-
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，
-
-
默認匯出
-
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 "模塊路徑"
模塊匯入時注意
- ES6 module 采用依賴預加載模式， 所有模塊匯入均會提升到代碼頂部
- 不能將匯入代碼放置到判斷， 回圈中
- 匯入的內容放置到常量中， 不可更改
- ES6 module使用了快取， 保證每個模塊僅加載一次
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/149372.html
標籤：JavaScript
下一篇：自己封裝的一個Ajax小框架