SeaJS入门

基础

• 官网
• Sea.js 遵循 CMD 规范，可以像 Node.js 一般书写模块代码。
• 自动加载依赖、配置简洁清晰。
• 丰富插件
• 丰富的可扩展接口

优点

• 解决名称冲突和依赖管理
• 轻松管理模块版本
• 异步加载模块可以提高性能
• 模块化提高可维护性并实现跨环境共享

模块定义规范

• 全局函数define用来定义模块
• 函数define可接收一个参数define(factory);
  • factory可以为函数、对象或字符串
  • factory是对象或字符串时,表示模块就是对象或字符串本身

  define({"foo":"bar"});
  define('My name is {{name}}');
  

  • factory是函数时,该函数为模块的构造方法,执行时默认会传入三个参数:require、exports和module

  define(function(require, exports, module) {
  // 模块代码
  });
  

• 函数define也可接收三个参数define(id?, deps?, factory);
  • 字符串id为模块标识
  • 数组deps为模块依赖
  • factory与单个参数时一致

  define('hello', ['jquery'], function(require, exports, module) {
  // 模块代码
  });
  

factory函数的参数

require

• require是一个方法接受唯一字符串参数,表示其他模块的标识,返回其他模块提供的接口

define(function(require, exports, module) {
  var a = require('./a');// 获取模块 a 的接口
  a.doSomething();// 调用模块 a 的方法
});

exports

• exports是一个对象,用来向外提供本模块的接口

define(function(require, exports, module) {
  // 分别定义接口
  exports.foo = 'bar'; // 对外提供 foo 属性
  exports.doSomething = function() {};// 对外提供 doSomething 方法

  // 或者统一定义所有接口
  module.exports = {
    foo: 'bar',
    doSomething: function() {}
  };
  
  // 通过 return 也可以代替exports,直接向外提供接口
  return {
    foo: 'bar',
    doSomething: function() {}
  };
});

• 注意:exports 仅仅是 module.exports 的一个引用。在 factory 内部给 exports 重新赋值时，并不会改变 module.exports 的值。因此给 exports 赋值是无效的，不能用来更改模块接口。

module

• module对象上存储了与当前模块相关的一些属性和方法

define('foo', ['bar'], function(require, exports, module) {
    module.id;// 模块标识:foo
    module.dependencies;// 模块依赖:['bar']
    module.uri;// 模块绝对路径
    module.exports;// 模块对外提供的接口object
    
    console.log(module.exports === exports); // true,exports 是 module.exports 的一个引用
    module.exports = new SomeClass();// 如果重新给 module.exports 赋值
    console.log(module.exports === exports); // false,exports 将不再等于 module.exports
});

• 未定义id时,id的值默认就是uri

模块标识

• 模块标识指定模块
• 可以是相对标识也可以是顶级标识
• 不包含文件扩展名

相对标识

• 以.或…开始,相对所在模块的路径解析
• 只出现在模块环境中(define的factory方法里面)

define(function(require, exports, module) {
    require.resolve('./b');//指向与当前模块文件同路径下的b.js文件
    require.resolve('../c');//指向上级文件内的c.js文件
});

顶级标识

• 以模块系统的基础路径（即 Sea.js 的 base 路径）来解析

// 配置基础路径
seajs.config({
  base: 'http://example.com/assets'
});
// 如果缺省,则默认为`sea.js`的访问路径
// http://example.com/assets/sea.js的base默认值为http://example.com/assets/
// 即使`sea.js`的访问路径包含版本号,base也不会包含eajs/x.y.z 字串,以方便版本替换
// http://example.com/assets/seajs/1.0.0/sea.js的base默认值为http://example.com/assets/
define(function(require, exports, module) {
    require.resolve('gallery/jquery/1.9.1/jquery');//指向http://example.com/assets/gallery/jquery/1.9.1/jquery.js
});

普通标识

define(function(require, exports, module) {
    require.resolve('http://cdn.com/js/a');// 绝对路径,指向http://cdn.com/js/a.js
    require.resolve('/js/b');// 根路径,指向http://cdn.com/js/b.js
});

文件后缀

• Sea.js 在解析模块标识时， 除非在路径中有问号（?）或最后一个字符是井号（#），否则都会自动添加 JS 扩展名（.js）。如果不想自动添加扩展名，可以在路径末尾加上井号（#）。

启动

• 在html中引入sea.js,然后调用seajs对象的use方法即可
• seajs.use(id, callback?)

<script src="path/to/sea.js"></script>
<script>
    // use的相对路径始终相对当前页面来解析
    // 加载单个模块
    seajs.use('./main', function(main) {
        main.init();
    });
    // 加载多个模块
    seajs.use(['./a', './b'], function(a, b) {
        a.init();
        b.init();
    });
</script>

配置

• seajs.config()方法用来进行配置,接收一个对象参数

seajs.config({
    // 别名
    alias:{
        "$":"jquery/jquery/1.10.1/jquery"
    }
});
// html中
define(function(require, exports, module) {
   var $ = require('$');//=> 加载的是 http://path/to/base/jquery/jquery/1.10.1/jquery.js
});

调试