本文转载自原地址,感谢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规范基本上已经是非常普及了,成为了事实上的标准。
相关推荐
### 浅析AMD、CMD与CommonJS规范——JavaScript模块化加载学习心得总结 #### 一、引言 在现代Web开发中,随着项目规模的不断扩大和技术复杂度的提高,JavaScript模块化成为了一种非常重要的编程实践。通过将复杂的...
本篇文章主要探讨了两种JavaScript模块化规范:CommonJS 和 AMD(Asynchronous Module Definition),这两种规范分别适用于服务器端和浏览器端。 1. CommonJS CommonJS 是一套为服务器端JavaScript设计的规范,它...
1. **模块化开发**:OYE遵循AMD规范,允许开发者创建和组织模块化的JavaScript代码。 2. **插件支持**:OYE支持自定义插件,扩展其功能以适应不同的应用场景。 3. **构建工具**:OYE Builder提供了一整套构建流程,...
JavaScript模块化是编程实践中一种重要的组织代码的方式,它使得代码可重用性增强,提高了开发效率,降低了维护难度。本文将深入探讨JavaScript模块化的概念、方法以及如何实现小而简洁的模块。 首先,模块化的基本...
目前,随着ES6的出现,JavaScript模块化有了新的标准——ES6模块化标准。ES6模块化标准通过import和export关键字来导入和导出模块,支持静态模块结构,提供更强大的模块化特性。这使得AMD和CMD等传统的JavaScript...
早期的JavaScript模块化尝试包括CommonJS和AMD规范,它们分别适用于服务器端和浏览器端的模块加载。然而,这些规范存在一定的局限性,如异步加载的复杂性、模块依赖解析的不透明等。为了克服这些挑战,ES6模块被引入...
**CommonJS** 是为了解决JavaScript在实际应用中缺乏模块化支持的问题而诞生的一种规范。它最初是为了让JavaScript能够在服务器端运行,尤其是为了适应Node.js这样的环境。CommonJS的出现极大地提高了JavaScript在...
总结,JavaScript的分层概念强调了代码的结构化和模块化,使得开发过程更加有序,降低了维护成本。同时,理解和处理DOM和事件的浏览器差异是JavaScript开发中的关键技能,这通常可以通过使用成熟的库和遵循最佳实践...
综上所述,"狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记"这个主题涵盖了现代前端开发的重要技术栈。Node.js作为后端基础,Npm辅助管理依赖,ES6提供了更优雅的语法,Babel确保了新特性的...
7. **模块化**:CommonJS、AMD、ES6模块,以及如何在不同环境(如浏览器和Node.js)下进行模块导入和导出。 8. **错误处理**:学习如何有效地捕获和处理运行时错误,以及try...catch语句的使用。 9. **性能优化**...
在使用RequireJS和JQuery进行模块化编程时,开发者需要对这些工具的使用细节有所了解,比如AMD规范的定义方式、JQuery模块化的引用方法,以及如何处理模块化开发中常见的循环依赖问题等。通过熟悉这些知识点,开发者...
最后,模块化是现代JavaScript开发中不可或缺的部分,作者将讨论CommonJS、AMD以及ES6模块的使用,帮助读者掌握组织和复用代码的技巧。 本书不仅适合JavaScript初学者,也适合有一定开发经验但希望深化对JavaScript...
AMD(Asynchronous Module Definition)是一种流行的JavaScript模块化规范,它允许异步加载和执行模块。"微型AMD"是一个针对小型项目或对性能有较高要求的场景设计的轻量级AMD实现。它旨在提供与大型AMD库如...
这个“JavaScript经典教程(三)——JavaScript专业设计”涵盖了从基础到高级的JavaScript知识,通过深入学习和实践,开发者可以提升自己的JavaScript专业技能,更好地应对复杂的Web开发挑战。通过阅读和理解提供的...
6. **模块化**:为了代码的可维护性和复用性,可以使用模块化技术如CommonJS、AMD或ES6的`import/export`来组织代码,确保各个部分之间解耦。 7. **性能优化**:在处理大量DOM操作时,应避免频繁的DOM操作导致的...
CommonJS(Node.js环境)和AMD(RequireJS)是另外两种常见的模块化解决方案。 错误处理: JavaScript通过`try...catch`块来捕获和处理运行时错误。`throw`语句用于抛出自定义错误,而`finally`块确保无论是否发生...
《require.js——JavaScript模块加载与AMD规范解析》 在JavaScript的世界里,随着代码量的增加,管理和组织变得越来越复杂。require.js的出现,为解决这一问题提供了强大的解决方案。require.js是一个小巧但功能...
- **结构/表现/行为**:将网页分为三个层次——结构(HTML)、表现(CSS)和行为(JavaScript),这种划分有助于实现网页的模块化开发。 - **DOM/BOM**:文档对象模型(DOM)和浏览器对象模型(BOM)为JavaScript...
9. **模块化**:CommonJS、AMD、SystemJS以及现代浏览器支持的ES6模块系统,了解它们的工作原理和使用场景。 10. **JavaScript设计模式**:如单例模式、工厂模式、观察者模式等,这些都是提高代码质量、可读性和可...
在ES6之前,JavaScript没有内置的模块系统,但可以通过CommonJS(Node.js)或AMD(RequireJS)实现模块化。ES6 引入了import和export关键字,使得在浏览器和Node.js中都能进行原生的模块化编程。 九、DOM操作 ...