SeaJS 是由玉伯開發(fā)的一個遵循 CommonJS 規(guī)范的模塊加載框架，可用來輕松愉悅地加載任意 JavaScript 模塊和css模塊樣式。SeaJS非常小巧，小巧在于壓縮和gzip后體積只有4K,而且接口和方法也非常少，SeaJS 就兩個核心：模塊定義和 模塊的加載及依賴關(guān)系。SeaJS非常強(qiáng)大，SeaJS可以加載任意 JavaScript 模塊和css模塊樣式，SeaJS會保證你在使用一個模塊時,已經(jīng)將所依賴的其他模塊載入到腳本運(yùn)行環(huán)境中。玉伯的說法，SeaJS可以讓你享受寫代碼的樂趣，不用去管那些加載的問題。你是否厭倦了如此多的js和css引用,我數(shù)了一下我們公司網(wǎng)站的個人主頁首頁上有39個css和js引用，帶來的影響可想而知：
1.不利于維護(hù)，前端后端都一樣
2.http請求過多，當(dāng)然這個可以通過合并解決，但是如果沒有后端直接合并，人工成本非常大，就算后端合并，維護(hù)的時候，這么長的一個字符串，眼睛肯定看花
用SeaJS就能非常好的解決這些問題。
模塊的定義define
定義一個模塊比較簡單，例如定義一個sayHello模塊，建一個sayHello.js文檔：
define(function(require,exports,module){
exports.sayHello = function(eleID,text) {
document.getElementById(eleID).innerHTML=text;
};
});
這里先看一下exports參數(shù)，exports參數(shù)是用來向外提供模塊的 API.也就是通過這個exports其他的模塊就能訪問sayHello方法。模塊的加載use
例如我們頁面上有一個id為“out”的元素，要輸出“Hello SeaJS!”,
那么我們可以先引入sea.js
然后使用sayHello模塊：
seajs.use("sayHello/sayHello",function(say){
say.sayHello("out","Hello SeaJS!");
});
這里的use就是使用模塊的方法:第一個參數(shù)就是模塊表示，他是相對于sea.js的相對路徑來表示，sayHello.js后面的“.js”后綴可以省略，當(dāng)然這個模塊標(biāo)識還有很多方法，具體查看官方說明：http://seajs.com/docs/zh-cn/module-identifier.html
第一個參數(shù)是一個callback函數(shù)。say.sayHello()就是調(diào)用sayHello模塊的exports.sayHello方法，當(dāng)然這callback函數(shù)中有個say參數(shù)。
模塊的依賴關(guān)系
模塊的依賴其實(shí)在模塊定義的時候就應(yīng)該存在了。比如說把上面的sayHello模塊改寫一下，假設(shè)我們已經(jīng)有了一個通用的DOM模塊，比如一些獲取元素，設(shè)置樣式等方法，例如這么一個DOM模塊，如下編寫DOM.js
define(function(require, exports, module) {
var DOM = {
/**
* 通過元素的id屬性獲取DOM對象,參數(shù)為字符串，或多個字符串
* @id getById
* @method getById
* @param {String} id the id attribute
* @return {HTMLElement | Object} The HTMLElement with the id, or null if none found.
*/
getById: function() {
var els = [];
for (var i = 0; i < arguments.length; i++) {
var el = arguments[i];
if (typeof el == "string") {
el = document.getElementById(el);
}
if (arguments.length == 1) {
return el;
}
els.push(el);
}
return els;
},
/**
* get 獲取對象，可以傳入對象或字符串，如果傳入字符串者以document.getElementById（）的方式獲取對象
* @id get
* @param {String} el html element
* @return {Object} HTMLElement object.
*/
get: function(el) {
if (el & amp; amp; amp; & amp; amp; amp; (el.tagName || el.item)) {
return el;
}
return this.getById(el);
}
};
return DOM;
});
那么sayHello模塊可以這樣編寫，為了不影響原來的demo頁面，所以我定一個新的sayHelloA模塊，我們可以這樣編寫sayHelloA.js:
define(function(require, exports, module) {
var DOM = require("DOM/DOM");
require("sayHelloA/sayHello.css");
exports.sayHello = function(eleID, text) {
DOM.get(eleID).innerHTML = text;
};
});
require 函數(shù)就是用來建立模塊的依賴關(guān)系，比如上面sayHelloA模塊，就是依賴于DOM模塊，因?yàn)橛玫搅薉OM模塊的get方法。
注意這里的var DOM=require("DOM/DOM")，這句是將應(yīng)用進(jìn)來的DOM模塊賦值給DOM；require("sayHelloA/sayHello.css")是直接應(yīng)用sayHello.css css模塊或者說文件。這樣頁面上會引用這個css文件。最近這幾天一直搗騰SeaJS，越搗騰越喜歡，感謝玉伯！感謝SeaJS！當(dāng)然你可能覺得這么簡單的幾個實(shí)例沒必要這么做。確實(shí)如果js文件少的小項(xiàng)目感覺不錯模塊化的優(yōu)勢，但是，更多的在js文件多或著中型以上項(xiàng)目這個模塊化的優(yōu)勢就體現(xiàn)出來了。
