sea.js的初次尝试

sea.js文档地址：http://seajs.org/docs/#docs

sea.js是一个模块加载器，一个文件就是一个模块。

sea.js主要解决的问题是：模块化编程（针对js）、异步加载、无需考虑命名空间

初次尝试：

1.加载模块

sea.use加载一个或多个模块

define用来定义模块

目录结构：

--test.html

--a

|--a.js

--b

|--b.js

--seajs

|--seajs

test.html:

<script type="text/javascript">
		seajs.use(['seajs/test/a/a','seajs/test/b/b']);
</script>

a/a.js:

define(function(require,exports,module){
	document.write("i am a \n");
})

效果：

页面中显示内容

虽然实验的例子很简单，但是也遇到了一些问题，比如使用sea.use的时候引入模块的路径问题

官方对路径问题给出的文档：

相对标识

相对标识以 . 开头，只出现在模块环境中（define 的 factory 方法里面）。相对标识永远相对当前模块的 URI 来解析：

// 在 http://example.com/js/a.js 的 factory 中：
require.resolve('./b');
  // => http://example.com/js/b.js

// 在 http://example.com/js/a.js 的 factory 中：
require.resolve('../c');
  // => http://example.com/c.js

顶级标识

顶级标识不以点（.）或斜线（/）开始， 会相对模块系统的基础路径（即 Sea.js 的 base 路径）来解析：

// 假设 base 路径是：http://example.com/assets/

// 在模块代码里：
require.resolve('gallery/jquery/1.9.1/jquery');
  // => http://example.com/assets/gallery/jquery/1.9.1/jquery.js

模块系统的基础路径即 base 的默认值，与 sea.js 的访问路径相关：

如果 sea.js 的访问路径是：
  http://example.com/assets/sea.js

则 base 路径为：
  http://example.com/assets/

当 sea.js 的访问路径中含有版本号时，base 不会包含 seajs/x.y.z 字串。 当 sea.js 有多个版本时，这样会很方便。

如果 sea.js 的路径是：
  http://example.com/assets/seajs/1.0.0/sea.js

则 base 路径是：
  http://example.com/assets/

所以使用相对标识可以写为：

<script type="text/javascript">
	seajs.use(['./a/a','./b/b']);
</script>

2.按需异步加载模块

使用require的异步接口require.async()

test.html

<input type="button" value="点击" id="btn">
<script type="text/javascript">
      seajs.use('./a/a');
</script>

a.js

define(function(require,exports,module){
	var btn = document.getElementById('btn');
	btn.onclick = function(){
		require.async("../b/b.js");
	}
})

b.js

define(function(require,exports,module){
	document.write("i am b");
})

加载test.html时只加载了a.js，在点击按钮之后才加载b.js。