AMD 和 CMD

王軍發(fā)布于2019-08-23 14:36 / 1341人閱讀

摘要：腳本的無阻塞加載代碼此處可以放源碼使得該文件變大，以便異步加載時看效果代碼同步加載輸出和在文檔完成解析后，觸發(fā)事件前執(zhí)行。對動態(tài)嵌入的腳本使用來達(dá)到類似的效果。是否在允許的情況下異步執(zhí)行該腳本。該屬性對于內(nèi)聯(lián)腳本無作用即沒有屬性的腳本。

腳本的無阻塞加載

moduleA.js 代碼

console.log("I"m A");
/*
此處可以放jquery源碼
使得該文件變大，以便異步加載時看效果
*/

moduleB.js 代碼

console.log("I"m B");

同步加載

輸出

I"m A
A loaded
I"m B
A loaded

defer 和 async

defer：在文檔完成解析后，觸發(fā) DOMContentLoaded 事件前執(zhí)行。如果缺少 src 屬性（即內(nèi)嵌腳本），該屬性不應(yīng)被使用，因?yàn)檫@種情況下它不起作用。對動態(tài)嵌入的腳本使用 async=false 來達(dá)到類似的效果。

async：是否在允許的情況下異步執(zhí)行該腳本。該屬性對于內(nèi)聯(lián)腳本無作用 (即沒有src屬性的腳本）。

defer 示例

輸出

I"m B
B loaded
I"m A
A loaded

async 示例

異步加載

動態(tài)創(chuàng)建的script標(biāo)簽，async默認(rèn)為true;

輸出

I"m B
async B loaded
I"m A
async A loaded

相同之處：

加載文件時不阻塞頁面渲染

使用這兩個屬性的腳本中不能調(diào)用document.write方法

有腳本的onload的事件回調(diào)

不同之處

每一個async屬性的腳本都在它下載結(jié)束之后立刻執(zhí)行，同時會在window的load事件之前執(zhí)行。所以就有可能出現(xiàn)腳本執(zhí)行順序被打亂的情況；

每一個defer屬性的腳本都是在頁面解析完畢之后，按照原本的順序執(zhí)行，同時會在document的DOMContentLoaded之前執(zhí)行

AMD和CMD AMD

RequireJS的標(biāo)準(zhǔn)

特點(diǎn)：依賴前置、預(yù)執(zhí)行

define(["./a", "./b"], function(a, b) {
    //運(yùn)行至此，a.js和b.js已經(jīng)下載完成
    //a模塊和b模塊已經(jīng)執(zhí)行完
    a.doing();
    b.doing();
});

CMD

SeaJS的標(biāo)準(zhǔn)

特點(diǎn)：依賴就近、懶執(zhí)行

define(function(require, exports, module) {
    var a = require("./a");
    //等待a.js下載、執(zhí)行完
    a.doing();
    var b = require("./b");
    //等待b.js下載、執(zhí)行完
    b.doing();
});

reference

AMD 和 CMD 的區(qū)別有哪些？

GPU云服務(wù)器云服務(wù)器 amd_cmd區(qū)別 amd和linux amd云服務(wù)器和cvm處理器 amd云服務(wù)器和云服務(wù)器什么區(qū)別嗎

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

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

相關(guān)文章

【面試系列】之一：關(guān)于Cmd和Amd

摘要：開篇我叫王彬，現(xiàn)在是百度首頁業(yè)務(wù)部原網(wǎng)頁搜團(tuán)隊索部前端的實(shí)習(xí)，兩天前我得知我所在的部門只有兩個，而且要分給策略，這就意味著我要面臨千軍萬馬過獨(dú)木橋的秋招?？偨Y(jié)我在百度實(shí)習(xí)時接觸到過一個框架，用于百度首頁和首頁的模塊化開發(fā)。之一：關(guān)于Cmd和Amd 為什么想起來做這樣一個專題呢，答案應(yīng)該是為了勉勵面試筆試秋招中的自己吧！而且也是為了和我一樣的你。 1.開篇我叫王彬，現(xiàn)在是百度首頁業(yè)務(wù)...

lordharrd 2019-08-21 14:16 評論0 收藏0
AMD, CMD, CommonJS和UMD

摘要：若不存在則模塊標(biāo)識應(yīng)該默認(rèn)定義為在加載器中被請求腳本的標(biāo)識。其中是一個數(shù)組，里面的成員就是要加載的模塊是模塊加載完成之后的回調(diào)函數(shù)。在加載與兩個模塊之后執(zhí)行回調(diào)函數(shù)實(shí)現(xiàn)具體過程。在判斷是否支持是否存在，存在則使用方式加載模塊。我的github(PS:希望star): https://github.com/tonyzheng1... 今天由于項(xiàng)目中引入的echarts的文件太大，req...

KavenFan 2019-08-19 18:02 評論0 收藏0
「JavaScript」如何讓你的插件兼容CommonJS, AMD, CMD 和原生 JS

摘要：模塊標(biāo)準(zhǔn)有三個全局變量和。模塊中有兩種方式提供對外的接口，一種是，一種是使用進(jìn)行返回。規(guī)范中，函數(shù)同樣有一個公有屬性。由于和都可以使用來定義對外接口，故可以合并成一句代碼。模塊標(biāo)準(zhǔn) CommonJS CommonJS 有三個全局變量 module、exports 和 require。但是由于 AMD 也有 require 這個全局變量，故不使用這個變量來進(jìn)行檢測。如果想要對外提供接...

ShevaKuilin 2019-08-21 10:40 評論0 收藏0
使用CommonJS，AMD以及CMD編寫模塊化JavaScripts

摘要：模塊化編程首先，我想說說模塊化編程這個概念當(dāng)我不清楚這個概念的時候，其實(shí)說什么模塊化編程多好多好都是懵逼的而我一直不覺得有多好，其實(shí)也是因?yàn)槲覐拈_始寫，就一直都在模塊化編程啊我們寫一個文件然后我們在文件中引入然后調(diào)用方法哈哈這樣已經(jīng)是模塊化模塊化編程首先，我想說說模塊化編程這個概念當(dāng)我不清楚這個概念的時候，其實(shí)說什么模塊化編程多好多好都是懵逼的而我一直不覺得有多好，其實(shí)也是因?yàn)槲覐?..

nifhlheimr 2019-08-22 10:34 評論0 收藏0
前端模塊化開發(fā)

摘要：來源于阿賢博客模塊化今天給大家寫一篇關(guān)于前端模塊化開發(fā)知識點(diǎn)。前端模塊化開發(fā)那點(diǎn)歷史模塊化是指在解決某個復(fù)雜混雜問題時，依照一種分類的思維把問題進(jìn)行系統(tǒng)性的分解以之處理。來源于：阿賢博客 javascript模塊化今天給大家寫一篇關(guān)于前端模塊化開發(fā)知識點(diǎn)。前端模塊化開發(fā)那點(diǎn)歷史模塊化：是指在解決某個復(fù)雜、混雜問題時，依照一種分類的思維把問題進(jìn)行系統(tǒng)性的分解以之處理。模塊...

tianhang 2019-08-23 16:44 評論0 收藏0
關(guān)于CommonJS、AMD、CMD、UMD說明

摘要：函數(shù)有兩個參數(shù)，第一個參數(shù)是當(dāng)前運(yùn)行時環(huán)境，第二個參數(shù)是模塊的定義體。在執(zhí)行規(guī)范時，會優(yōu)先判斷是當(dāng)前環(huán)境是否支持環(huán)境，然后再檢驗(yàn)是否支持環(huán)境，否則認(rèn)為當(dāng)前環(huán)境為瀏覽器環(huán)境 CommonJS規(guī)范 CommonJS定義的模塊分為3部分: require 模塊引用 exports 模塊導(dǎo)出 module 模塊本身根據(jù)CommonJS規(guī)范，一個單獨(dú)的文件就是一個模塊。每一個模塊都是一個...

harryhappy 2019-08-20 10:15 評論0 收藏0