seajs

旨在紀錄seajs的api,公司還在用sea呢html

1 seajs.configjquery

seajs.config({
// 別名配置:文件的真實路徑與調用標識分開,以避免調用標識太長
  alias: {
    'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
    'json': 'gallery/json/1.0.2/json',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  },

  // 路徑配置:當目錄比較深,或須要跨目錄調用模塊時
  paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
  },

  // 變量配置:有些場景下,模塊路徑在運行時才能肯定
  vars: {
    'locale': 'zh-cn'
  },
  // var lang = require('./i18n/{locale}.js');
     //=> 加載的是 path/to/i18n/zh-cn.js

  // 映射配置:對模塊路徑進行映射修改,可用於路徑轉換、在線調試等。
  map: [
    [ '.js', '-debug.js' ]
  ]
  // var a = require('./a');
     //=> 加載的是 path/to/a-debug.js

  // 預加載項:能夠在普通模塊加載前,提早加載並初始化好指定模塊。
  // preload 中的空字符串會被忽略掉。
  // preload 中的配置,須要等到 use 時才加載
  // preload 配置不能放在模塊文件裏面.不然不能保證模塊 a 已經加載並執行好
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ],

  // 調試模式:值爲 true 時,加載器不會刪除動態插入的 script 標籤。插件也能夠根據 debug 配置,來決策 log 等信息的輸出。

  debug: true,

  // Sea.js 的基礎路徑:sea.js 在解析頂級標識時,會相對 base 路徑來解析
  // 推薦始終手動設置一個準確的 base 路徑

//   http://example.com/test/js/sea/sea.js

// http://example.com/test/index.html

// 在index.html中調用了sea.js

// base的默認值爲 "http://example.com/test/js/sea/"

// 以 "." 開頭 會相對於當前(被調用的)模塊解析地址。 若是不存在被調用的模塊(如seajs.use() ), 則會相對於當前頁面解析地址。

// 以 "/" 開頭 相對於當前頁面的根目錄 解析地址

// 普通命名 直接加上base前綴
  base: 'http://example.com/path/to/base/',

  // 文件編碼 默認utf-8
  charset: 'utf-8'
});

2 seajs.usejson

/用來在頁面中加載一個或多個模塊,而且可以使用回調; 參數依次爲加載的模塊的返回值
  seajs.use('./a');

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

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

3 defineapi

//define(factory)
  // 全局函數,用來定義模塊
  // factory能夠是函數,對象和字符串,對象和字符串表明模塊接口就是該對象或者字符串
  // 

  // factory爲函數時,表示是模塊的構造方法。執行該構造方法,能夠獲得模塊向外提供的接口。
  // 默認會傳入三個參數:require、exports 和 module

  // require 是一個方法,接受 模塊標識 做爲惟一參數,用來獲取其餘模塊提供的接口
  // 正確拼寫,不能重命名修改,而且只能傳遞直接量
  // // 錯誤! require(myModule); require("my-" + "module");require("MY-MODULE".toLowerCase());
    // 正確!require("my-module");

  // 條件加載依然會加載兩個,由於靜態角度分析,會同時依賴兩個

4 require.resolve數組

// 使用模塊系統內部的路徑解析機制來解析並返回模塊路徑。該函數不會加載模塊,只返回解析後的絕對路徑。
// 通常用在插件環境或需動態拼接模塊路徑的場景下
define(function(require, exports) {

  console.log(require.resolve('./b'));
  // ==> http://example.com/path/to/b.js

});

5 require.async異步

// require.async 方法用來在模塊內部異步加載模塊,並在加載完成後執行指定回調。callback 參數可選。

define(function(require, exports, module) {

  // 異步加載一個模塊,在加載完成時,執行回調
  require.async('./b', function(b) {
    b.doSomething();
  });

  // 異步加載多個模塊,在加載完成時,執行回調
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });

});

6 exports 是一個對象,用來向外提供模塊接口async

// 除了給 exports 對象增長成員,還可使用 return 直接向外提供接口
// exports 僅僅是 module.exports 的一個引用。在 factory 內部給 exports 從新賦值時,並不會改變 module.exports 的值。所以給 exports 賦值是無效的
define(function(require, exports) {

  // 錯誤用法!!!
  exports = {
    foo: 'bar',
    doSomething: function() {}
  };

});
define(function(require, exports, module) {

  // 正確寫法
  module.exports = {
    foo: 'bar',
    doSomething: function() {}
  };

});

7 module對象函數

// module.id 模塊的惟一標識。
define('id', [], function(require, exports, module) {
});
// 上面代碼中,define 的第一個參數就是模塊標識。

// module.uri根據模塊系統的路徑解析規則獲得的模塊絕對路徑。
define(function(require, exports, module) {
  console.log(module.uri); 
  // ==> http://example.com/path/to/this/file.js
});
// 通常狀況下(沒有在 define 中手寫 id 參數時),module.id 的值就是 module.uri,二者徹底相同。

//
module.dependencies dependencies 是一個數組,表示當前模塊的依賴。
//
module.exports 當前模塊對外提供的接口。 // 對 module.exports 的賦值須要同步執行,不能放在回調函數裏。下面這樣是不行的: // x.js define(function(require, exports, module) { // 錯誤用法 setTimeout(function() { module.exports = { a: "hello" }; }, 0); });
相關文章
相關標籤/搜索