1. 程式人生 > >sea.js介紹以及用法

sea.js介紹以及用法

在 hello.html 頁尾,通過 script 引入 sea.js 後,有一段配置程式碼:

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'
} });

更多配置項請參考:#262
seajs.use

用來在頁面中載入一個或多個模組。

// 載入一個模組
seajs.use('./a');

// 載入一個模組,在載入完成時,執行回撥
seajs.use('./a', function(a) {
  a.doSomething();
});

// 載入多個模組,在載入完成時,執行回撥
seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

更多用法請參考:#260
define

用來定義模組。Sea.js 推崇一個模組一個檔案,遵循統一的寫法:

define(function(require, exports, module) {

  // 模組程式碼

});

也可以手動指定模組 id 和依賴,詳情請參考:#242
require, exports 和 module 三個引數可酌情省略,具體用法如下。
require

require 用來獲取指定模組的介面。

define(function(require) {

  // 獲取模組 a 的介面
  var a = require('./a');

  // 呼叫模組 a 的方法
  a.doSomething();
});

注意,require 只接受字串直接量作為引數,詳細約定請閱讀:#259
require.async

用來在模組內部非同步載入一個或多個模組。

define(function(require) {

  // 非同步載入一個模組,在載入完成時,執行回撥
  require.async('./b', function(b) {
    b.doSomething();
  });

  // 非同步載入多個模組,在載入完成時,執行回撥
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });

});

詳細說明請參考:#242
exports

用來在模組內部對外提供介面。

define(function(require, exports) {

  // 對外提供 foo 屬性
  exports.foo = 'bar';

  // 對外提供 doSomething 方法
  exports.doSomething = function() {};

});

詳細說明請參考:#242
module.exports

與 exports 類似,用來在模組內部對外提供介面。

define(function(require, exports, module) {

  // 對外提供介面
  module.exports = {
    name: 'a',
    doSomething: function() {};
  };

});

module.exports 與 exports 的區別,以及詳細說明請參考:#242