AMD 和 CMD

王军发布于2019-08-23 14:36 / 1236人阅读

摘要：脚本的无阻塞加载代码此处可以放源码使得该文件变大，以便异步加载时看效果代码同步加载输出和在文档完成解析后，触发事件前执行。对动态嵌入的脚本使用来达到类似的效果。是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用即没有属性的脚本。

脚本的无阻塞加载

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 的区别有哪些？

云服务器服务器托管 amd_cmd区别 amd和linux amd云服务器和cvm处理器 amd云服务器和云服务器什么区别吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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