组件是 CommonJS 模块
组件框架是以 CommonJS 模块格式编写的组件的集合。模块的预期值被简单地分配给一个名为“神奇属性”的module.export
,旨在由 JS 运行时提供。
这不是 Web JS 运行时的工作方式,因为 CommonJS 模块会对特定的工作流程做出假设。如果无法同步保证文件已加载(或在未加载时发生灾难性失败),浏览器就无法支持与独立环境相同的工作流程。因此,以 CommonJS 格式编写的任何内容都必须进行包装以考虑到这一点。
为了将 CommonJS 模块与 RequireJS 等 AMD 风格的模块加载器一起使用,您可以自己包装所需的模块,也可以使用 r.js 构建工具。
手动包装 CommonJS 模块
define(function(require, exports, module) {
//Put traditional CommonJS module content here
});
From: CommonJS 注释 http://requirejs.org/docs/commonjs.html#manualconversion
使用 r.js 自动包装
r.js -convert path/to/commonjs/modules path/to/converted/modules
鉴于您已经安装了r.js
with npm -g i requirejs
.
解决具体问题
然而,这一切只是解决更普遍的问题“如何在异步工作流程中使用 CommonJS 模块?”看来您实际上想要实现的目标只是能够获得一个事件系统,而无需自己编写它。
由于您要在客户端加载此功能,因此有很多客户端库已经提供了此功能。提供此服务的最受欢迎的库可能是Backbone.js 的事件 http://backbonejs.org/#Events。使用 Backbone 事件的好处是 Backbone 得到了很好的支持,并且有很好的文档记录。缺点是 Backbone 是您必须加载的另一个依赖项(包括它自己的依赖项 Underscore)。此外,Backbone 导出到全局变量,因此您需要声明一个 RequireJS shim 配置才能require()
it.
真正的AMD
圣杯将是一个小型且与 AMD 兼容的 EventEmitter 类型库。为此,您可以尝试使用微型图书馆,例如pubsub.js https://github.com/federico-lox/pubsub.js or nbd.js https://github.com/behance/nbd.js(披露:我是 nbd.js 的作者)。
如果您确实使用 nbd.js,它提供的不仅仅是 pubsub 功能。但你可以具体require()
只是 pubsub 模块。
如果您使用 git 进行源代码控制,最简单的方法是将其用作子模块。
git submodule add [email protected] /cdn-cgi/l/email-protection:behance/nbd.js.git path/to/nbd
Then, require
pubsub 模块并做你想做的事!
require(['nbd/trait/pubsub'], function(pubsub) { /* do whatever */ });