SeaJS模块加载器超简教程

本文只是下面这篇教程的简化版，只提取核心部分，主要为了方便自己随时参考
原帖
http://www.cnblogs.com/leoo2sk/archive/2011/06/27/write-javascript-with-seajs.html （张洋）

SeaJs下载

https://github.com/seajs/seajs/
https://github.com/seajs/seajs/tree/master/build

示例
假设开发一个Web应用TinyApp，在TinyApp中使用jQuery框架。
TinyApp的首页会用到module1.js，module1.js依赖module2.js和module3.js，同时module3.js依赖module4.js。

//index.html
<script src="./sea.js"></script>
<script>
seajs.use('./init', function(init) {
        init.initPage();
});
</script>

//jquery.js
define(function(require, exports, module) = {
        //原jquery.js代码...
        module.exports = $.noConflict(true);
});

//init.js
define(function(require, exports, module) = {
        var $ = require('jquery');
        var m1 = require('module1');

        exports.initPage = function() {
                $('.content').html(m1.run());    
        }
});

//module1.js
define(function(require, exports, module) = {
        var $ = require('jquery');
        var m2 = require('module2');
        var m3 = require('module3');

        exports.run = function() {
                return $.merge(['module1'], $.merge(m2.run(), m3.run()));    
        }
});

//其他module略...

模块定义函数define

define(function(require, exports, module) {    //function为工厂函数
        //code of the module...
});

工厂函数factory解析
require——模块加载函数，用于记载依赖模块。
exports——接口点，将数据或方法定义在其上则将其暴露给外部调用。
module——是一个对象，存储模块的元数据。

module具体如下：
module.id——模块的ID。
module.dependencies——一个数组，存储了此模块依赖的所有模块的ID列表。
module.exports——与exports指向同一个对象。

三种编写模块的模式

1.基于exports的模式

define(function(require, exports, module) {
        var a = require('a'); //引入a模块
        var b = require('b'); //引入b模块
        var data1 = 1; //私有数据
        var func1 = function() { //私有方法
                return a.run(data1);
        }
        exports.data2 = 2; //公共数据
        exports.func2 = function() { //公共方法
                return 'hello';
        }
});

2.直接返回一个对象表示模块

define(function(require) {
        //...代码省略...
        return {
                data2: 2,
                func2: function() {
                        return 'hello';
                }
        };
});

3.模块定义没有其它代码，只返回一个对象（对于定义纯JSON数据的模块非常合适）

define({
        data: 1,
        func: function() {
                return 'hello';
        }
});

模块寻址

1.绝对地址

require("http://example/js/a"); //不用加“.js”

2.相对地址
  例如在“http://example/js/b.js”中载入

require("./c");

  则载入“http://example/js/c.js”

3.基址地址
  seajs.config()中指定 base

4.不会自动添加“.js”的情况
  （1）载入css时
  （2）含有“?”时
  （3）路径以”#”结尾时

三个载入模块的API

seajs.use、require和require.async

1.seajs.use - 用于载入入口模块

    //单一模式
    seajs.use('./a');

    //回调模式
    seajs.use('./a', function(a) {
        a.run();
    });

    //多模块模式
    seajs.use(['./a', './b'], function(a, b) {
        a.run();
        b.run();
    });

  给sea.js的script标签加“data-main”属性省略seajs.use

    <script src="./sea.js" data-main="./init"></script>

2.require - 当一个模块中需要用到其它模块时一般用require加载
  传给require的路径标识必须是字符串字面量，不能是表达式

3.require.async - js文件在用到时才下载，实现代码按需加载

require.async('/path/to/module/file', function(m) {
        //code of callback...
});

全局配置

seajs.config({
        base: 'path/to/jslib/',
        alias: {
            'app': 'path/to/app/'
        },
        charset: 'utf-8',
        timeout: 20000,
        debug: false
});

base表示基址寻址时的基址路径
alias可以对较长的常用路径设置缩写。
charset表示下载js时script标签的charset属性。
timeout表示下载文件的最大时长，以毫秒为单位。
debug表示是否工作在调试模式下。