标准的 AMD 模块定义

一个标准的 AMD 模块看起来是这样子:

define(['foo', 'foo/bar'], function (foo, bar) {
return {
doSomething: function () {
console.log(foo + bar);
}
};
});

模块 foofoo/bar 在工厂函数被调用之前完成加载,并作为参数传递给工厂函数。

工作原理:

  1. RequireJS 读取依赖模块数组。
  2. 继而检查当前上下文是否已注册这些依赖模块:
    1. 如果模块已注册,则直接使用;
    2. 否则:
      1. 通过检查 paths.config 和当前模块路径,将模块 ID 解析为 URI。
      2. 加载 URI 指向的源文件。
      3. 如果依赖模块是 AMD 模块,则重复以上过程直至所有依赖模块被加载完毕。
  3. 当所有依赖模块准备妥当,将依赖模块作为参数去调用工厂函数,工厂函数的返回值作为新模块被注册到当前上下文。

Simplified CommonJS wrapper

如果你想让别人像 CommonJS 模块那样使用你的模块,尤其是你的模块拥有大量依赖模块,你可以使用 Simplified CommonJS wrapper。

define (function (require, exports, module) {
var foo = require('foo'),
bar = require('foo/bar'); exports.doSomething = function () {
console.log(foo + bar);
};
});

一个模块被当做 CommonJS 模块,它必须不能包含依赖模块数组,并且工厂函数包含至少一个参数。

工作原理:

  1. RequireJS 检查 define 函数调用是否没有使用依赖模块数组。
  2. 然后通过读取 Function.prototype.length 来检查工厂是否接受参数。
    1. 如果接受参数,则将该模块视为 CommonJS 模块:

      1. 调用 Function.prototype.toString(),并找到所有工厂函数中所有同步的 require() 调用来确定依赖模块。
      2. 加载所有依赖模块。
      3. 完成依赖模块加载后,将特殊模块 require, exportsmodule 作为参数传递给工厂函数,然后将函数返回值或 module.exportsexports 注册为新模块。
    2. 如果不接受参数,则将该模块视为标准 AMD 模块(没有依赖包),执行工厂函数并注册函数返回值为新模块。

同步 require()

对于一个标准的 AMD 模块,只要模块在当前上下文注册,你可以同步调用 require() 函数。

define (['require', 'lorem/ipsum'], function (require) {
// 因为模块 lorem/ipsum 在依赖数组中。
// 它会在工厂函数被调用前完成注册,因此本段代码是可行的。
console.log(require('lorem/ipsum'));
});

但以下代码会因为 dolor/amet 未注册而失败:

define(['require'], function (require) {
console.log(require('dolor/amet'));
});

因为我们在 define 函数中使用了依赖数组,因此新模块将被视为标准 AMD 模块,因此它不会扫描工厂函数代码以获取依赖数组。你将看到以下异常提示:

Uncaught Error: Module name 'dolor/amet' has not been loaded yet for context: _

如果使用 Simplified CommonJS Wrapper,那么 RequireJS 会在工厂函数调用前加载依赖包:

define (function (require) {
console.log(require('dolor/amet'));
});

特殊模块

标准 AMD 模块中同样可以使用特殊模块 require, exportsmodule

exports

define (['exports'], function (exports) {
exports.foo = 'bar';
exports.lorem = function (){
console.log('ipsum');
};
});

添加到 exports 上的属性会自动成为模块的公开接口,工厂函数无需返回值。

module

以下模块记录了模块 ID 和当前模块的路径。

define (['module'], function (module){
console.log(module.id);
console.log(module.uri);
});

require

require 模块除了可以加载依赖模块,还可以指出模块源文件路径。

  • require.toUrl(moduleName): 返回模块源文件路径。

PS:本文译自 Differences between the Simplified CommonJS wrapper and standard AMD define

Simplified CommonJS wrapper 与 AMD 标准定义模块差异的更多相关文章

  1. UMD、CommonJS、ES Module、AMD、CMD模块的写法

    AMD异步模块规范 RequireJS就是AMD的一个典型的实现. 以下是一个只依赖与jQuery的模块代码: // foo.js define(['jquery'], function($){ // ...

  2. Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...

  3. 前端笔记之ES678&Webpack&Babel(下)AMD|CMD规范&模块&webpack&Promise对象&Generator函数

    一.AMD和CMD规范(了解) 1.1传统的前端开发多个js文件的关系 yuan.js中定义了一个函数 function mianji(r){ return 3.14 * r * r } main.j ...

  4. 学习笔记:CommonJS规范、AMD规范

    CommonJS规范 http://wiki.jikexueyuan.com/project/webpack-handbook/commonjs.html CommonJS 规范 http://www ...

  5. AMD规范中模块id的命名规则

    AMD 即 Asynchronous Module Definition, 中文是“ 异步模块定义”的意思. AMD 规范制定了定义模块的规则,这样模块和模块的依赖可以被异步加载. AMD 规范只定义 ...

  6. IT项目角色标准定义

    角色 角色标准定义 项目主管 负责协助项目经理分配资源,确定优先级,协调公司和项目组之间的沟通.保证项目团队一直处于良好的状态中.同时监督项目经理的工作方法,以确保项目以及工件符合公司的发展方向以及用 ...

  7. 浏览器加载和渲染HTML的过程(标准定义的过程以及现代浏览器的优化)

    先看一下标准定义的浏览器渲染过程(网上找的): 浏览器打开网页的过程 用户第一次访问网址,浏览器向服务器发出请求,服务器返回html文件: 浏览器开始载入html代码,发现 head 标签内有一个 l ...

  8. Lua标准库- 模块(Modules)

    Lua包库为lua提供简易的加载及创建模块的方法,由require.module方法及package表组成 1.module (name [, ···]) 功能:建立一个模块. module的处理流程 ...

  9. Python(2.7.6) 标准日志模块 - Logging Handler

    Python 标准日志模块使用 Handler 控制日志消息写到不同的目的地,如文件.流.邮件.socket 等.除了StreamHandler. FileHandler 和 NullHandler ...

随机推荐

  1. css伪元素选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. javaweb学习总结(十八)——JSP属性范围

    所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...

  3. Liferay7 BPM门户开发之35: AssetTag的集成查询

    Tag是liferay中的Asset特性,可以用来对信息进行分类,在iferay中的Asset类型为: 1. Web Content(自定义内容) 2. Documents and Media(文档库 ...

  4. 大家一起写mvc(一)

    关于java的mvc框架层出不穷,可能大家都会用,但是具体的原理知道不知道呢.所以我想写一个写一个简单mvc的系列博客,主要面向想了解这些原理的. 其实所谓的mvc框架,基本都是一个原理,就是配置一个 ...

  5. listview可见再加载图片

    对于,listView如果同时含有大量文字和图片,那么对于用户,如果不需要滑动到后面,那么此时去加载网络图片,显然是耗费流量的. 此时可以做一些优化: listView.getRefreshableV ...

  6. 扩展easyui 的表单验证

    easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下: 代码 $.extend($.fn.validatebox.defaults.rule ...

  7. MVC视图中处理Json

    /// <summary> /// 登录 /// </summary> /// <param name="value"></param&g ...

  8. layer-list实现只有左、右和下边框的圆角矩形

    项目中需要实现如下效果的布局 也就是一个左右下角带圆角,上方不带圆角的白色背景矩形,而且只有左.右和下边框,颜色为浅灰色. 当然,切一个.9图片作为背景也能实现,但是能用代码实现的还是尽量用代码实现, ...

  9. 上海邮政EMS海关清关(个人) 流程

    最近雾埋越来越严重,上个星期买了一个tacx骑行台,不料运气欠佳,被税了.那就去乖乖缴税吧. 拿着EMS的通知单(没有通知单就不要去了),到通知单指定的地址(上海有两处,我的是武定路458号)清关提货 ...

  10. Java中BigDecimal的8种舍入模式

    java.math.BigDecimal 不可变的.任意精度的有符号十进制数.BigDecimal 由任意精度的整数非标度值和32位的整数标度(scale)组成. 如果为零或正数,则标度是小数点后的位 ...