本文转载自原地址,感谢Feeldesign Studio的无私分享!
本文介绍一下AMD规范(注意,这里的AMD和做cpu的AMD可不是一回事)。
根据之前文章的知识,我们知道一个模块系统最起码要有下面这些功能:
- 可以创建封装的模块
- 可以定义对其他模块的依赖
- 可以导出功能,被其他模块使用
AMD是“Asynchronous Module Definition”的缩写,意思就是“异步模块定义”。从名称上就可以看出,它是通过异步方式加载模块的,模块的加载不影响后续语句的执行,所有依赖加载中的模块的语句,都会放在一个回调函数中,等到该模块加载完成后,这个回调函数才运行。
AMD规范的API非常简单:
define(id?, dependencies?, factory);
规范定义了一个define函数,它用来定义一个模块。它包含三个参数,前两个参数都是可选的。
- 第一个参数 id:是一个string字符串,它表示模块的标识(也就是模块的路径,通过id才能知道从什么位置去加载依赖的模块)
- 第二个参数 dependencies:是一个数组,成员是依赖模块的id
- 第三个参数 factory:是一个回调函数,在依赖的模块加载成功后,会执行这个回调函数,它的参数是所有依赖模块的引用,如果回调函数有返回值,会导出出来
一个完整的模块定义包含模块名称,模块的依赖和回调函数,比如下面的代码:
define("adder", ["math"], function (math) { return { addTen : function (x) { return math.add(x, 10); } }; });
如果这个模块并没有依赖,那么默认的依赖是["require", "exports", "module"]
,这时模块可以改写为:
define("adder", function (require, exports) { exports.addTen = function (x) { return x + 10; }; });如果省略第一个参数,则会定义一个匿名模块,见代码:
define(["math"], function (math) { return { addTen : function (x) { return math.add(x, 10); } }; });在实际中,使用的更多的是匿名模块定义方式,因为这样更加的灵活,模块的标识和它的源代码不再相关,开发人员可以把这个模块放在任意的位置而不需要修改代码。一般只有在要使用工具打包模块到一个文件中时,才会声明第一个参数,所以应该尽量避免给模块命名。
在写模块的时候,也有可能没有依赖或者稍后才需要加载依赖,也就是说我们可以省略第一个和第二个参数,下面代码展示了这种用法,这也是CommonJS的写法,算是一种兼容:
define(function (require, exports, module) { …… var a = require('a'), b = require('b'); exports.action = function () { //do Something }; });
注意上述回调函数里的require的使用将被自动进行动态加载。
到现在,下面这些库都实现了AMD规范:
还有很多js库都支持了AMD规范,自己作为一个模块而存在,比如jQuery,MooTools等,所以AMD规范基本上已经是非常普及了,成为了事实上的标准。
相关推荐
TodoMVC旨在用各种框架实现TodoList的增、删、改、查功能,麻雀虽小,五脏俱全,是供小伙伴学习、练习、再学习的好例子。 虽然官网上有各种实现...为此,本猿抛砖引玉,用RequireJs+jQuery实现一个组件化的TodoMVC。
Javascript模块化编程(二)AMD规范共3页.pdf.zip
《JavaScript动态网页开发详解》 全书配套 源文件 共21章
全书配套269个JavaScript特效
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3 因为源代码比较大,压缩后76M左右 所以分为四个包上传
全书配套5个视频课件 0 编程起步之Hello_World程序 2 JavaScript事件处理 3 JavaScript基于对象编程 4 JavaScript资源访问安全性 5 JavaScript脚本与Flash进行通信
javascript模块化
JavaScript模块化:AMD.md
通行的Javascript模块规范共有两种:CommonJS和AMD。我主要介绍AMD,但是要先从CommonJS讲起
个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块,先想一想,为什么模块很重要?接下来为您详细介绍,感兴趣的朋友可以了解下啊
JavaScript网页开发——体验式学习教程.pdf JavaScript网页开发——体验式学习教程.pdf
网页设计与开发——HTML、CSS、JavaScript实例教程网页设计与开发——HTML、CSS、JavaScript实例教程网页设计与开发——HTML、CSS、JavaScript实例教程网页设计与开发——HTML、CSS、JavaScript实例教程网页设计与...
JavaScript前端开发模块化教程_PPT.rar
JavaScript凌厉开发——Ext详解与实践
javascript高级技巧的应用——示例
2014-11-18-JS模块化编程(2)——规范1
JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结.docx