Sea.js 提供簡單、極致的模塊化開發體驗

參考：http://seajs.org/docs/#intro

爲何使用 Sea.js ？

Sea.js 追求簡單、天然的代碼書寫和組織方式，具備如下核心特性：

• 簡單友好的模塊定義規範：Sea.js 遵循 CMD 規範，能夠像 Node.js 通常書寫模塊代碼。
• 天然直觀的代碼組織方式：依賴的自動加載、配置的簡潔清晰，可讓咱們更多地享受編碼的樂趣。

Sea.js 還提供經常使用插件，很是有助於開發調試和性能優化，並具備豐富的可擴展接口。

兼容性

Sea.js 具有完善的測試用例，兼容全部主流瀏覽器：

Chrome 3+         ✔
Firefox 2+        ✔
Safari 3.2+       ✔
Opera 10+         ✔
IE 5.5+           ✔

Sea.js 可運行在 Mobile 端，包括 Hybrid 模式的 App 上。理論上，Sea.js 能夠運行在任何瀏覽器引擎上。

引用文獻：

前端模塊化開發的價值

一步步學會使用SeaJS 2.0

API 快速參考 

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 相似，用來在模塊內部對外提供接口。

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

CMD 模塊定義規範

模塊標識

require 書寫約定

模塊的加載啓動

配置

 

標準構建

插件

• seajs-text

 加載模板字符串

加載 Handlebars 模板並進行預編譯

加載 JSON 數據

• seajs-style

seajs.importStyle(cssText, id?)

• seajs-combo

減小 HTTP 請求數是性能優化中很是重要的一條準則。使用 combo 插件，配合服務器的 nginx-http-concat服務（安裝指南），可自動對同一批次的多個模塊進行合併下載。

• seajs-flush

經過 combo 插件，咱們能夠對同一數組中的加載項進行合併加載。經過 flush 插件，咱們能夠更進一步減小 HTTP 請求數。

• seajs-debug

 調試插件

• seajs-log

 加載 seajs-log 插件後，seajs 會擁有 log 方法。

• seajs-health

經過 health 插件，能夠分析當前頁面模塊的健康狀況。

多版本共存

• Sea.js 的調試接口

 seajs.cache Object

　經過 seajs.cache，能夠查閱當前模塊系統中的全部模塊信息

 seajs.reslove Function

　相似 require.resolve，會利用模塊系統的內部機制對傳入的字符串參數進行路徑解析。

 seajs.require Function

　全局的 require 方法，可用來直接獲取模塊接口

 seajs.data Object

  經過 seajs.data，能夠查看 seajs 全部配置以及一些內部變量的值，可用於插件開發。當加載遇到問題時，也可用於調試。

 seajs.log Function

 由 seajs-log 插件提供

• ID 和路徑匹配原則

使用 seajs.use 或 require 進行引用的文件，若是是具名模塊（即定義了 ID 的模塊），會把 ID 和 seajs.use 的路徑名進行匹配，若是一致，則正確執行模塊返回結果。反之，則返回 null。

改造現有文件爲 CMD 模塊

插件開發指南

 Sea.js 經過事件提供可擴展接口。要給 Sea.js 開發插件，須要瞭解 Sea.js 內部所提供的事件類型。