全部源碼都存放在 GitHub 上:seajs/examples,目錄結構爲:css
examples/ |-- sea-modules 存放 seajs、jquery 等文件,這也是模塊的部署目錄 |-- static 存放各個項目的 js、css 文件 | |-- hello | |-- lucky | `-- todo `-- app 存放 html 等文件 |-- hello.html |-- lucky.html `-- todo.html
spm(static package manager)致力於提供一個開放、通用、完善、集成化的基於瀏覽器模塊生命週期的包管理工具,包括初始化、編碼、本地化調試、文檔生成、發佈、依賴管理、單元測試、構建、源服務等等功能。html
dist -- sea.js 等壓縮好的文件,直接可用 docs -- 使用文檔 lib -- 給 Node.js 用的版本 src -- 源碼 tests -- 測試集 Makefile -- 可執行構建、測試等命令
推薦使用 spm 安裝:jquery
$ npm install spm -g $ spm install seajs
用來對 Sea.js 進行配置。git
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' } });
更多配置項請參考:#262github
用來在頁面中加載一個或多個模塊。npm
// 加載一個模塊 seajs.use('./a'); // 加載一個模塊,在加載完成時,執行回調 seajs.use('./a', function(a) { a.doSomething(); }); // 加載多個模塊,在加載完成時,執行回調 seajs.use(['./a', './b'], function(a, b) { a.doSomething(); b.doSomething(); });
更多用法請參考:#260瀏覽器
用來定義模塊。Sea.js 推崇一個模塊一個文件,遵循統一的寫法:app
define(function(require, exports, module) { // 模塊代碼 });
也能夠手動指定模塊 id 和依賴,詳情請參考:#242
require
, exports
和 module
三個參數可酌情省略,具體用法以下。異步
require
用來獲取指定模塊的接口。async
define(function(require) { // 獲取模塊 a 的接口 var a = require('./a'); // 調用模塊 a 的方法 a.doSomething(); });
注意,require
只接受字符串直接量做爲參數,詳細約定請閱讀:#259
用來在模塊內部異步加載一個或多個模塊。
define(function(require) { // 異步加載一個模塊,在加載完成時,執行回調 require.async('./b', function(b) { b.doSomething(); }); // 異步加載多個模塊,在加載完成時,執行回調 require.async(['./c', './d'], function(c, d) { c.doSomething(); d.doSomething(); }); });
詳細說明請參考:#242
用來在模塊內部對外提供接口。
define(function(require, exports) { // 對外提供 foo 屬性 exports.foo = 'bar'; // 對外提供 doSomething 方法 exports.doSomething = function() {}; });
詳細說明請參考:#242
與 exports
相似,用來在模塊內部對外提供接口。
define(function(require, exports, module) { // 對外提供接口 module.exports = { name: 'a', doSomething: function() {}; }; });
module.exports
與 exports
的區別,以及詳細說明請參考:#242