Simplified CommonJS wrapper 与 AMD 标准定义模块差异
标准的 AMD 模块定义
一个标准的 AMD 模块看起来是这样子:
define(['foo', 'foo/bar'], function (foo, bar) {
return {
doSomething: function () {
console.log(foo + bar);
}
};
});
模块 foo
和 foo/bar
在工厂函数被调用之前完成加载,并作为参数传递给工厂函数。
工作原理:
- RequireJS 读取依赖模块数组。
- 继而检查当前上下文是否已注册这些依赖模块:
- 如果模块已注册,则直接使用;
- 否则:
- 通过检查
paths.config
和当前模块路径,将模块 ID 解析为 URI。 - 加载 URI 指向的源文件。
- 如果依赖模块是 AMD 模块,则重复以上过程直至所有依赖模块被加载完毕。
- 通过检查
- 当所有依赖模块准备妥当,将依赖模块作为参数去调用工厂函数,工厂函数的返回值作为新模块被注册到当前上下文。
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 模块,它必须不能包含依赖模块数组,并且工厂函数包含至少一个参数。
工作原理:
- RequireJS 检查
define
函数调用是否没有使用依赖模块数组。 - 然后通过读取
Function.prototype.length
来检查工厂是否接受参数。- 如果接受参数,则将该模块视为 CommonJS 模块:
- 调用
Function.prototype.toString()
,并找到所有工厂函数中所有同步的require()
调用来确定依赖模块。 - 加载所有依赖模块。
- 完成依赖模块加载后,将特殊模块
require
,exports
和module
作为参数传递给工厂函数,然后将函数返回值或module.exports
或exports
注册为新模块。
- 调用
- 如果不接受参数,则将该模块视为标准 AMD 模块(没有依赖包),执行工厂函数并注册函数返回值为新模块。
- 如果接受参数,则将该模块视为 CommonJS 模块:
同步 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
, exports
和 module
。
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 标准定义模块差异的更多相关文章
- UMD、CommonJS、ES Module、AMD、CMD模块的写法
AMD异步模块规范 RequireJS就是AMD的一个典型的实现. 以下是一个只依赖与jQuery的模块代码: // foo.js define(['jquery'], function($){ // ...
- Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- 前端笔记之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 ...
- 学习笔记:CommonJS规范、AMD规范
CommonJS规范 http://wiki.jikexueyuan.com/project/webpack-handbook/commonjs.html CommonJS 规范 http://www ...
- AMD规范中模块id的命名规则
AMD 即 Asynchronous Module Definition, 中文是“ 异步模块定义”的意思. AMD 规范制定了定义模块的规则,这样模块和模块的依赖可以被异步加载. AMD 规范只定义 ...
- IT项目角色标准定义
角色 角色标准定义 项目主管 负责协助项目经理分配资源,确定优先级,协调公司和项目组之间的沟通.保证项目团队一直处于良好的状态中.同时监督项目经理的工作方法,以确保项目以及工件符合公司的发展方向以及用 ...
- 浏览器加载和渲染HTML的过程(标准定义的过程以及现代浏览器的优化)
先看一下标准定义的浏览器渲染过程(网上找的): 浏览器打开网页的过程 用户第一次访问网址,浏览器向服务器发出请求,服务器返回html文件: 浏览器开始载入html代码,发现 head 标签内有一个 l ...
- Lua标准库- 模块(Modules)
Lua包库为lua提供简易的加载及创建模块的方法,由require.module方法及package表组成 1.module (name [, ···]) 功能:建立一个模块. module的处理流程 ...
- Python(2.7.6) 标准日志模块 - Logging Handler
Python 标准日志模块使用 Handler 控制日志消息写到不同的目的地,如文件.流.邮件.socket 等.除了StreamHandler. FileHandler 和 NullHandler ...
随机推荐
- paip.python ide 总结最佳实践o4.
paip.python ide 总结最佳实践o4. ====2个重要的标准 1.可以自动补全 2.可以断点调试 =======选型使用报告 Komodo正好儿俄机器上有,使用累挂,自动补全还凑火.就是 ...
- js/jq宽高的理解与运用
document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftd ...
- 详解Bootstrap网格系统
bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值.bootstrap框架的网格系统工作原理: 1.数据行(.row ...
- 使用ThreadPool代替Thread
线程的空间开销 线程内核对象.包含上下文信息.32位系统占用700字节 线程环境块.包括线程的异常处理链.32位系统占用4KB 用户模式栈.保存方法的参数.局部变量和返回值 内核模式栈.调用操作系统的 ...
- Android布局优化之过度绘制
如果一个布局十分复杂,那么就需要来排查是否出现了过度绘制,如果出现了,那么很可能会造成刷新率下降,造成卡顿的现象.那么什么是过度绘制呢?过度绘制就是在同一个区域中叠加了多个控件.这就像小时候我们画画, ...
- windows7文件共享
工作组模式下: 参考:http://support.microsoft.com/kb/2533010/zh-cn 1.首先区分网络类型配置文件:家庭网络,工作网络还是公用网络 2.每种类型区分两种文件 ...
- 让淘宝链接在微信中分享,GO
老婆开了个淘宝店,小卖家的心理大家都知道,一开始的小店总是没有光顾,吸引流量成了重中之中. 所以她到处发链接,微信里发了好多条,可是没过多久有好友微她,问她发的时什么,为什么都是打不开的.结果直接傻眼 ...
- Hbase&Hadoop常用命令
Hbase中根据Rowkey的前缀Prefix查询数据: scan 'test_xiaomifeng_monitoring_log',{FILTER => "(PrefixFilter ...
- QQ互联开发-01-开发者注册和网站应用申请
首先需要申请网站应用 要想使用QQ互联,首先需要先注册一个开发者账号,使用QQ号码可以注册,注册后,就可以创建网站应用了: 通过下面地址:https://connect.qq.com/,我们去登录QQ ...
- 通过Typings为Visual Studio Code增强智能提示功能
缘起 最近在学习Node.js及ThinkJS这个框架,用vscode作为开发环境.默认情况下vscode对ThinkJS的代码提示并不好,所以研究了一下,原来可以同通过Typings来让vscode ...