什麼是模組化開發

• 將一個專案按照功能劃分，理論上一個功能一個模組，互不影響，在需要的時候載入，儘量遵循高內聚低耦合

模組化演變過程

• 檔案引用
  • 簡單的將所有的js檔案統統放在一起。但是這些檔案的順序還不能出錯，比如jquery需要先引入，才能引入jquery外掛，才能在其他的檔案中使用jquery。
  • 汙染全域性作用域,會導致全域性變數命名衝突,依賴關係不明顯,後期維護成本較高
• 包裹全域性物件
  • 設定模組成員的名稱空間,只解決了命名衝突
    
• IIFE (立即執行函式)
  • 閉包實現了私有成員,外部無法訪問,清楚依賴關係
    

模組化的意義

• 解決命名衝突
• 管理依賴
• 提高程式碼的可複用性

模組化規範

CommonJS 規範 (同步模式載入模組)

• nodejs中提出的標準,一個檔案就是一個模組,每個模組都有獨立的作用域,通過module.exports匯出成員,通過require函式載入模組.
• 問題:
  • 在瀏覽器端使用的話,啟動時載入模組,每次頁面載入都會有大量同步模式請求出現,效率低下

AMD

• AMD 使用起來相對複雜,模組JS檔案請求頻繁. Require.js實現了AMD規範

• define 函式 定義模組

  • 圖中 第一個引數是模組的名字,

  • 第二個引數是陣列 依賴項,

  • 第三個引數是函式跟依賴項一一對應,這個函式的作用是為了給當前模組提供私有的空間,向外部匯出成員的方式 return 即可
    

• require 函式 載入模組
  

CMD規範 Sea.js實現了CMD規範

現階段的規範統一

ES Modules

• 目前多數的瀏覽器已經支援了ES Modules 可以直接通過Script去載入 設定type=module

• 有以下特點:

  • 每個module都執行在單獨的私有作用域

  • 預設是嚴格模式無法使用this,嚴格模式下是undefined

  • 通過CORS 方式請求外部js模組

  • 自動延遲執行指令碼等同於script標籤的defer屬性一樣
    

• ES Modules 核心功能

  • import export 匯入匯出

    • 匯入的成員變數是引用匯出的成員存放的記憶體地址.

    • 匯入的成員的是隻讀的

    • 匯入可以省略 index.js,會自動載入目錄下的index.js

    • 必須是./開頭 或者 /開頭 根目錄查詢,字母開頭會以為是第三方模組

    • 匯出的成員不是字面量物件,花括號只是語法

    • export default xxx

    • import 預設成員,{ 特定成員} from './xxx.js'

    • as xxx 匯出/匯入成員重新命名

    • import xxx.js/import {} from './xxx.js' 直接執行模組

    • import * as a from './xxx.js' 可以拿到全部成員
      

• ES Modules 在node中的使用

• 預設commonjs規範下執行ESModule,修改副檔名.mjs
  node --experimenal-modules xxx.mjs

  • package.json 增加 type:module,可以直接執行
    node --experimenal-modules xxx.js
  • .cjs 告知是commonjs規範
    node --experimenal-modules xxx.cjs

相容性支援

polyfill

• 新增polyfill讓瀏覽器支援最新語法,動態編譯指令碼,生產階段不使用,浪費資源
  

babel

• babel 是以外掛形式實現的,不會轉換程式碼.需要外掛轉換特性,一個外掛轉換一個特性
• 安裝babel yarn add @babel/node @babel/core @babel/preser-env --dev
• 使用 yarn babel-node xxx.js --presets@babel/preset-env
• presets 是一個外掛集合,可以在.babelrc檔案中配置,也可以在命令列中輸入命令引數