一、由来

由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引。AMD规范就是其中比较著名一个,全称是Asynchronous Module Definition,即异步模块加载机制。完整描述了模块的定义,依赖关系,引用关系以及加载机制。该规范已被requireJS,NodeJs,Dojo,JQuery使用,可以看出它具有很大的价值。

二、简介

作为一个规范,只需定义其语法API,而不关心其实现。AMD规范简单到只有一个API,即define函数:
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中:
module-name: 模块标识,可以省略。
array-of-dependencies: 所依赖的模块,可以省略。
module-factory-or-object: 模块的实现,或者一个JavaScript对象。
define函数具有的另外一个性质,异步性。当define函数执行时,
1)首先会异步的去调用第二个参数中列出的依赖模块
2)当所有的模块被载入完成之后,如果第三个参数是一个回调函数则执行
3)然后告诉系统模块可用,也就通知了依赖于自己的模块自己已经可用。

三、AMD实例

1、如何定义一个模块

下面代码定义了一个alpha模块,并且依赖于内置的require,exports模块,以及外部的beta模块。可以看到,第三个参数是回调函数,可以直接使用依赖的模块,他们按依赖声明顺序作为参数提供给回调函数。
1)require函数让你能够随时去依赖一个模块,即取得模块的引用,从而即使模块没有作为参数定义,也能够被使用;
2)exports是定义的alpha 模块的实体,在其上定义的任何属性和方法也就是alpha模块的属性和方法。通过exports.verb = ...就是为alpha模块定义了一个verb方法。
3)例子中是简单调用了模块beta的verb方法。

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {exports.verb = function() {return beta.verb();//或者:return require("beta").verb();}
});

2、匿名模块

define 方法允许你省略第一个参数,这样就定义了一个匿名模块,这时候模块文件的文件名就是模块标识。
如果这个模块文件放在a.js中,那么a就是模块名。可以在依赖项中用"a"来依赖于这个匿名模块。
好处就是模块是高度可重用,一个匿名模块随便放在一个位置就可以使用它,模块名就是它的文件路径。
下面的代码就定义了一个依赖于alpha模块的匿名模块:

define(["alpha"], function (alpha) {return {verb: function(){return alpha.verb() + 2;}};
});

3、仅有一个参数的define

define的前两个参数都是可以省略的。第三个参数有两种情况,一种是一个JavaScript对象,另一种是一个函数。

如果是一个对象,那么它可能是一个包含方法具有功能的一个对象;也有可能是仅提供数据。后者和JSON-P非常类似,因此AMD也可以认为包含了一个完整的JSON-P实现。模块演变为一个简单的数据对象,这样的数据对象是高度可用的,而且因为是静态对象,它也是CDN友好的,可以提高JSON-P的性能。考虑一个提供中国省市对应关系的JavaScript对象,如果以传统JSON-P的形式提供给客户端,它必须提供一个callback函数名,根据这个函数名动态生成返回数据,这使得标准JSON-P数据一定不是CDN友好的。但如果用AMD,这个数据文件就是如下的形式:

define({provinces: [{name: '上海',areas: ['浦东新区', '徐汇区']},{name: '江苏',cities: ['南京', '南通']}    //.....]
});    

假设这个文件名为china.js,那么如果某个模块需要这个数据,只需要:

define(['china'], function(china){//在这里使用中国省市数据
});

通过这种方式,这个模块是真正高度可复用的,无论是用远程的,还是Copy到本地项目,都节约了开发时间和维护时间。

如果参数是一个函数,其用途之一是快速开发实现。适用于较小型的应用,你无需提前关注自己需要什么模块,自己给谁用。在函数中,可以随时require自己需要的模块。例如:

define(function(){var p = require('china');//使用china这个模块
});

即你省略了模块名,以及自己需要依赖的模块。这不意味着你无需依赖于其他模块,而是可以让你在需要的时候去require这些模块。define方法在执行的时候,会调用函数的toString方法,并扫描其中的require调用,提前帮助你载入这些模块,载入完成之后再执行。这使得快速开发成为可能。

需要注意的一点是,Opera不能很好的支持函数的toString方法,因此,在浏览器中它的适用性并不是很强。但如果你是通过build工具打包所有的 JavaScript文件,这将不是问题,构建工具会帮助你扫描require并强制载入依赖的模块。

转载于:https://www.cnblogs.com/asand/p/7344618.html

JavaScript的AMD规范相关推荐

  1. Javascript模块规范(CommonJS规范AMD规范)

    Javascript模块化编程(AMD&CommonJS) 前端模块化开发的价值:https://github.com/seajs/seajs/issues/547 模块的写法 查看 AMD规 ...

  2. Javascript模块化编程:AMD规范

    一.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写 ...

  3. AMD规范:简单而优雅的动态载入JavaScript代码

    本文翻译自http://www.sitepen.com/blog/2010/11/04/requirejsamd-module-forms/,并加入部分自己的解释. CommonJS 提出了一种用于同 ...

  4. JavaScript 模块化编程(二):AMD规范

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...

  5. Javascript模块化编程(二):AMD规范

    Javascript模块化编程(二):AMD规范 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提, ...

  6. CommonJS规范与AMD规范的理解

    2019独角兽企业重金招聘Python工程师标准>>> 链接地址:http://www.xx566.com/detail/32.html 谈到AMD,我们首先来了解一个基于AMD规范 ...

  7. RequireJS和AMD规范

    目录 概述 define方法:定义模块 require方法:调用模块 AMD模式小结 配置require.js:config方法 插件 优化器r.js 参考链接 概述 RequireJS是一个工具库, ...

  8. JavaSript模块规范 - AMD规范与CMD规范介绍[转]

    原文地址:http://blog.chinaunix.net/uid-26672038-id-4112229.html JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什 ...

  9. require.js的AMD规范详解

    require.js使用简介 在web刚开始发展的蛮荒时代,一个页面中只需要加载一个或少量的js文件,不存在模块,也不存在冲突之类的问题,但随着web项目的发展,它越来越大,js文件动辄几十个,怎么加 ...

最新文章

  1. opencv 行与列
  2. linspace python_python np.linspace
  3. 杯具,丢失了一部分邮件
  4. 第十八章 4string 字符串的合并
  5. gb酱油和gbt酱油哪个好_都是酱油,生抽好还是味极鲜好?老板:两者差别很大,别买错了...
  6. adam算法效果差原因_冷库制冷效果差原因
  7. ORACLE中的异常处理
  8. 图片 过度曝光_解读:摄影初学者,如何理性处理“曝光不足”与“曝光过度”...
  9. MongoDB Array Query Operators
  10. JavaScript截断/切片/修剪掉字符串中的最后一个字符
  11. mysql sql delete语句_SQL Delete语句
  12. bp神经网络数字识别matlab_pytorch神经网络实践(1): 安装与初次使用pytorch搭建神经网络实践手写数字识别教程
  13. Yii路由之LimeSurvey去掉烦人的/index.php/*
  14. 干货满满!!!盘点交互式甘特图控件VARCHART XGantt用户手册、视频教程!
  15. 杭州电子科技大学java刷题_杭州电子科技大学的OJ
  16. unity3d开发 打飞机小游戏(五)(飞机移动/敌机死亡动画)
  17. 2个月,3000节音频,利润30万+这就是赚钱的秘密
  18. C#中随机分组相关Test
  19. 怎么在宝妈论坛引流?宝妈论坛如何引流?如何引流宝妈群体
  20. Kafka 入门 (一)

热门文章

  1. array_map与array_column之间的关系
  2. c#书写规范之---注释
  3. django的模板系统
  4. 上传图片到第三方服务器
  5. Python的数据库mongoDB的入门操作
  6. 前端的一些常用DOM和事件归纳
  7. log4j.xml如何配置
  8. Android之linux基础教学之六 异常
  9. 算法-----礼物的最大价值
  10. 回溯算法-----复原IP地址(Java版本)