seajs

全部源碼都存放在 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

seajs.config

用來對 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

seajs.use

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

// 加載一個模塊
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 推崇一個模塊一個文件,遵循統一的寫法:app

define(function(require, exports, module) {

  // 模塊代碼

});

也能夠手動指定模塊 id 和依賴,詳情請參考:#242
requireexports 和 module 三個參數可酌情省略,具體用法以下。異步

require

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

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

相關文章
相關標籤/搜索