成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

FE.ES-JavaScript的模塊化歷史

caoym / 820人閱讀

摘要：模塊化之前的污染，命名污染命名空間模式減少上變量數(shù)量，但仍不安全匿名閉包模式應(yīng)用由模塊組成，采用模塊規(guī)范。要想讓模塊再次運(yùn)行，必須清除緩存。中優(yōu)先于模塊內(nèi)的其他內(nèi)容執(zhí)行。與其對(duì)應(yīng)的值是動(dòng)態(tài)綁定關(guān)系，實(shí)時(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ī)范。每個(gè)文件就是一個(gè)模塊，有自己的作用域。在一個(gè)文件里面定義的變量、函數(shù)、類，都是私有的，對(duì)其他文件不可見。在服務(wù)器端，模塊的加載是運(yùn)行時(shí)同步加載的；在瀏覽器端，模塊需要提前編譯打包處理。

所有代碼都運(yùn)行在模塊作用域，不會(huì)污染全局作用域。

模塊可以多次加載，但是只會(huì)在第一次加載時(shí)運(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() {}
對(duì)比 CommonJS 和 ES6 循環(huán)依賴處理

在 CommonJS 規(guī)范中，當(dāng)遇到 require() 語句時(shí)，會(huì)執(zhí)行 require 模塊中的代碼，并緩存執(zhí)行的結(jié)果，當(dāng)下次再次加載時(shí)不會(huì)重復(fù)執(zhí)行，而是直接取緩存的結(jié)果。
ES6 中,import 優(yōu)先于模塊內(nèi)的其他內(nèi)容執(zhí)行。export與其對(duì)應(yīng)的值是動(dòng)態(tài)綁定關(guān)系，實(shí)時(shí)取到模塊內(nèi)部的值。

參考資料：
前端模塊化詳解
模塊系統(tǒng)
探索 JavaScript 中的依賴管理及循環(huán)依賴

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100946.html

相關(guān)文章

  • [譯]JS 模塊化歷史簡(jiǎn)介

    摘要：誠(chéng)然，主要服務(wù)于模塊和包，由于簡(jiǎn)單的模塊化語法和可復(fù)用性，大量和瀏覽器的包出現(xiàn)在上，也成為世界上最大的包管理器。規(guī)范中包含了一個(gè)原生的模塊化系統(tǒng)，一般稱之為。 對(duì)于 JavaScript 來說，模塊化是一個(gè)相對(duì)現(xiàn)代的概念，這篇文章會(huì)帶你在 JavaScript 的世界里快速瀏覽模塊化的歷史進(jìn)程~ Script 標(biāo)簽和閉包 在早些年間，JavaScript 就是直接寫在 HTML 的 ...

    bovenson 評(píng)論0 收藏0

  • 如何用vue打造一個(gè)移動(dòng)端音樂播放器

    摘要：寫在前面沒錯(cuò)，這就是慕課網(wǎng)上的那個(gè)音樂播放器，后臺(tái)是某音樂播放器的線上接口扒取，雖然這類項(xiàng)目寫的人很多，但不得不說這還是個(gè)少有的適合提升的好項(xiàng)目，做這個(gè)項(xiàng)目除了想寫一個(gè)比較大并且功能復(fù)雜的項(xiàng)目，主要原因是要拿它來應(yīng)對(duì)面試，也確實(shí)對(duì)我的業(yè)務(wù)能 寫在前面 沒錯(cuò)，這就是慕課網(wǎng)上的那個(gè)vue音樂播放器，后臺(tái)是某音樂播放器的線上接口扒取，雖然這類項(xiàng)目寫的人很多，但不得不說這還是個(gè)少有的適合vu...

    lanffy 評(píng)論0 收藏0

  • React 歷史項(xiàng)目維護(hù)與優(yōu)化實(shí)踐

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

    toddmark 評(píng)論0 收藏0

  • Linux系統(tǒng)安全以及相關(guān)應(yīng)用

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

    junfeng777 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<