【SeaJS】【2】再识SeaJS

为了更清楚地认识SeaJS，在此再举一个示例，最终效果图如下：

一、没有使用SeaJS的示例

1、从http://jquery.com/download/下载jquery.js放置到E:\seajs\sample\modules下

2、从http://seajs.org/docs/#downloads下载sea.js放置到E:\seajs\sample\modules下

3、创建页面文件hello.html，并放置在E:\seajs\sample\app下。其内容如下：

4、创建init.js，并放置在E:\seajs\sample\app下。其内容如下：

$("#seajsName").html("SeaJS");

$("#seajsAddress").html("http://seajs.org/docs/");

$("#seajsLabel").html("玉伯");

5、在浏览器打开hello.html可以看到上面的效果。

二、使用SeaJS示例：

   在上面的hello.html可以看到直接引用了jquery.js和init.js这两个文件，由于在init.js需要使用到jquery.js，所以jquery.js要先于init.js加载。使用SeaJS就可以把依赖关系最小化，下面来改造上面的示例。

1、删除hello.html中的jquery.js和init.js，而让其只引用sea.js。

<script src="../modules/jquery.js"></script>

<script src="./init.js"></script>

<script src="../modules/sea.js"></script>

2、由于jquery.js是作为工具而存在的，为了全局可以使用它，此处利用SeaJS的config API把其配置出来。

<script>

   seajs.config({

      base: "../modules/",

      alias: {

          "jquery": "jquery.js"

      }

   });

</script>

经过这样的配置，在其他的JS文件可以直接通过require("jquery")把jquery.js引用过来。

3、init.js是为了给Name、Address和Author赋值的，所以需要在SeaJS加载后使用。这里利用SeaJS的 use API把它引进过来。

seajs.use("./init.js");

经过上面三步hello.html内容变为：

4、使用seajs.use API把init.js引进来，也意味着init.js必须按SeaJS规范要求写代码，否则SeaJS怎么会识别init.js呢？这个是比较容易理解的。为了让SeaJS识别init.js，需要在init.js上增加define(function(require, exports, module){}，然后在{}内写自己的代码。这点看起来与nodeJS很像吧。修改后的init.js为：

define(function(require, exports, module){

   var $ = require("jquery");

   $("#seajsName").html("SeaJS");

   $("#seajsAddress").html("http://seajs.org/docs/");

   $("#seajsLabel").html("玉伯");    

});

5、在浏览器中打开hello.html，会发现jquery是找不到的，异常信息为：

仔细想一想就能明白，jquery.js出道时sea.js还未出道，所以jquery.js并未按SeaJS的规范来写，为了让SeaJS识别jquery.js，同时又不破坏jquery.js的现有代码，可以如下修改jquery.js代码：

define(function(){

   // 原jquery.js代码

   return $.noConflict();

});

在浏览器中打开hello.html看一下效果吧。