seajs 初探

webapp开发有个特点就是单页面无刷新大量数据交互。如果不用到模块管理框架，要完成这个任务就会变得比较复杂，并且不好维护。seajs据说比较好，而且有中文说明文档，因此先对它一探究竟吧。

官网：www.seajs.org

我建立的目录结构如下：

• app - 存放主程序代码

• lib - 存放各种通用库如jquery

• style - 存放app所需样式文件

• index.html - 前端入口

先来看看index.html里面的script：

<script src="lib/sea.js"></script>  
<script>  
    // seajs 配置  
    seajs.config({  
        // 设置引用库别名  
        alias: {  
            "jq" : "jquery",  
            "zt" : "zepto",  
            "th" : "TouchHelper"  
        },  
        paths: {  
            // 采用绝对路径，万无一失  
            "app" : "/abs_path/my/app"  
        }  
    });  
    // seajs 总是通过模块定义  
    // 使用模块实现功能  
    // 入口程序  
    seajs.use("app/main");  
</script>

首先引用了lib/sea.js，然后对其进行配置。

最常用的配置是alias和paths

paths用来简化路径

alias用来简化引用库的名称、路径

它们有相同之处，容易混淆，

但是，使用它们的时候让它们各司其职不要跨界即可。

最后，使用seajs.use函数引入主程序main。

下面我们来看看main.js的代码：

define(function(require){  
  // 当jQuery没有用define定义的时候  
  // 以下语句就是把jquery引入页面而已  
  var game = require("app/game");  
  // do something with game...  
});

这个define是seajs定义模块的函数，我们来看看官方例子先：

define(function(require, exports, module) {
  // 对外提供接口
  module.exports = {
    name: 'a',
    doSomething: function() {};
  };
  // 或者直接return
  /*
  return {
    name: 'a',
    doSomething: function() {};
  };
  */
});

因此上面的game变量指向的就是require("app/game")返回的一个对象，这个对象在game.js中用module.exports或者直接return定义。

那exports参数是干嘛的呢？

其实它是module.exports的一个引用。因此你可以修改它的属性和方法，却不能重新赋值。

如果你直接让exports = anotherObject;

那么module.exports的值就无法改变，模块输出的对象就是module.exports而不是anotherObject.

关于模块依赖和加载顺序的问题，请点这里。