SeaJS 學習

什麼是系統

在生活和工做中，咱們會接觸到大量系統：天然界生態系統、計算機操做系統、軟件辦公系統，還有教育系統、金融系統、網絡系統、理論系統等等。究竟什麼是系統呢？

來看下維基百科的解釋：

系統泛指由一羣有關連的個體組成，根據預先編排好的規則工做，能完成個別元件不能單獨完成的工做的羣體。系統分爲天然系統與人爲系統兩大類。

簡言之，系統有兩個基本特性：

1. 系統由個體組成。
2. 個體之間有關連，按照規則協同完成任務。

系統中的個體可稱之爲系統成員，這樣，要構建一個系統，最基本層面須要作兩件事：

1. 定義系統成員：肯定成員是什麼。
2. 約定系統通信：肯定成員之間如何交互，遵循的規則是什麼。

只要把這兩個問題描述清楚，咱們就能夠構建出系統。

模塊系統

Sea.js 是一個適用於 Web 瀏覽器端的模塊加載器。在 Sea.js 裏，一切皆是模塊，全部模塊協同構建成模塊系統。Sea.js 首要要解決的是模塊系統的基本問題：

1. 模塊是什麼？
2. 模塊之間如何交互？

在前端開發領域，一個模塊，能夠是JS 模塊，也能夠是 CSS 模塊，或是 Template 等模塊。在 Sea.js 裏，咱們專一於 JS 模塊（其餘類型的模塊能夠轉換爲 JS 模塊）：

1. 模塊是一段 JavaScript 代碼，具備統一的基本書寫格式。
2. 模塊之間經過基本交互規則，能彼此引用，協同工做。

把上面兩點中說起的基本書寫格式和基本交互規則描述清楚，就能構建出一個模塊系統。對書寫格式和交互規則的詳細描述，就是模塊定義規範（Module Definition Specification）。

 

模塊標識

模塊標識是一個字符串，用來標識模塊。在 require、 require.async 等加載函數中，第一個參數都是模塊標識。define 函數的 dependencies 參數也是由模塊標識組成。

SeaJS 中的模塊標識是 CommonJS 模塊標識 的超集:

1. 一個模塊標識由斜線（"/"）分隔的多項組成。
2. 每一項必須是小駝峯字符串、"." 或 ".."。
3. 模塊標識能夠不包含文件後綴名，好比 ".js"。
4. 模塊標識能夠是「相對」或「頂級」標識。若是第一項是 "." 或 ".."，則該模塊標識是相對標識。
5. 頂級標識根據模塊命名空間的根路徑來解析。
6. 相對標識相對 require 所在模塊的標識來解析。

注意，符合上述規範的標識確定是 SeaJS 的模塊標識，但 SeaJS 能識別的模塊標識不須要徹底符合以上規範。 好比，除了大小寫字母組成的小駝峯字符串，SeaJS 的模塊標識字符串還能夠包含下劃線和連字符， 甚至能夠以"http://"、"https://"、"file:///" 等協議標識開頭。

相對標識

相對標識只出如今模塊環境中，以 "." 開頭。會相對當前模塊的 URI 來解析：

// 在 http://example.com/js/a.js 中：
require('./b');
  // => http://example.com/js/b.js

 頂級標識

頂級標識不以點（"."）或斜線（"/"）開始， 會相對 SeaJS 的 base 路徑來解析：

// 假設 base 路徑是：http://example.com/js/libs/

// 在模塊代碼裏：
require('jquery/1.7.1/jquery');
  // => http://example.com/js/libs/jquery/1.7.1/jquery.js

base 路徑的默認值，與 sea.js 的路徑相關： 若是 sea.js 的路徑是： http://example.com/js/libs/sea.js 則 base 路徑爲： http://example.com/js/libs/

當 sea.js 路徑中含有版本號時，base 不會包含 seajs/x.y.z 字串。 當類庫模塊有多個版本時，這樣會更方便。

若是 sea.js 的路徑是： http://example.com/libs/seajs/1.0.0/sea.js 則 base 路徑是： http://example.com/libs/

固然，也能夠手工配置 base 路徑：

seajs.config({
  base: 'http://code.jquery.com/'
});

// 在模塊代碼裏：
require('jquery');
  // => http://code.jquery.com/jquery.js

 

普通路徑

除了相對和頂級標識以外的標識都是普通路徑。普通路徑的解析規則，和 HTML 代碼中的 script.src 同樣，會相對當前頁面來解析。(以當前頁面路徑爲基礎，不管你設置了怎樣的base路徑)

// 在 http://example.com/js/main.js 中：
require('http://example.com/js/a');
  // => http://example.com/js/a.js

// 在 http://example.com/js/a.js 中：
require('/js/b');
  // => http://example.com/js/b.js

// 在任何代碼裏：
seajs.use('./c');
  // => http://example.com/path/to/page/c.js

 

seajs.use(ids, ...) 和 define(id, ...) 中的模塊標識始終是普通路徑，由於這兩個方法是在全局環境中執行的。

文件後綴的提示

除非在路徑中出現井號（"#"）或問號（"?"），SeaJS 在解析模塊標識時， 都會自動添加 JS 擴展名（".js"）。若是不想自動添加擴展名，最簡單的方法是， 在路徑末尾加上井號（"#"）。

// ".js" 後綴能夠省略：
require('http://example.com/js/a');
require('http://example.com/js/a.js');
  // => http://example.com/js/a.js

// ".css" 後綴不可省略：
require('http://example.com/css/a.css');
  // => http://example.com/css/a.css

// 當路徑中有問號（"?"）時，不會自動添加後綴：
require('http://example.com/js/a.json?callback=define');
  // => http://example.com/js/a.json?callback=define

// 當路徑以井號（"#"）結尾時，不會自動添加後綴，且會在解析時，去掉井號：
require('http://example.com/js/a.json#');
  // => http://example.com/js/a.json

 http://seajs.org/docs/#docs