模塊化 CJS 、AMD、UMD、ESM 簡述

這是我參與8月更文挑戰的第1天，活動詳情查看：8月更文挑戰javascript

模塊化的優勢：1. 避免全局變量被污染 2. 便於代碼編寫和維護html

CommonJS（CJS）

每一個文件就是一個模塊，有本身的做用域，文件內的變量、函數、類都是私有的，對其餘文件不可見。模塊內部，module變量表明當前模塊，這個變量是一個對象，它的exports屬性（即module.exports）是對外的接口。加載某個模塊，實際上是加載該模塊的module.exports屬性。例如：前端

module.exports.x = x;
module.exports.addX = addX;
// 或者
module.exports={x,addX}
複製代碼

若是某個變量或者函數想要被成公共變量，可以在其餘文件中獲取，就須要掛在global上。(這麼寫並不推薦) 例如：java

global.warning = true;
複製代碼

CJS 是同步導入模塊，能夠從 modules 中引入一個庫或者從本地目錄引入一個文件，使用require方法用於加載模塊node

當 CJS 導入時，它會給你一個導入對象的副本。jquery

const { sequelize } = require("../../core/db");
複製代碼

CJS 不能在瀏覽器中工做，必須通過轉換和打包。 node.js 就是使用 commonJs 的模塊規範，能夠在 js 文件中直接使用。webpack

特色

全部代碼都運行在模塊做用域，不會污染全局做用域。
模塊能夠屢次加載，可是隻會在第一次加載時運行一次，而後運行結果就被緩存了，之後再加載，就直接讀取緩存結果。要想讓模塊再次運行，必須清除緩存。
模塊加載的順序，按照其在代碼中出現的順序。

參考： javascript.ruanyifeng.com/nodejs/modu…web

ESM ES 模塊

這是 Javascript 提出的實現一個標準模塊系統的方案,在不少現代瀏覽器可使用. 能夠在 HTML 中調用，可是須要在 script 標籤上添加屬性 type=‘module’。json

<script type="module">
 import {func1} from 'my-lib';
 func1();
</script>
複製代碼

能夠導入本地的文件、庫或者遠程模塊。(靜態)redux

import { createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs";
import * as myModule from './util.js';
複製代碼

除了可以靜態導入，還能夠動態導入。ES模塊其實是JavaScript對象：咱們能夠解構它們的屬性以及調用它們的任何公開方法。例如：

btn.addEventListener("click", () => {
  // loads named export
  import("./util.js").then(({ funcA }) => {
    funcA();
  });
});
或
const loadUtil = () => import("./util.js"); 
// 返回的是一個 promise。因此也可使用可使用 `async/await`

btn.addEventListener("click", () => {
  loadUtil().then(module => {
    module.funcA();
    module.default();
  })
})
// 使用 async/await 的寫法
btn.addEventListener("click", async () => {
  const utilsModule = await loadUtil();
  utilsModule.funcA();
  utilsModule.default();
})

複製代碼

使用動態導入能夠拆分代碼，只在適當的時候加載重要的代碼。在 JavaScript 引入動態導入以前，這種模式是webpack(模塊綁定器)獨有的。像React和Vue經過動態導入代碼拆分來加載響應事件的代碼塊，好比用戶交互或路由更改。

當導入的json文件時,導出的直接是json文件中的數據

優勢

具備 CJS 的簡單語法和 AMD 的異步，ESM 容許像 Rollup 這樣的打包器，刪除沒必要要的代碼，減小代碼包能夠得到更快的加載。

參考： blog.csdn.net/hpc_kiven/a…

AMD 異步模塊定義

AMD 是爲前端而作的(而 CJS 是後端),AMD 的語法不如 CJS 直觀。示例：

define(['dep1', 'dep2'], function (dep1, dep2) {
   //Define the module value by returning a value.
   return function () {};
});

// "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html
define(function (require) {
   var dep1 = require('dep1'),
       dep2 = require('dep2');
   return function () {};
});
複製代碼

UMD 通用模塊定義（Universal Module Definition）

在前端和後端都適用,與 CJS 或 AMD 不一樣，UMD 更像是一種配置多個模塊系統的模式,當使用 Rollup/Webpack 之類的打包器時，UMD 一般用做備用模塊

(function (root, factory) {
   if (typeof define === "function" && define.amd) {
       define(["jquery", "underscore"], factory);
   } else if (typeof exports === "object") {
       module.exports = factory(require("jquery"), require("underscore"));
   } else {
       root.Requester = factory(root.$, root._);
   }
}(this, function ($, _) {
   // this is where I defined my module implementation

   var Requester = { // ... };

   return Requester;
}));
複製代碼