Seajs教程

API 快速參考

該頁面列舉了 Sea.js 的經常使用 API。只要掌握這些用法，就能夠嫺熟地進行模塊化開發。

 

seajs.config

用來對 Sea.js 進行配置。

seajs.config({

 

  // 設置路徑，方便跨目錄調用

  paths: {

    'arale': 'https://a.alipayobjects.com/arale',

    'jquery': 'https://a.alipayobjects.com/jquery'

  },

 

  // 設置別名，方便調用

  alias: {

    'class': 'arale/class/1.0.0/class',

    'jquery': 'jquery/jquery/1.10.1/jquery'

  }

 

});

seajs.use

用來在頁面中加載一個或多個模塊。

// 加載一個模塊

seajs.use('./a');

 

// 加載一個模塊，在加載完成時，執行回調

seajs.use('./a', function(a) {

  a.doSomething();

});

 

// 加載多個模塊，在加載完成時，執行回調

seajs.use(['./a', './b'], function(a, b) {

  a.doSomething();

  b.doSomething();

});

 

define

用來定義模塊。Sea.js 推崇一個模塊一個文件，遵循統一的寫法：

define(function(require, exports, module) {

 

  // 模塊代碼

 

});

 

require, exports 和 module 三個參數可酌情省略，具體用法以下。

require

require 用來獲取指定模塊的接口。

define(function(require) {

 

  // 獲取模塊 a 的接口

  var a = require('./a');

 

  // 調用模塊 a 的方法

  a.doSomething();

});

 

require.async

用來在模塊內部異步加載一個或多個模塊。

define(function(require) {

 

  // 異步加載一個模塊，在加載完成時，執行回調

  require.async('./b', function(b) {

    b.doSomething();

  });

 

  // 異步加載多個模塊，在加載完成時，執行回調

  require.async(['./c', './d'], function(c, d) {

    c.doSomething();

    d.doSomething();

  });

 

});

 

exports

用來在模塊內部對外提供接口。

define(function(require, exports) {

 

  // 對外提供 foo 屬性

  exports.foo = 'bar';

 

  // 對外提供 doSomething 方法

  exports.doSomething = function() {};

 

});

 

module.exports

與 exports 相似，用來在模塊內部對外提供接口。

define(function(require, exports, module) {

 

  // 對外提供接口

  module.exports = {

    name: 'a',

    doSomething: function() {};

  };

 

});

SeaJS使用說明

 

在頁面中加載模塊

在 hello.html 頁尾，經過 script 引入 sea.js 後，有一段配置代碼： 

// seajs 的簡單配置

seajs.config({

  base: "../sea-modules/",

  alias: {

    "jquery": "jquery/jquery/1.10.1/jquery.js"

  }

})

 

// 加載入口模塊

seajs.use("../static/hello/src/main")

sea.js 在下載完成後，會自動加載入口模塊。頁面中的代碼就這麼簡單。 

模塊代碼

這個小遊戲有兩個模塊 spinning.js 和 main.js，遵循統一的寫法： 

// 全部模塊都經過 define 來定義

define(function(require, exports, module) {

 

  // 經過 require 引入依賴

  var $ = require('jquery');

  var Spinning = require('./spinning');

 

  // 經過 exports 對外提供接口

  exports.doSomething = ...

 

  // 或者經過 module.exports 提供整個接口

  module.exports = ...

 

});