seajs實(shí)現(xiàn)了JavaScript 的 模塊開(kāi)發(fā)及按模塊加載。用來(lái)解決繁瑣的js命名沖突，文件依賴等問(wèn)題，其主要目的是令JavaScript開(kāi)發(fā)模塊化并可以輕松愉悅進(jìn)行加載。

首先看看seajs是怎么進(jìn)行模塊開(kāi)發(fā)的。使用seajs基本上只有一個(gè)函數(shù)“define”

fn.define
= function(id,
deps, factory) {
//code of function…
}

使用define函數(shù)來(lái)進(jìn)行定義一個(gè)模塊，根據(jù) CMD （Common Module Definition）模塊定義規(guī)范。一個(gè)文件就是一個(gè)模塊。所以一個(gè)js文件中只有一個(gè)define，即一個(gè)文件是一個(gè)模塊，SeaJS中模塊的概念有點(diǎn)類似于面向?qū)ο笾械念悺K可以擁有數(shù)據(jù)和方法，數(shù)據(jù)和方法可以定義為公共或私有，公共數(shù)據(jù)和方法可以供別的模塊調(diào)用。

官方實(shí)例中，define只傳入一個(gè)參數(shù)： 一個(gè)工廠函數(shù)

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

在看參數(shù)之前，我們先看看define是如何處理參數(shù)的:

fn.define = function(id, deps, factory)

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

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

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

如果有三個(gè)參數(shù)，則分別賦值給id，deps和factory。

根據(jù)官方實(shí)例，建議還是根據(jù)官方的來(lái)就傳遞一個(gè)參數(shù)，即只有factory參數(shù)，這樣的話模塊id默認(rèn)為js文件路徑。

在來(lái)看看工廠函數(shù)的參數(shù)：

require, exports, module

• require——模塊加載函數(shù)，用于記載依賴模塊。通過(guò)這個(gè)參數(shù)來(lái)進(jìn)行對(duì)其他模塊的加載。
• exports——接口點(diǎn)，將數(shù)據(jù)或方法定義在其上則將其暴露給外部調(diào)用。通過(guò)這個(gè)參數(shù)，來(lái)將這個(gè)模塊的方法進(jìn)行暴露
• module——模塊的元數(shù)據(jù)。其是一個(gè)對(duì)象，有屬性：
  • module.id——模塊的ID。
  • module.dependencies——一個(gè)數(shù)組，存儲(chǔ)了此模塊依賴的所有模塊的ID列表。
  • module.exports——與exports指向同一個(gè)對(duì)象。

使用factory的參數(shù)的使用：

define(function(require,
exports, module) {
var a = require('./a');//引入a模塊 
exports.fun2= function(){
alert("fun2");
a.dosomething();
　　} 

}

使用require對(duì)象來(lái)進(jìn)行加載模塊，其實(shí)使用正則表達(dá)式進(jìn)行驗(yàn)證加載的，所以其參數(shù)必須是特定的字符串，不能是表達(dá)式。

seajs會(huì)自動(dòng)在require的參數(shù)中加入".js"來(lái)進(jìn)行加載，即不需要寫(xiě)上后綴名，但是在某些情況下，seajs不會(huì)為其添加“.js”:

1.載入css：　　　　

require("./module1-style.css");

2.路徑中含有“？”：　

require(<a href="http://example/js/a.json?b=func" rel="external nofollow" >http://example/js/a.json?cb=func</a>);

3.路徑以“#”結(jié)尾：

require(http://example/js/a.json#);

使用exports來(lái)向外部暴露方法，或者屬性。暴露屬性有幾種方式，如上面中的例子是一種方式，另外還有：

使用return：

define(function(require)
{
var data1 = 1; //私有數(shù)據(jù)
var func1 = function() { //私有方法
returna.run(data1);
}
//暴露
return{
data2: 2,
func2:function() {
return'hello';
}
}; 
});

直接返回json對(duì)象：

define({
data: 1,
func:function() {
return'hello';
}
});

頁(yè)面中調(diào)用seajs

前面說(shuō)了seajs用來(lái)解決模塊開(kāi)發(fā)，和繁瑣的文件依賴問(wèn)題，所以所有的文件依賴都是通過(guò)require對(duì)象進(jìn)行加載，或者可以使用require.async（“./a”）來(lái)進(jìn)行異步加載，即當(dāng)使用到的時(shí)候才進(jìn)行加載，

注：無(wú)論是require（）還是require.async（）都可以有第二個(gè)參數(shù)為回調(diào)函數(shù)，當(dāng)文件加載成功時(shí)調(diào)用：

require.async('/path/to/module/file',function(m) {
//code of callback...
});

有了這個(gè)加載依賴的方式，我們無(wú)需再頁(yè)面上書(shū)寫(xiě)大量的<script ></script>標(biāo)簽，而僅僅使用一個(gè)

<script src="./sea.js" data-main="./init"></script>

即可，其中data-main="./init" 為入口模塊，表示加載這個(gè)模塊，在進(jìn)行迭代加載其所依賴的模塊，使用這個(gè)屬性可以省略seajs.use。這個(gè)后面說(shuō)。

使用seajs.config進(jìn)行全局配置：

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

這是對(duì)seajs進(jìn)行全局配置，

base表示基址尋址時(shí)的基址路徑

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

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

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

debug表示是否工作在調(diào)試模式下。

使用seajs.use 載入入口模塊，相當(dāng)于java的main函數(shù)，

//單模塊模式
seajs.use('./a');
//回調(diào)模式
seajs.use('./a',function(a)
{
a.dosomething();
});
//多模塊模式
seajs.use(['./a','./b'],function(a,
b) {
a.dosomething();
b.dosomething();
});

下面可以看其官方給的simple例子中的頁(yè)面怎么寫(xiě)的，基本上就明白了sea.js 是怎么用的了：

<script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script>
<script>
// Set configuration
seajs.config({
base: "../sea-modules/",
alias: {
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});
// For development
if (location.href.indexOf("?dev") > 0) {
seajs.use("../static/hello/src/main");
}
// For production
else {
seajs.use("examples/hello/1.0.0/main");
}
</script>

//mian.js

//hello/mian.js
define(function(require) {
var Spinning = require('./spinning');
var s = new Spinning('#container');
s.render();
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論