sea.js介紹以及用法
阿新 • • 發佈:2019-01-25
在 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