【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();

});