您好,登錄后才能下訂單哦!
這篇文章主要講解了“CJS,UMD,ESM和IIFE怎么用”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“CJS,UMD,ESM和IIFE怎么用”吧!
CJS,UMD
,ESM
,IIFE
是JavaScript用來(lái)實(shí)現(xiàn)"模塊"的不同規(guī)則。
CommonJS
的簡(jiǎn)寫(xiě),只能在 NodeJS 上運(yùn)行,使用 require("module")
讀取并加載模塊。
缺點(diǎn):不支持瀏覽器,執(zhí)行后才能拿到依賴(lài)信息,由于用戶(hù)可以動(dòng)態(tài) require,無(wú)法做到提前分析依賴(lài)以及Tree-Shaking 。
CommonJS 規(guī)范加載模塊是同步的,也就是說(shuō),只有加載完成,才能執(zhí)行后面的操作。
用法如下:
// 文件名: foo.js
var $ = require('jquery');
function myFunc(){};
// 暴露公共方法(一個(gè))
module.exports = myFunc;
Asynchronous Module Definition
的縮寫(xiě)(代表異步模塊定義),可以看作 CJS 的異步版本,制定了一套規(guī)則使模塊可以被異步 require 進(jìn)來(lái)并在回調(diào)函數(shù)里繼續(xù)使用,然后 require.js 等前端庫(kù)也可以利用這個(gè)規(guī)則加載代碼了。
用法如下:
// 文件名: foo.js
define(['jquery'], function ($) {
// 方法
function myFunc(){};
// 暴露公共方法
return myFunc;
});
定義的第一個(gè)部分是一個(gè)依賴(lài)數(shù)組,第二個(gè)部分是回調(diào)函數(shù),只有當(dāng)依賴(lài)的組件可用時(shí)(像RequireJS這樣的腳本加載器會(huì)負(fù)責(zé)這一部分,包括找到文件路徑)回調(diào)函數(shù)才被執(zhí)行。
理想狀態(tài)下,期望其依賴(lài)是異步加載的,通過(guò)在中注入script,不阻塞瀏覽器的加載和渲染,但實(shí)際環(huán)境下,其表現(xiàn)的沒(méi)有那么好,因此需要 amd 模塊為一個(gè)單文件模塊并與require.js 優(yōu)化器配合來(lái)進(jìn)行渲染。
Universal Module Definition
的縮寫(xiě)(代表通用模塊定義),同時(shí)兼容 CJS 和 AMD,并且支持直接在前端用 <script src="lib.umd.js"></script> 的方式加載?,F(xiàn)在還在廣泛使用,不過(guò)可能將被 ESM 和 IIFE 逐漸代替。
用法如下:
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS之類(lèi)的
module.exports = factory(require('jquery'));
} else {
// 瀏覽器全局變量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this, function($) {
// 方法
function myFunc() {};
// 暴露公共方法
return myFunc;
}));
Immediately Invoked Function Expression
的縮寫(xiě)(立即調(diào)用函數(shù)表達(dá)式),只是一種寫(xiě)法,可以隱藏一些局部變量,可以用來(lái)代替 UMD 作為純粹給前端使用的寫(xiě)法。
IIFE的寫(xiě)法如下:
(function () {
// 語(yǔ)句
})();
ECMAScript Module
的縮寫(xiě),使用 import export 來(lái)管理依賴(lài)。由于它們只能寫(xiě)在所有表達(dá)式外面,所以打包器可以輕易做到分析依賴(lài)以及 Tree-Shaking。ESM 也支持動(dòng)態(tài)加載(import )。
瀏覽器直接通過(guò) <script type="module">
即可使用該寫(xiě)法。
用法如下:
import React from 'react';
感謝各位的閱讀,以上就是“CJS,UMD,ESM和IIFE怎么用”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)CJS,UMD,ESM和IIFE怎么用這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。