seajs 使用指南

Sea.js 提供了一个全局方法——define，用来定义一个 CMD 模块。

1
2
3
4
5

define(function(require, exports, module) {
    // 模块代码
    // 使用require获取依赖模块的接口
    // 使用exports或者module来暴露该模块的对外接口
})

定义好模块后，在页面引入 sea.js。为了让 sea.js 内部能快速获取到自身路径，推荐手动加上 id 属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script src="http://path/to/seajs/1.2.0/sea.js" id="seajs"></script>
<script>
    seajs.use('./hello')

    // 可以带 callback
    seajs.use('./hello', function(hello) {
      hello.api()
    })
    
    // 也可同时（依次）加载多个模块
    seajs.use(['./hello', './world'], function(hello, world) {
      hello.api()
      world.api()
    })
</script>

自定义配置，简化代码：seajs.config(options)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

seajs.config({
  // 别名配置
  // 使用 alias，可以让文件的真实路径与调用标识分开，有利于统一维护
  alias: {
    'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
    'json': 'gallery/json/1.0.2/json',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  },

  // 路径配置
  // 当目录比较深，或需要跨目录调用模块时，可以使用 paths 来简化书写
  paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
  },

  // 变量配置，模块路径在运行时才能确定
  // vars 配置的是模块标识中的变量值，在模块标识中用 {key} 来表示变量
  vars: {
    'locale': 'zh-cn'
  },

  // 映射配置
  // 该配置可对模块路径进行映射修改，可用于路径转换、在线调试等
  map: [
    ['http://example.com/js/app/', 'http://localhost/js/app/']
  ],

  // 预加载项
  // 可以在普通模块加载前，提前加载并初始化好指定模块
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ],

  // 调试模式
  debug: true,

  // Sea.js 的基础路径
  base: 'http://example.com/path/to/base/',

  // 文件编码
  charset: 'utf-8'
});

注意：一般请不要配置 base 路径，把 sea.js 放在合适的路径往往更简单一致。