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

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

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

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

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

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

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

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

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

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

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

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

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

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

require, exports, module

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

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

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

}

使用require對象來進行加載模塊，其實使用正則表達式進行驗證加載的，所以其參數(shù)必須是特定的字符串，不能是表達式。

seajs會自動在require的參數(shù)中加入".js"來進行加載，即不需要寫上后綴名，但是在某些情況下，seajs不會為其添加“.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來向外部暴露方法，或者屬性。暴露屬性有幾種方式，如上面中的例子是一種方式，另外還有：

使用return：

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

直接返回json對象：

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

頁面中調(diào)用seajs

前面說了seajs用來解決模塊開發(fā)，和繁瑣的文件依賴問題，所以所有的文件依賴都是通過require對象進行加載，或者可以使用require.async（“./a”）來進行異步加載，即當使用到的時候才進行加載，

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

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

有了這個加載依賴的方式，我們無需再頁面上書寫大量的<script ></script>標簽，而僅僅使用一個

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

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

使用seajs.config進行全局配置：

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

這是對seajs進行全局配置，

base表示基址尋址時的基址路徑

alias可以對較長的常用路徑設(shè)置縮寫。

charset表示下載js時script標簽的charset屬性。

timeout表示下載文件的最大時長，以毫秒為單位。

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

使用seajs.use 載入入口模塊，相當于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例子中的頁面怎么寫的，基本上就明白了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();
});

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論