彻底理解AMD和CMD
一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要遵循一定的规范,各行其是就都乱套了。
AMD
AMD 规范是 CommonJS 模块规范的一个延伸,它的模块定义如下:
define(id?, dependencies?, factory);
它的模块 id
和依赖是可选的,与Node模块相似的地方在于 factory
的内容就是实际代码的内容。
下面是在 Node 是使用 AMD 规范的例子,该例子使用了第三方库 requirejs
。
// a.js
define(function() { return 'hello world'
});
// b.js
define(['a'], function(data) { let exports = {} exports.sayHello = function () { console.log(data) } return exports
});
// index.js
const requirejs = require('requirejs');
requirejs.config({ nodeRequire: require
});
requirejs(['b'], function (obj) { obj.sayHello()
});
与 commonJS 不同之处在于,AMD 模块需要用 define
来明确定义一个模块,而在 Node 实现中是隐式包装的,它们的目的是进行作用域隔离,仅在需要的时候被引入,避免掉过去那种通过全局变量或者全局命名空间的方式,以免变量污染和不小心被修改。另一个区别则是内容需要通过返回的方式实现导出。
CMD
CMD规范由国内的玉伯提出,与AMD规范的主要区别在于定义模块和依赖引入的部分。AMD需要在声明模块的时候指定所有的依赖(依赖前置),通过形参传递依赖到模块内容中:
define(['dep1', 'dep2'], function (dep1, dep2) { return function () {};
});
与AMD模块规范相比,CMD模块更接近于Node对CommonJS规范的定义,在依赖部分,CMD支持动态引入(就近依赖),示例如下。
下面是在 Node 是使用 CMD 规范的例子,该例子使用了第三方库 seajs
。
// a.js
define(function() { return 'hello world'
});
// b.js
define(function(require) { let data = require('./a') let exports = {} exports.sayHello = function () { console.log(data) } return exports
});
// index.js
const seajs = require('seajs');
let obj = require('./b')
obj.sayHello()
AMD和CMD最大的区别是对依赖模块的执行时机处理不同。
define(function(require, exports, module) {
// The module code goes here
});
require
、 exports
和 module
通过形参传递给模块,在需要依赖模块时,随时调用 require() 引入即可。三个参数表示的意思和commonJS规范相同。
完
彻底理解AMD和CMD相关推荐
- 理解AMD ,CMD,CommonJS规范
https://blog.csdn.net/xcymorningsun/article/details/52709608 理解AMD ,CMD,CommonJS规范 2016年09月30日 10:33 ...
- javascript模块化之CommonJS、AMD、CMD、UMD、ES6
javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结 一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...
- JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules
随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一 ...
- 关于commonjs,AMD,CMD之间的异同
1.简介 随着前端业务复杂度的增加,模块化成为一个大的趋势.而在ES6还未被浏览器所支持的情况下,commonjs作为ES6中标准模块加载方案,在客服端中的支持情况并不好,现在在客服端中有2中模块化的 ...
- 前端模块化,AMD与CMD的区别
在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可:如今CPU.浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得 ...
- CommonJs, AMD/RequireJs,CMD/seajs
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解 ...
- 模块化 AMD与CMD 规范
JavaSript模块规范 - AMD规范与CMD规范介绍 2014-02-19 13:12:01 分类: JavaScript JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单 ...
- 前端模块化CommonJS、AMD、CMD、ES6
一.前端模块化 什么是模块化?为什么前端需要模块化? js代码量激增,放在同一个文件里面,不容易维护,而且牵一发而动全身. 这时候就需要将代码按照逻辑放在不同的文件里面,按照一定的语法规则,遵循特定的 ...
- 再谈 JS中的模块规范(CommonJS,AMD,CMD)来自玉伯的seajs分析
随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...
最新文章
- 一套基于 SpringBoot 的完整高并发电商系统,拿去面试简直不要太好用!
- java params 参数_将params作为参数传递给类扩展方法的函数
- 大学计算机课算绩点吗,南京大学GPA是如何计算的
- Win10 ancona傻瓜安装tensorflow-gpu,ancona傻瓜安装pytorch-gpu
- 1732: 数花费(Kruscal)
- Webstrom 卡顿问题
- python剑指offer替换空格_《剑指Offer》字符串 替换空格
- python 中re模块学习随笔
- 程序猿都应学习的语言:看 25 张图学 UML
- JavaEE学习14(应用)--用户自动登陆
- 金蝶kis专业版系统登录服务器,金蝶kis专业版怎么远程连接服务器
- el-descriptions的入门学习
- 二十一世纪大学英语读写基础教程学习笔记(原文)——3 - Mothers(母亲)
- 【Python数据分析与可视化】Pandas统计分析-实训
- 抠脚大叔如何改变性别,Python实现变声器功能
- 是寒冬还是风口?2015年HTML5游戏完整产业链报告
- LC Uniboot相比于常规的LC光纤连接器有什么特点?
- Rpgmakermv(38)MOG_Theatrhythm
- CSS 样式的 initial(默认)和 inherit(继承)以及 unset
- 【Linux进程间通信】一、什么是IPC