快捷導(dǎo)航

seaJs的模塊定義和模塊加載淺析

更新時(shí)間：2014年06月06日 11:13:49 作者：

這篇文章主要介紹了seaJs的模塊定義和模塊加載淺析,以及模塊間的依賴關(guān)系等問題,需要的朋友可以參考下

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

1.不利于維護(hù)，前端后端都一樣
2.http請求過多，當(dāng)然這個(gè)可以通過合并解決，但是如果沒有后端直接合并，人工成本非常大，就算后端合并，維護(hù)的時(shí)候，這么長的一個(gè)字符串，眼睛肯定看花

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

模塊的定義define

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

復(fù)制代碼代碼如下:

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

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

模塊的加載use

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

復(fù)制代碼代碼如下:

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

這里的use就是使用模塊的方法:

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

模塊的依賴關(guān)系

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

復(fù)制代碼代碼如下:

define(function(require, exports, module) {
    var DOM = {
        /**
* 通過元素的id屬性獲取DOM對象,參數(shù)為字符串，或多個(gè)字符串
* @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頁面，所以我定一個(gè)新的sayHelloA模塊，我們可以這樣編寫sayHelloA.js:

復(fù)制代碼代碼如下:

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模塊或者說文件。這樣頁面上會引用這個(gè)css文件。

最近這幾天一直搗騰SeaJS，越搗騰越喜歡，感謝玉伯！感謝SeaJS！當(dāng)然你可能覺得這么簡單的幾個(gè)實(shí)例沒必要這么做。確實(shí)如果js文件少的小項(xiàng)目感覺不錯(cuò)模塊化的優(yōu)勢，但是，更多的在js文件多或著中型以上項(xiàng)目這個(gè)模塊化的優(yōu)勢就體現(xiàn)出來了。

您可能感興趣的文章: