使用seajs怎么開發一個JavaScript模塊

使用seajs怎么開發一個JavaScript模塊？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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

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

使用define函數來進行定義一個模塊，根據 CMD （Common Module Definition）模塊定義規范。一個文件就是一個模塊。所以一個js文件中只有一個define，即一個文件是一個模塊，SeaJS中模塊的概念有點類似于面向對象中的類——模塊可以擁有數據和方法，數據和方法可以定義為公共或私有，公共數據和方法可以供別的模塊調用。

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

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

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

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

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

如果只有一個參數，則賦值給factory。

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

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

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

在來看看工廠函數的參數：

require, exports, module

• require——模塊加載函數，用于記載依賴模塊。通過這個參數來進行對其他模塊的加載。

• exports——接口點，將數據或方法定義在其上則將其暴露給外部調用。通過這個參數，來將這個模塊的方法進行暴露

• module——模塊的元數據。其是一個對象，有屬性：

• module.id——模塊的ID。

• module.dependencies——一個數組，存儲了此模塊依賴的所有模塊的ID列表。

• module.exports——與exports指向同一個對象。

使用factory的參數的使用：

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

}

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

seajs會自動在require的參數中加入".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.路徑以“#”結尾：

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

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

使用return：

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

直接返回json對象：

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

頁面中調用seajs

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

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

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可以對較長的常用路徑設置縮寫。

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

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

debug表示是否工作在調試模式下。

使用seajs.use 載入入口模塊，相當于java的main函數，

//單模塊模式
seajs.use('./a');
//回調模式
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();
});

關于使用seajs怎么開發一個JavaScript模塊問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。