seajs学些（5）----模块的加载启动_seajs use加载多个模-优快云博客

seajs学些（5）----模块的加载启动

Sea.js 是一个模块加载器，模块加载器需要实现两个基本功能：

实现模块定义规范，这是模块系统的基础。
模块系统的启动与运行。

模块定义规范的实现

这就是 define，require，exports，module 的实现。具体实现细节，有兴趣的可以看 Sea.js 的源码：seajs/src。可以按照Gruntfile.js 中声明的合并顺序阅读，核心是module.js 文件。

define 等方法的具体使用，请阅读：CMD 模块定义规范

模块系统的启动

有了 define 等模块定义规范的实现，我们可以开发出很多模块。但光有一堆模块不管用，我们还得让它们能跑起来。

首先就是启动问题。比如在 Node 中，启动很简单：

$ node main.js

这就是启动。

再举一个例子，操作系统的启动：大家都知道的，按一下开机键就好。

在 Sea.js 里，要启动模块系统很简单：

<script src="path/to/sea.js"></script>
<script>
  seajs.use('./main');
</script>

seajs.use `Function`

用来在页面中加载模块。

seajs.use `seajs.use(id, callback?)`

通过 use 方法，可以在页面中加载任意模块：

// 加载模块 main，并在加载完成时，执行指定回调
seajs.use('./main', function(main) {
  main.init();
});

use 方法还可以一次加载多个模块：

// // 并发加载模块 a 和模块 b，并在都加载完成时，执行指定回调
seajs.use(['./a', './b'], function(a, b) {
  a.init();
  b.init();
});

callback 参数可选。当只加载一个模块，且不需要 callback 时，可以用 data-main 属性来简化：

<script src="path/to/sea.js" data-main="./main"></script>

上面的代码等价于：

<script src="path/to/sea.js"></script>
<script>
  seajs.use('./main');
</script>

与 DOM ready 的关系

注意：seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在DOM ready 后执行，需要使用 jquery 等类库来保证，比如：

seajs.use(['jquery', './main'], function($, main) {
  $(document).ready(function() {
    main.init();
  });
});

sea.js 的引入

在调用 seajs.use 之前，需要先引入 sea.js 文件。引入方式有两种：

用 script 标签引入

直接在页面中用 script 标签引入：

<script src="path/to/sea.js"></script>

这是最简单直接的方式，在绝大部分情况下推荐用这种方式引入 sea.js 文件。

用异步代码引入

为了追求极致性能，有时希望加载器本身也能异步加载。可以通过下面的方式来实现 sea.js 自身的异步加载：

<script>
// 其他代码

// sea.js 的异步载入代码：
;(function(m, o, d, u, l, a, r) {
  if(m[o]) return
  function f(n) { return function() { r.push(n, arguments); return a } }
  m[o] = a = { args: (r = []), config: f(1), use: f(2), on: f(3) }
  m.define = f(0)
  u = d.createElement("script")
  u.id = o + "node"
  u.async = true
  u.src = "path/to/sea.js"
  l = d.getElementsByTagName("head")[0]
  l.appendChild(u)
})(window, "seajs", document);

// 立刻就可以调用 seajs 的方法了：
seajs.config({
  alias: {
    'jquery': 'path/to/jquery-1.9.1.min.js' 
  }
});

seajs.use('./main', function(main) {
 // do some cool things.
});
</script>

注意：这种方式下，在 sea.js 加载完成前，只能调用 define、seajs.config、seajs.use 和seajs.on 这 4 个方法。

最佳实践

seajs.use 理论上只用于加载启动，不应该出现在 define 中的模块代码里。在模块代码里需要异步加载其他模块时，可以使用require.async 方法。
引入 sea.js 时，可以把 sea.js 与其他文件打包在一起，可提前合并好，或利用 combo 服务动态合并。无论哪一种方式，为了让sea.js 内部能快速获取到自身路径，推荐手动加上 id 属性：
```
<script src="path/to/sea.js" id="seajsnode"></script>
```
加上 seajsnode 值，可以让 sea.js 直接获取到自身路径，而不需要通过其他机制去自动获取。这对性能和稳定性会有一定提升，推荐默认都加上。