AMD 和 CMD

王軍發布于2019-08-23 14:36 / 1333人閱讀

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

腳本的無阻塞加載

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：在文檔完成解析后，觸發 DOMContentLoaded 事件前執行。如果缺少 src 屬性（即內嵌腳本），該屬性不應被使用，因為這種情況下它不起作用。對動態嵌入的腳本使用 async=false 來達到類似的效果。

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

defer 示例

輸出

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

async 示例

異步加載

動態創建的script標簽，async默認為true;

輸出

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

相同之處：

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

使用這兩個屬性的腳本中不能調用document.write方法

有腳本的onload的事件回調

不同之處

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

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

AMD和CMD AMD

RequireJS的標準

特點：依賴前置、預執行

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

CMD

SeaJS的標準

特點：依賴就近、懶執行

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

reference

AMD 和 CMD 的區別有哪些？

GPU云服務器云服務器 amd_cmd區別 amd和linux amd云服務器和cvm處理器 amd云服務器和云服務器什么區別嗎

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

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

【面試系列】之一：關于Cmd和Amd

摘要：開篇我叫王彬，現在是百度首頁業務部原網頁搜團隊索部前端的實習，兩天前我得知我所在的部門只有兩個，而且要分給策略，這就意味著我要面臨千軍萬馬過獨木橋的秋招。總結我在百度實習時接觸到過一個框架，用于百度首頁和首頁的模塊化開發。之一：關于Cmd和Amd 為什么想起來做這樣一個專題呢，答案應該是為了勉勵面試筆試秋招中的自己吧！而且也是為了和我一樣的你。 1.開篇我叫王彬，現在是百度首頁業務...

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

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

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

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

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

摘要：模塊化編程首先，我想說說模塊化編程這個概念當我不清楚這個概念的時候，其實說什么模塊化編程多好多好都是懵逼的而我一直不覺得有多好，其實也是因為我從開始寫，就一直都在模塊化編程啊我們寫一個文件然后我們在文件中引入然后調用方法哈哈這樣已經是模塊化模塊化編程首先，我想說說模塊化編程這個概念當我不清楚這個概念的時候，其實說什么模塊化編程多好多好都是懵逼的而我一直不覺得有多好，其實也是因為我從...

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

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

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

摘要：函數有兩個參數，第一個參數是當前運行時環境，第二個參數是模塊的定義體。在執行規范時，會優先判斷是當前環境是否支持環境，然后再檢驗是否支持環境，否則認為當前環境為瀏覽器環境 CommonJS規范 CommonJS定義的模塊分為3部分: require 模塊引用 exports 模塊導出 module 模塊本身根據CommonJS規范，一個單獨的文件就是一個模塊。每一個模塊都是一個...

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