基于 SeaJS 模块化开发的一个实例

先看 demo: 旋转图标（在 Chrome 下打开效果最佳）

源码在这里：spinning-icons

test.html 里，通过以下代码引入初始化模式：

<script src="module.js" data-main="init"></script>

除了以上引入代码，页面中不再需要任何其它 script.

init.js 里，进行初始化操作：

  module.declare(['spinning', 'jquery'], function(require) {
  var $ = require('jquery');

  $(document).ready(function() {
    require('spinning').spinning($('#followIcons a'));
    $('#followIcons').show().parent().css('background', 'none');
  });
});

在 init 模块里，使用到了 jquery 和 spinning, 需要在 declare 的第一个参数里显示声明。init 里无需知道 spinning 模块的具体实现和依赖关系，只需知道 spinning 的 exports 接口即可。

spinning.js 里，实现了旋转图标的逻辑：

  module.declare(['jquery'], function(require, exports) {
    // snip...
    exports.spinning = function(icons) { /* snip */ }
  }

spinning 的依赖项，取决于 spinning 的实现者，可以依赖 jquery, 也可以依赖 mootools, 对 init 模块是透明的。

jquery.js 是封装好的适合 CommonJS Modules/2.0 的打包文件，修改很简单，自动化脚本在这里：build.xml

这样做的好处有：

1. 调用外部模块时，只需关注 require(id) 返回的 exports API.
2. 模块向外提供功能时，通过 exports 方式暴露，简单一致。
3. 一旦形成规范，大规模普及后，模块可以应用到更多场景下，相互之间的通信协作也将变得容易。

你的看法呢？