摘要：一般也不需要傳入，需要用到的模塊用加載即可。根據(jù)應(yīng)用場(chǎng)景的不同，提供了三個(gè)載入模塊的，分別是和。主要用于載入入口模塊。入口模塊相當(dāng)于語(yǔ)言的函數(shù)，同時(shí)也是整個(gè)模塊依賴樹(shù)的根。表示下載文件的最大時(shí)長(zhǎng)，以毫秒為單位。

本文轉(zhuǎn)自張洋，因?yàn)镾eaJS更新版本很快，所以原文中很多地方不太適用，在這里發(fā)布一個(gè)更新版。

下載及安裝在這里不贅述了，不了解的請(qǐng)查詢官網(wǎng)。

一切皆為模塊：SeaJS中的模塊概念有點(diǎn)類似于面向?qū)ο笾械念?-模塊可以擁有數(shù)據(jù)和方法，數(shù)據(jù)和方法可以定義為公共或私有，公共數(shù)據(jù)和方法可以供別的模塊調(diào)用。

每個(gè)模塊應(yīng)該都定義在一個(gè)多帶帶的js文件中，即一個(gè)對(duì)應(yīng)一個(gè)模塊。

SeaJS中使用define函數(shù)定義一個(gè)模塊。define可以接收三個(gè)參數(shù)：

/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
    //code of function…
}

define可以接收的參數(shù)分別是模塊ID，依賴模塊數(shù)組及工廠函數(shù)。

如果只有一個(gè)參數(shù)，則賦值給factory

如果有兩個(gè)參數(shù)，第二個(gè)賦值給factory，第一個(gè)如果是數(shù)組則賦值給deps，否則賦值給id

如果有三個(gè)參數(shù)，則分別賦值

但是，包括SeaJS官網(wǎng)示例在內(nèi)幾乎所有用到define的地方都只傳遞一個(gè)工廠函數(shù)進(jìn)去，類似于如下代碼：

define(function(require,exports,module){
    //code of the module
})

個(gè)人建議遵循SeaJS官方示例的標(biāo)準(zhǔn)，用一個(gè)參數(shù)的define定義模塊。那么id和deps會(huì)怎么處理呢？

??id是一個(gè)模塊的標(biāo)識(shí)字符串，define只有一個(gè)參數(shù)時(shí)，id會(huì)被默認(rèn)賦值為此js文件的絕對(duì)路徑。如example.com下的a.js文件中使用define定義模塊，則這個(gè)模塊的ID會(huì)賦值為 http://example.com/a.js ，沒(méi)有特別的必要建議不要傳入id。deps一般也不需要傳入，需要用到的模塊用require加載即可。

??工廠函數(shù)是模塊的主體和重點(diǎn)。它的三個(gè)參數(shù)分別是：

require：模塊加載函數(shù)，用于記載依賴模塊

exports：接口點(diǎn)，將數(shù)據(jù)或方法定義在其上則將其暴露給外部調(diào)用

module：模塊的元數(shù)據(jù)
這三個(gè)參數(shù)可以根據(jù)需要選擇是否需要顯示指定。

module是一個(gè)對(duì)象，存儲(chǔ)了模塊的元信息，具體如下：

module.id：模塊的ID

module.dependencies：一個(gè)數(shù)組，存儲(chǔ)了此模塊依賴的所有模塊的ID列表。

module.exports：與exports指向同一個(gè)對(duì)象

第一種是基于exports的模式：

define(function(require,exports,module){
    var a=require("a");
    var b=require("b"); //引入模塊
    
    var data1=1; //私有數(shù)據(jù)
    
    var fun1=function(){//私有方法
        return a.run(data1);
    }
    
    exports.data2=2; //公有數(shù)據(jù)
    
    exports.fun2=function(){
        return "hello";
    }
    
})

上面是一種比較“正宗”的模塊定義模式。除了講公共數(shù)據(jù)和方法附加在exports上，也可以直接返回一個(gè)對(duì)象表示模塊，如下面的代碼與上面的代碼功能相同：

define(function(require){
    var a=require("a");
    var b=require("b"); //引入模塊
    
    var data1=1;
    
    var fun1=function(){
        return a.run(data1);
    }
    
    return{
        data2:2,
        fun2:function(){
            return "hello";
        }
    }
})

如果模塊定義沒(méi)有其他代碼，只返回一個(gè)對(duì)象，還可以有如下簡(jiǎn)化寫(xiě)法：

define({
    data2:2,
        fun2:function(){
            return "hello";
        }
    })

第三種寫(xiě)法對(duì)于定義純JSON數(shù)據(jù)的模塊非常合適。

根據(jù)應(yīng)用場(chǎng)景的不同，SeaJS提供了三個(gè)載入模塊的API，分別是：seajs.use,require和require.async。

seajs.use主要用于載入入口模塊。入口模塊相當(dāng)于C語(yǔ)言的main函數(shù)，同時(shí)也是整個(gè)模塊依賴樹(shù)的根。seajs.use
的用法如下：

//第一模式
seajs.use("./a");
//回調(diào)模式
seajs.use("./a",function(a){
    a.run();
})
//多模塊模式
seajs.use(["./a","./b"],function(a,b){
    a.run();
    b.run();
})

其中多模塊的用法和KISSY中的模塊加載方法類似，不虧是一個(gè)人寫(xiě)的??！
一般seajs.use只用在頁(yè)面載入入口模塊，SeaJS會(huì)順著入口模塊解析所有依賴模塊并將它們加載。如果入口模塊只有一個(gè)，也可以通過(guò)給引入seajs的script標(biāo)簽加入“data-main”屬性來(lái)省略seajs.use，例如一下寫(xiě)法：

require是seajs主要的模塊加載方法，當(dāng)在一個(gè)模塊中需要用到其他模塊時(shí)一般用require加載：

var m=require("./a");

上文說(shuō)過(guò)seajs會(huì)在html頁(yè)面打開(kāi)時(shí)通過(guò)靜態(tài)分析一次性記載所有需要的js文件，如果想要某個(gè)js文件在用時(shí)才加載，可以使用require.async。
這樣只有在用到這個(gè)模塊時(shí)，對(duì)應(yīng)的js文件才會(huì)被下載，也就實(shí)現(xiàn)了JavaScript代碼的按需加載。

seajs提供了一個(gè)seaj.configd的方法可以設(shè)置全局配置，接收一個(gè)表示全局配置的配置對(duì)象，具體方法如下：

seajs.config({
base:"path",
alias:{
    "app":"path/app/"
},
charset:"utf-8",
timeout:20000,
debug:false
})

其中，

base表示基址路徑

alias可以對(duì)較長(zhǎng)的常用路徑設(shè)置縮寫(xiě)

charset表示下載js時(shí)script標(biāo)簽的charset屬性。

timeout表示下載文件的最大時(shí)長(zhǎng)，以毫秒為單位。

要將現(xiàn)有的JS庫(kù)與seajs一起使用，只需根據(jù)seajs的模塊定義規(guī)則對(duì)現(xiàn)有庫(kù)進(jìn)行一個(gè)封裝。例如，下面是對(duì)jQuery的封裝方法：

    define(function(){
    /*
    此處為jquery源碼
    */

    })

一個(gè)完整的例子：
上文說(shuō)了那么多，知識(shí)點(diǎn)比較分散，所以最后我打算用一個(gè)完整的SeaJS例子把這些知識(shí)點(diǎn)串起來(lái)，方便朋友們歸納回顧。這個(gè)例子包含如下文件：

index.html 主頁(yè)面

sea.js

jquery.js

init.js init模塊，入口模塊，依賴data、jquery、style三個(gè)模塊，又主頁(yè)面載入

data.js data模塊，純json數(shù)據(jù)模塊

style.css css樣式表

html：

    
    



    


    
Blog

javascript:

//init.js
define(function(require, exports, module) {
    var $ = require("./jquery");
    var data = require("./data");
    var css = require("./style.css");
 
    $(".author").html(data.author);
    $(".blog").attr("href", data.blog);
});
 
//data.js
define({
    author: "ZhangYang",
    blog: "http://blog.codinglabs.org"
});

css:

.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}

請(qǐng)注意：
1.請(qǐng)講jquery.js源碼文件包含在seajs模塊加載代碼中；

2.在Sea.js < 2.3.0版本之前是可以加載css文件的，新版本中此功能移除，為了兼容考慮，加載css功能將作為一個(gè)插件存在。

使用方法

可以在sea.js標(biāo)簽后引入這個(gè)插件使用

也可以將插件代碼混入sea.js當(dāng)中

和seajs-style的區(qū)別

seajs-css是使 Sea.js 能夠加載一個(gè)css文件，和link標(biāo)簽一樣

seajs-style是指提供一個(gè)seajs.importStyle方法用于加載一段 css 字符串