【SeaJS】【1】初识SeaJS
最近使用JS进行前端开发，在网上翻阅时发现SeaJS，据宣传资料它可以解决命名空间冲突，可以异步加载提高HTML的解析效率，且能遵循Keep It Simple, Stupid理念，把每个JS文件进行模块化管理，解决复杂的依赖关系，具体可参见https://github.com/seajs/seajs/issues/547。
关注到如此优点，利用工作之余学习了一下官方示例，并读了一下源码，深感觉是一个不错的框架，期望后续有机会加入开源团队。本章在Window操作系统上仅简单地介绍一下官方示例，展示一下SeaJS的基本使用。
一、官方示例
1. 把sea.js放置到E:\seajs\officialsample\sea-modules\seajs\seajs\2.1.1目录
2. 把jquery.js放置到E:\seajs\officialsample\sea-modules\jquery\jquery\1.10.1目录
3. 把style.css和spinning.js放置到E:\seajs\officialsample\static\hello\src目录
4. 在E:\seajs\officialsample\app下创建hello.html
4.1 该html在div中引入11个图片，代码如下图所示： 
4.2 为了使用sea.js，需要在html中引入sea.js
<script src=\'#\'" /sea-modules/seajs/seajs/2.1.1/sea.js"></script>
4.3 由于控制图片元素需要使用到jquery.js，所以通过SeaJS的API引入jquery.js
<script>
seajs.config({
base: "../sea-modules/",
alias:{
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});
</script>
4.4 图片的渲染控制文件是spinning.js，为了使代码更加清晰，这里引用了main.js
seajs.use("../static/hello/src/main");
5. 在E:\seajs\officialsample\static\hello\src下创建main.js
define(function(require){
var Spinning = require("./spinning");
var s = new Spinning("#container");
s.render();
});
6. 在浏览器中打开hello.html文件，效果图如下：
二、官方示例简介
1. 为了节省学习官方示例时间，大家可以从附件中下载压缩包，解压后运行即可。
2. 为了让hello.html中的图片有转动效果，需要使用spinning.js管理这些<img>元素。同时在spinning.js中需要通过JQuery获取<img>元素，那么通常情况下在hello.html中要引入spinning.js和jquery.js，且jquery.js要在spinning.js之前加载，类似：
<script src=\'#\'" /sea-modules/jquery/jquery/1.10.1/jquery.js"></script>
<script src=\'#\'" /static/hello/src/spinning.js"></script>
但官方示例中并没有这样做，而只是引用了一个sea.js文件，为了使用jquery.js，这里调用了SeaJS的config API类似：
<script src=\'#\'" /sea-modules/seajs/seajs/2.1.1/sea.js"></script>
<script>
seajs.config({
base: "../sea-modules/",
alias:{
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});
</script>
3. 为了使代码逻辑更清晰，使用了main.js管理spinning.js。同时为了让sea.js认识main.js，必须使用seajs.use API且按SeaJS的要求定义main.js。类似：
seajs.use("../static/hello/src/main");
define(function(require){
require("./spinning"); // 引入依赖模块
var s = new Spinning("#container");
s.render();
});
本文出自 “青客” 博客，谢绝转载！