AMD 和 CMD

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

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

腳本的無(wú)阻塞加載

moduleA.js 代碼

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

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)檫@種情況下它不起作用。對(duì)動(dòng)態(tài)嵌入的腳本使用 async=false 來(lái)達(dá)到類似的效果。

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

defer 示例

輸出

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

async 示例

異步加載

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

輸出

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

相同之處：

加載文件時(shí)不阻塞頁(yè)面渲染

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

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

不同之處

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

每一個(gè)defer屬性的腳本都是在頁(yè)面解析完畢之后，按照原本的順序執(zhí)行，同時(shí)會(huì)在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ū)別有哪些？

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/100852.html

相關(guān)文章

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

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

lordharrd 2019-08-21 14:16 評(píng)論0 收藏0
AMD, CMD, CommonJS和UMD

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

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

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

ShevaKuilin 2019-08-21 10:40 評(píng)論0 收藏0
使用CommonJS，AMD以及CMD編寫(xiě)模塊化JavaScripts

摘要：模塊化編程首先，我想說(shuō)說(shuō)模塊化編程這個(gè)概念當(dāng)我不清楚這個(gè)概念的時(shí)候，其實(shí)說(shuō)什么模塊化編程多好多好都是懵逼的而我一直不覺(jué)得有多好，其實(shí)也是因?yàn)槲覐拈_(kāi)始寫(xiě)，就一直都在模塊化編程啊我們寫(xiě)一個(gè)文件然后我們?cè)谖募幸肴缓笳{(diào)用方法哈哈這樣已經(jīng)是模塊化模塊化編程首先，我想說(shuō)說(shuō)模塊化編程這個(gè)概念當(dāng)我不清楚這個(gè)概念的時(shí)候，其實(shí)說(shuō)什么模塊化編程多好多好都是懵逼的而我一直不覺(jué)得有多好，其實(shí)也是因?yàn)槲覐?..

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

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

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

摘要：函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)是當(dāng)前運(yùn)行時(shí)環(huán)境，第二個(gè)參數(shù)是模塊的定義體。在執(zhí)行規(guī)范時(shí)，會(huì)優(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ī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)...

harryhappy 2019-08-20 10:15 評(píng)論0 收藏0