SeaJs的模塊定義、模塊加載及模塊依賴關系

SeaJS 是由玉伯開發的一個遵循 CommonJS 規范的模塊加載框架，可用來輕松愉悅地加載任意 JavaScript 模塊和css模塊樣式。SeaJS非常小巧，小巧在于壓縮和gzip后體積只有4K,而且接口和方法也非常少，SeaJS 就兩個核心：模塊定義和 模塊的加載及依賴關系。SeaJS非常強大，SeaJS可以加載任意 JavaScript 模塊和css模塊樣式，SeaJS會保證你在使用一個模塊時,已經將所依賴的其他模塊載入到腳本運行環境中。玉伯的說法，SeaJS可以讓你享受寫代碼的樂趣，不用去管那些加載的問題。你是否厭倦了如此多的js和css引用,我數了一下我們公司網站的個人主頁首頁上有39個css和js引用，帶來的影響可想而知：

1.不利于維護，前端后端都一樣，

2.http請求過多，當然這個可以通過合并解決，但是如果沒有后端直接合并，人工成本非常大，就算后端合并，維護的時候，這么長的一個字符串，眼睛肯定看花

用SeaJS就能非常好的解決這些問題。

模塊的定義define

定義一個模塊比較簡單，例如定義一個sayHello模塊，建一個sayHello.js文檔：

define(function(require,exports,module){
    exports.sayHello = function(eleID,text) {
        document.getElementById(eleID).innerHTML=text;
    };
});

這里先看一下exports參數，exports參數是用來向外提供模塊的 API.也就是通過這個exports其他的模塊就能訪問sayHello方法。

模塊的加載use

例如我們頁面上有一個id為“out”的元素，要輸出“Hello SeaJS!”,
那么我們可以先引入sea.js
然后使用sayHello模塊：

seajs.use("sayHello/sayHello",function(say){
    say.sayHello("out","Hello SeaJS!");
});

這里的use就是使用模塊的方法，
第一個參數就是模塊表示，他是相對于sea.js的相對路徑來表示，sayHello.js后面的“.js”后綴可以省略，當然這個模塊標識還有很多方法，具體查看官方說明：http://seajs.com/docs/zh-cn/module-identifier.html
第一個參數是一個callback函數。say.sayHello()就是調用sayHello模塊的exports.sayHello方法，當然這callback函數中有個say參數。

模塊的依賴關系

模塊的依賴其實在模塊定義的時候就應該存在了。比如說把上面的sayHello模塊改寫一下，假設我們已經有了一個通用的DOM模塊，比如一些獲取元素，設置樣式等方法，例如這么一個DOM模塊，如下編寫DOM.js

define(function(require,exports,module){
var DOM={
/**
* 通過元素的id屬性獲取DOM對象,參數為字符串，或多個字符串
* @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 && (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 函數就是用來建立模塊的依賴關系，比如上面sayHelloA模塊，就是依賴于DOM模塊，因為用到了DOM模塊的get方法。
注意這里的var DOM=require(“DOM/DOM”)，這句是將應用進來的DOM模塊賦值給DOM；require(“sayHelloA/sayHello.css”)是直接應用sayHello.css css模塊或者說文件。這樣頁面上會引用這個css文件。

更多學習資源：

SeaJS主頁 – http://seajs.com
SeaJS的GitHub庫（可獲取源碼） – https://github.com/seajs/seajs
SeaJS作者玉伯的博客 – http://lifesinger.wordpress.com/
一些關于SaeJS的文章 https://github.com/seajs/seajs/wiki/Community

轉自：http://www.css88.com/archives/4273