专栏首页OECOM详解AMD规范

详解AMD规范

AMD全称是Asynchronous Modules Definition异步模块定义,提供定义模块及异步加载该模块依赖的机制,这和浏览器的异步加载模块的环境刚好适应(浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。

AMD规范只定义了一个函数 "define",它是全局变量。模块通过 define 函数定义在闭包中,格式如下:

define(id?: String, dependencies?: String[], factory: Function|Object);

id 是模块的名字,是个字符串,这个参数是可选的。如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名字)。

模块名的格式:模块名用来唯一标识定义中模块,它们同样在依赖数组中使用。AMD的模块名规范是CommonJS模块名规范的超集。引用如下:

  • 模块名是由一个或多个单词以正斜杠为分隔符拼接成的字符串
  • 单词须为驼峰形式,或者".",".."
  • 模块名不允许文件扩展名的形式,如".js"
  • 模块名可以为 "相对的" 或 "顶级的"。如果首字符为"."或".."则为"相对的"模块名
  • 顶级的模块名从根命名空间的概念模块解析
  • 相对的模块名从 "require" 书写和调用的模块解析

上面所说到的CommonJS模块id属性常被用于JavaScript模块。 相对模块名解析示例:

  • 如果模块 "a/b/c" 请求 "../d", 则解析为"a/d"
  • 如果模块 "a/b/c" 请求 "./e", 则解析为"a/b/e"

dependencies 是个定义中模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行,并且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入(定义中模块的)工厂方法中。

依赖的模块名如果是相对的,应该解析为相对定义中的模块。换句话来说,相对名解析为相对于模块的名字,并非相对于寻找该模块的名字的路径。

AMD规范定义了三种特殊的依赖关键字。如果"require","exports", 或 "module"出现在依赖列表中,参数应该按照CommonJS模块规范自由变量去解析。

依赖参数是可选的,如果忽略此参数,它应该默认为["require","exports","module"]。然而,如果工厂方法的形参个数小于3,加载器会选择以函数指定的参数个数调用工厂方法。

define(function(require, exports, module) {})

factory 是最后一个参数,它包裹了模块的具体实现,它是一个函数或者对象。如果是函数,那么它的返回值就是模块的输出接口或值。

应用

定义一个名为 myModule 的模块,它依赖 jQuery 模块:

define('myModule', ['jquery'], function($) {
    // $ 是 jquery 模块的输出
    $('body').text('hello world');
});
// 使用
require(['myModule'], function(myModule) {});

定义一个没有依赖性的模块可以直接定义对象:

 define({
     add: function(x, y){
       return x + y;
     }
   });

因为没有定义模块名称,所以上述方式保存到js文件以后,使用时require的模块依赖就是该js文件的名字

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 详解cmd规范

    cmd的全称是Common Module Definition,即通用模块定义,其提供了模块定义和按需加载执行模块。该规范明确了模块的基本书写格式和基本的交互规...

    无邪Z
  • 显示3D文字且左右摆动效果

    图片的进出特效前面介绍过不少,但是没有介绍过文字的特效,今天我来给大家介绍一种特效。相信大家在大街上都看到过店铺的招牌,有的招牌的文字为3D效果,并且后面还能看...

    无邪Z
  • nodejs之重定向

    重定向指的是通过各种方法将各种网络请求重新定个方向转到其它位置(如:网页重定向、域名的重定向、路由选择的变化也是对数据报文经由路径的一种重定向)。

    无邪Z
  • 《深入浅出Node.js》:node的模块规范与模块实现

    Node的目标是成为一个构建快速、可伸缩的网络应用平台,通过通信协议来组织许多Node,非常容易通过扩展来达成构建大型网络应用的目的。

    前端_AWhile
  • ABP框架 - 模块系统

    我思故我在
  • YOUMO,幽默?如今连插线板都这么会玩!

    镁客网
  • Nginx的模块化设计

    Nginx由内核和模块组成 内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端请求映射到一个location block,而在这个lo...

    dys
  • 干货 | Android工程模块化平台的设计

    携程技术
  • ABP框架 - 模块系统

    我思故我在
  • 有赞移动 iOS 组件化(模块化)架构设计实践

    业务组件化(或者叫模块化)作为移动端应用架构的主流方式之一,近年来一直是业界积极探索和实践的方向。有赞移动团队自 16 年起也在不断尝试各种组件化方案,在有赞微...

    有赞coder

扫码关注云+社区

领取腾讯云代金券