从 RequireJS 到 SeaJS（2）

从 requirejs.org 的首页出发，接下来是快速入门和下载，我们来看下载页面：Download

产出物

RequireJS 提供了三个文件：

  1. require.js — 这是核心文件，提供 JavaScript 文件和模块加载功能
  2. require-jquery.js — 打包了 jquery 最新版本的 require.js
  3. r.js — 优化工具，以及让 RequireJS 的模块可运行于 Node 和 Rhino 环境

SeaJS 提供的内容，目前也有三部分：

  1. sea.js — 模块加载器
  2. modules — 可运行在 seajs 环境中的推荐模块，在这里下载 modules.seajs.com
  3. spm 等优化和支持工具

如果安装了 spm, 可以用 spm 获取到 seajs 提供的一切：

1
2
3
$ spm install seajs   # 安装 sea.js
$ spm install jquery  # 安装 modules 中的模块
$ spm build a.js      # 压缩、打包等操作

SeaJS 的这种设计，是由其广义定位（浏览器端的 NodeJS）决定的。在这种设计下：

1). require-jquery.js 必要性不大，在 SeaJS 里，用户直接手工或用 combo 服务合并就好：

简单灵活，扩展性也好。需要打包其他类库时，只需更改 url 参数。

2). r.js 在 SeaJS 里也是不必要的。modules 项目中的模块，比如 backbone，目前可以直接运行于三种环境中：

在浏览器中直接使用：

通过 seajs 加载：

1
2
3
4
5
<script src="http://modules.seajs.com/seajs/1.0.2/sea.js"></scipt>
<script>
seajs.use('backbone/0.5.3/backbone', function(BB) {
});
</script>

在 node 中直接调用：

1
var BB = require('./libs/backbone/0.5.3/backbone');

SeaJS 的方式接近 NodeJS，简洁优雅，致力于生态圈的形成。

插件

RequireJS 提供了一系列插件：text, order, domReady, cs, i18n.

SeaJS 默认只支持 js 和 css 模块，通过 text、coffee 和 less 插件来扩展支持的模块类型。SeaJS 还提供了 map 插件，方便开发调试：在线本地调试大观。对于 order 功能，推荐组合使用 LABjs 来实现。需要 domReady 时，则使用 jQuery 库。至于 i18n, 感觉放在模块加载框架里不太合适，可以做成独立的国际化模块。

插件实现机制上，RequireJS 采用的是钩子模式：在 require.js 源码中，主动判断并调用插件代码。

1
2
3
4
// require.js
function callPlugin(pluginName, depManager) {
  //...
}

SeaJS 的实现方式是，和原生 JavaScript 类似，暴露 prototype, 插件开发者通过给 prototype 添加新方法或覆盖原有方法来实现插件功能：

1
2
3
4
5
6
7
8
9
10
11
// plugin-xx.js
define(funtion(require, exports, module) {
  var Require = require.constructor;
  var Module = module.constructor;
 
  // 覆盖原有方法
  Require.prototype.resolve = ...
 
  // 添加新方法
  Module.prototype.extend = ...
});

这种方式的好处是，在 sea.js 的代码中，合理暴露 prototype 后，就不用怎么为插件考虑了。有了 prototype, 插件作者一定程度上可以“随心所欲”。

进一步了解，请阅读源码：src/plugins

小结

SeaJS 的产出物受广义定位影响，和 RequireJS 的定位是不一样的。后续会进一步分析两者的差异。

插件的设计无优劣。RequireJS 的方式很简单，对插件作者的要求不高。SeaJS 的插件开发方式，好处是 sea.js 本身可以保持很纯粹，不足之处是需要插件作者对 SeaJS 比较熟悉，入门更高。

后续博文会分析两者在 API 和使用场景上的差异。

posted @ 2013-05-15 11:30  zhepama  阅读(354)  评论(0)  编辑  收藏  举报