FE.ES-JavaScript的模塊化歷史

caoym 發布于2019-08-23 14:39 / 796人閱讀

摘要：模塊化之前的污染，命名污染命名空間模式減少上變量數量，但仍不安全匿名閉包模式應用由模塊組成，采用模塊規范。要想讓模塊再次運行，必須清除緩存。中優先于模塊內的其他內容執行。與其對應的值是動態綁定關系，實時取到模塊內部的值。

模塊化之前的JavaScript

//Global污染，命名污染
function foo(){}

//命名空間 NameSpace模式
var Module= {
    foo: function(){},
}
Module.foo();
//減少Global上變量數量，但仍不安全

//匿名閉包 IIFE模式
var Module = (function(global){
    var _private = $("body");
    var foo = function(){console.log(_private)}
    return {
        foo: foo
    }
})($)
Module.foo();
Module._private; // undefined

COMMONJS

Node 應用由模塊組成，采用 CommonJS 模塊規范。每個文件就是一個模塊，有自己的作用域。在一個文件里面定義的變量、函數、類，都是私有的，對其他文件不可見。在服務器端，模塊的加載是運行時同步加載的；在瀏覽器端，模塊需要提前編譯打包處理。

所有代碼都運行在模塊作用域，不會污染全局作用域。

模塊可以多次加載，但是只會在第一次加載時運行一次，然后運行結果就被緩存了，以后再加載，就直接讀取緩存結果。要想讓模塊再次運行，必須清除緩存。

模塊加載的順序，按照其在代碼中出現的順序。

//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規范之后又允許輸出模塊兼容CommonJS規范和依賴后置，代碼和下面的cmd一樣。

CMD

（Common Module Definition 通用模塊定義）
用于瀏覽器端，異步加載，依賴就近。

//sea.js
define(function(require, exports, module){
    var a = require("a");
    a.doSomething();
    var b = require("b");
    b.doSomething();    // 依賴就近，延遲執行
})

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 循環依賴處理

在 CommonJS 規范中，當遇到 require() 語句時，會執行 require 模塊中的代碼，并緩存執行的結果，當下次再次加載時不會重復執行，而是直接取緩存的結果。
ES6 中,import 優先于模塊內的其他內容執行。export與其對應的值是動態綁定關系，實時取到模塊內部的值。

參考資料：
前端模塊化詳解
模塊系統
探索 JavaScript 中的依賴管理及循環依賴

GPU云服務器云服務器云計算的歷史 linux歷史的書人工智能的歷史云服務器的歷史

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100946.html

[譯]JS 模塊化歷史簡介

摘要：誠然，主要服務于模塊和包，由于簡單的模塊化語法和可復用性，大量和瀏覽器的包出現在上，也成為世界上最大的包管理器。規范中包含了一個原生的模塊化系統，一般稱之為。對于 JavaScript 來說，模塊化是一個相對現代的概念，這篇文章會帶你在 JavaScript 的世界里快速瀏覽模塊化的歷史進程~ Script 標簽和閉包在早些年間，JavaScript 就是直接寫在 HTML 的 ...

bovenson 2019-08-23 18:21 評論0 收藏0
如何用vue打造一個移動端音樂播放器

摘要：寫在前面沒錯，這就是慕課網上的那個音樂播放器，后臺是某音樂播放器的線上接口扒取，雖然這類項目寫的人很多，但不得不說這還是個少有的適合提升的好項目，做這個項目除了想寫一個比較大并且功能復雜的項目，主要原因是要拿它來應對面試，也確實對我的業務能寫在前面沒錯，這就是慕課網上的那個vue音樂播放器，后臺是某音樂播放器的線上接口扒取，雖然這類項目寫的人很多，但不得不說這還是個少有的適合vu...

lanffy 2019-08-23 10:55 評論0 收藏0
React 歷史項目維護與優化實踐

摘要：本文介紹了作者接手維護一個中型歷史項目時的一系列改進實踐，包括模塊結構拆分業務邏輯梳理打包優化等。代碼中如菜單名稱結構表單字段名等的各種硬編碼配置分散在各處。最后，在提升面向開發者的打包體驗方面，本次優化中主要實現的是與的解耦。本文介紹了作者接手維護一個中型 React 歷史項目時的一系列改進實踐，包括模塊結構拆分、業務邏輯梳理、Webpack 打包優化等。背景這是一個 PC 的...

toddmark 2019-08-20 16:50 評論0 收藏0
Linux系統安全以及相關應用

摘要：如果開啟第行和第行，表示只有用戶和組內的用戶才可以使用命令。應用程序調用相應的配置文件，從而調用本地的認證模塊，模塊放置在下，以加載動態庫的形式進行認證。對賬號各項屬性進行檢查，如是否允許登錄系統，帳號是否已經過期，是否達到最大用戶數等。 @[toc]1、賬號安全控制1.系統賬號清理將非登錄用戶的Shell設為...

junfeng777 2021-11-24 09:39 評論0 收藏0