學習 Sea.js 筆記(二)

寫模塊:

define(function(require, exports, module) {
   使用 require(...) 引入模塊.
   經過 exports.something = ... 對外提供接口
   或經過 module.exports = ... 提供整個接口 ?
});

構建部署:
須要使用 spm 或 Grunt 工具.

spm 標準構建工具(已經發布版本3): http://spmjs.io/

項目標準目錄結構:
   dist  構建以後的文件夾
   src   存放源碼
   package.json   模塊信息. (相似於 grunt 使用的模塊信息文件)

安裝 spm:
  npm install spm@2.x -g
  npm install spm-build@0.x -g

執行 spm (執行後文件構建到 dist 目錄中):
  spm build

輔助使用 make 工具 (對應要寫 makefile)

 

若是(簡單的) spm 構建不能知足須要, 則使用 Grunt: http://gruntjs.com/
    需處理 CMD 的模塊: grunt-cmd-transport, grunt-cmd-concat

(關於 Grunt 有社區文章)

== API 快速參考 ==

seajs.config({ ... }) -- 配置. 可指定路徑(paths), 別名(alias), 變量(var), 映射(map),
   預加載項(preload), 設置調試模式(debug), 等.
   變量用於路徑只能在運行時才知道的狀況(如 lang)

seajs.use(name, callback) -- 加載一個模塊. 可選回調.
seajs.use([name_a, name_b ...], callback(a, b, ...) ) -- 加載多個模塊, 可選回調.

關於調試: https://github.com/seajs/seajs/issues/263

 

== CMD 模塊定義規範 ==

CMD: Common Module Definition

一個模塊就是一個文件, 代碼書寫格式: define(factory);

define 是一個全局函數, 用於定義模塊.

factory 能夠是:
  1. 對象 (如一個 JSON 對象)
  2. 字符串 (如模板 : 'Current user is {{name}}.')
  3. 函數: 形爲 function(require, exports, module)

define 的更復雜形式:
   define(id?, deps?, factory)
其中 id 表示模塊標識, deps 表示模塊依賴 (屬於 Modules/Transport 規範):
   define('helo', ['jquery'], function(...){...} )
參數能夠省略, 由於可經過構建工具自動生成.

require 函數:
   var foo = require(id)

異步 require:
  require.async(id, callback?) -- 異步加載一個或多個模塊, 可選回調.
   這裏 id 可形爲 [n1, n2, ...], 表示多個模塊.

require.resolve(id) -- 只解析模塊路徑, 不加載.

 

exports 是一個對象, 用來向外提供模塊接口. 例子:
   exports.foo = 'foo-bar';
   exports.faz = function ...

(在實際 examples 中, 看到 seajs.cache 中模塊的 exports 能夠是null,數組,字符串,函數,構造函數等)

還可使用 return {... } 直接向外提供接口. (? 和 exports 是否衝突, 或合併?)

給 exports 直接賦值的正確寫法: module.exports = ... (估計可任何值)

module 對象 (在調試中可看到於 seajs.cache):
   .id -- 模塊惟一標識
   .url -- 模塊絕對路徑 (正式發佈版中可能並沒有該文件, 其通常被合併到一個大文件中)
   .dependencies --- [] 表示依賴
   .exports -- 對外提供的接口

 

CMD 規範儘可能保持簡單, 須要再查, 與 CommonJS, Node.js 的相應規範保持兼容性.

 

== 模塊系統 ==

系統的定義(Wikipedia): 泛指由一羣有關聯的個體組成, 根據預先編排好的規則工做, 能完成個別元件不能
   單獨完成的工做的羣體.

(故而)要構建一個系統, 須要作:
   1. 定義系統成員;  2. 約定系統通信.

Sea.js 是前端(瀏覽器中)的模塊加載器. 這裏模塊主要指 js 模塊.

模塊:
   1. 是一段 js 代碼; (?統一的基本書寫格式)
   2. 模塊之間經過基本交互規則, 能彼此引用, 協同工做. (按理 sea 主要解決引用問題, 如何協同是模塊的事情)

額外的一篇不錯的文章 (惋惜沒有下篇, author: 孟巖):
    http://blog.csdn.net/myan/article/details/5928531
相關的另外一篇文章(author: :周愛民?)
   http://blog.csdn.net/aimingoo/article/details/6062997

相關說起的 KISSY: KISSY 是一個開源前端UI開發框架.

這些文章不錯, 因此先轉去看看文章吧.