資訊專欄INFORMATION COLUMN
摘要：模塊化之前的污染，命名污染命名空間模式減少上變量數(shù)量，但仍不安全匿名閉包模式應(yīng)用由模塊組成，采用模塊規(guī)范。要想讓模塊再次運(yùn)行，必須清除緩存。中優(yōu)先于模塊內(nèi)的其他內(nèi)容執(zhí)行。與其對應(yīng)的值是動態(tài)綁定關(guān)系，實(shí)時取到模塊內(nèi)部的值。
模塊化之前的JavaScript
//Global污染，命名污染
function foo(){}
//命名空間 NameSpace模式
var Module= {
foo: function(){},
}
Module.foo();
//減少Global上變量數(shù)量，但仍不安全
//匿名閉包 IIFE模式
var Module = (function(global){
var _private = $("body");
var foo = function(){console.log(_private)}
return {
foo: foo
}
})($)
Module.foo();
Module._private; // undefined
COMMONJS
Node 應(yīng)用由模塊組成，采用 CommonJS 模塊規(guī)范。每個文件就是一個模塊，有自己的作用域。在一個文件里面定義的變量、函數(shù)、類，都是私有的，對其他文件不可見。在服務(wù)器端，模塊的加載是運(yùn)行時同步加載的；在瀏覽器端，模塊需要提前編譯打包處理。
所有代碼都運(yùn)行在模塊作用域，不會污染全局作用域。
模塊可以多次加載，但是只會在第一次加載時運(yùn)行一次，然后運(yùn)行結(jié)果就被緩存了，以后再加載，就直接讀取緩存結(jié)果。要想讓模塊再次運(yùn)行，必須清除緩存。
模塊加載的順序，按照其在代碼中出現(xiàn)的順序。
//add.js
module.exports.add = function(a, b) {
return a + b;
};
//main.js
const add = require("./add.js").add;
module.exports.square_difference = function(a, b) {
return add(a, b) * decrease(a, b);
};
AMD
（Asynchronous Module Definition 異步加載模塊定義 ）
用于瀏覽器端，異步加載，依賴前置（提前加載）其核心接口是：define(id?, dependencies?, factory)
//require.js
var a = require("./a");
a.doSomething();
var b = require("./b")
b.doSomething();
// AMD recommended style
define(["a", "b"], function(a, b){
a.doSomething();
b.doSomething();
})
AMD規(guī)范之后又允許輸出模塊兼容CommonJS規(guī)范和依賴后置，代碼和下面的cmd一樣。
CMD（Common Module Definition 通用模塊定義 ）
用于瀏覽器端，異步加載，依賴就近。
//sea.js
define(function(require, exports, module){
var a = require("a");
a.doSomething();
var b = require("b");
b.doSomething(); // 依賴就近，延遲執(zhí)行
})
UMD
類似于兼容 CommonJS 和 AMD 的語法糖
(function (root, factory) {
if (typeof define === "function" && define.amd) {// AMD
define(["b"], function (b) {
return (root.returnExportsGlobal = factory(b));
});
} else if (typeof module === "object" && module.exports) {// CommonJS. (Node)
module.exports = factory(require("b"));
} else {// Browser globals
root.returnExportsGlobal = factory(root.b);
}
}(typeof self !== "undefined" ? self : this, function (b) {
return {};
}));
ES Moulde
import XXX from "./a.js"
export function a() {}
//export default function() {}
對比 CommonJS 和 ES6 循環(huán)依賴處理
在 CommonJS 規(guī)范中，當(dāng)遇到 require() 語句時，會執(zhí)行 require 模塊中的代碼，并緩存執(zhí)行的結(jié)果，當(dāng)下次再次加載時不會重復(fù)執(zhí)行，而是直接取緩存的結(jié)果。
ES6 中,import 優(yōu)先于模塊內(nèi)的其他內(nèi)容執(zhí)行。export與其對應(yīng)的值是動態(tài)綁定關(guān)系，實(shí)時取到模塊內(nèi)部的值。
參考資料：
前端模塊化詳解
模塊系統(tǒng)
探索 JavaScript 中的依賴管理及循環(huán)依賴
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/100946.html
摘要：誠然，主要服務(wù)于模塊和包，由于簡單的模塊化語法和可復(fù)用性，大量和瀏覽器的包出現(xiàn)在上，也成為世界上最大的包管理器。規(guī)范中包含了一個原生的模塊化系統(tǒng)，一般稱之為。 對于 JavaScript 來說，模塊化是一個相對現(xiàn)代的概念，這篇文章會帶你在 JavaScript 的世界里快速瀏覽模塊化的歷史進(jìn)程~ Script 標(biāo)簽和閉包 在早些年間，JavaScript 就是直接寫在 HTML 的 ...
摘要：寫在前面沒錯，這就是慕課網(wǎng)上的那個音樂播放器，后臺是某音樂播放器的線上接口扒取，雖然這類項(xiàng)目寫的人很多，但不得不說這還是個少有的適合提升的好項(xiàng)目，做這個項(xiàng)目除了想寫一個比較大并且功能復(fù)雜的項(xiàng)目，主要原因是要拿它來應(yīng)對面試，也確實(shí)對我的業(yè)務(wù)能 寫在前面 沒錯，這就是慕課網(wǎng)上的那個vue音樂播放器，后臺是某音樂播放器的線上接口扒取，雖然這類項(xiàng)目寫的人很多，但不得不說這還是個少有的適合vu...
摘要：本文介紹了作者接手維護(hù)一個中型歷史項(xiàng)目時的一系列改進(jìn)實(shí)踐，包括模塊結(jié)構(gòu)拆分業(yè)務(wù)邏輯梳理打包優(yōu)化等。代碼中如菜單名稱結(jié)構(gòu)表單字段名等的各種硬編碼配置分散在各處。最后，在提升面向開發(fā)者的打包體驗(yàn)方面，本次優(yōu)化中主要實(shí)現(xiàn)的是與的解耦。 本文介紹了作者接手維護(hù)一個中型 React 歷史項(xiàng)目時的一系列改進(jìn)實(shí)踐，包括模塊結(jié)構(gòu)拆分、業(yè)務(wù)邏輯梳理、Webpack 打包優(yōu)化等。 背景 這是一個 PC 的...
摘要：如果開啟第行和第行，表示只有用戶和組內(nèi)的用戶才可以使用命令。應(yīng)用程序調(diào)用相應(yīng)的配置文件，從而調(diào)用本地的認(rèn)證模塊，模塊放置在下，以加載動態(tài)庫的形式進(jìn)行認(rèn)證。對賬號各項(xiàng)屬性進(jìn)行檢查，如是否允許登錄系統(tǒng)，帳號是否已經(jīng)過期，是否達(dá)到最大用戶數(shù)等。 @[toc]1、賬號安全控制1.系統(tǒng)賬號清理將非登錄用戶的Shell設(shè)為...
閱讀 2656·2021-11-25 09:43
閱讀 2823·2021-11-16 11:50
閱讀 3478·2021-10-09 09:44
閱讀 3348·2021-09-26 09:55
閱讀 2935·2019-08-30 13:50
閱讀 1123·2019-08-29 13:24
閱讀 2165·2019-08-26 11:44
閱讀 2961·2019-08-26 11:37
