seaJs的模組定義和模組載入淺析_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).inHT
  document.getElementById( 🎜> };
});

這裡先看一下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 id 属性
* @return {HTMLElement | Object} ID を持つ HTMLElement、または見つからない場合は null。
*/
getById: function() {
var els = [];
for (var i = 0; i var el = argument[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 オブジェクト。
*/
get: function(el) {
if (el & amp; amp; amp; & amp; amp ; amp; (el.tagName || el.item)) {
return el;
}
return this.getById(el);
}
DOM を返す;
});

那么sayHelloモモ块可以这样编写，不影響原来的デモ页面，所以我定一新的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 関数は、DOM を完成したため、DOM モジュールに依存しています。
ここでの var DOM=require("DOM/DOM") は、DOM からの DOM モジュールの値を使用することを意味します。require("sayHelloA/sayHello.css") は、sayHello を直接使用します。 .css css モジュールまたはテキスト ファイル。このような面ではこの css ファイルを参照することがあります。
最近この日ずっと更新SeaJS、より多くの喜び、感玉伯! 感じSeaJS! もちろん、このような単一のサンプルを取得する必要はありません。错模块化ただし、js ファイルの複数またはそれ以上の型の項目では、このモジュール化の利点が実現されます。