岁月如歌

用开放的心态,打造专业的人生。

从 RequireJS 到 SeaJS(2)

with 2 comments

从 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 提供的一切

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

SeaJS 的这种设计,是由其广义定位(浏览器端的 NodeJS)决定的。在这种设计下:

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

http://a.tbcdn.cn/libs??seajs/1.0.2/sea.js,jquery/1.6.4/jquery.js

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

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

在浏览器中直接使用:

<script src="http://modules.seajs.com/backbone/0.5.3/backbone.js"></script>

通过 seajs 加载:

<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 中直接调用:

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 源码中,主动判断并调用插件代码。

// require.js
function callPlugin(pluginName, depManager) {
  //...
}

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

// 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 和使用场景上的差异。

Advertisements

Written by lifesinger

October 27, 2011 at 21:27

Posted in Articles

2 Responses

Subscribe to comments with RSS.

  1. 盆景秀木正因为被人溺爱,才破灭了成为栋梁之材的梦。

    www.500w88.com

    December 31, 2015 at 15:30

  2. […] 从 RequireJS 到 SeaJS(2) […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s