首頁 >web前端 >js教程 >Sea.JS知識總結_javascript技巧

Sea.JS知識總結_javascript技巧

WBOY
WBOY原創
2016-05-16 15:01:531262瀏覽

SeaJS是遵循CommonJS規格的JavaScript模組載入框架。是一款現代化的用於Web開發的模組載入工具,提供簡單、極致的模組化體驗。 Sea.js 由阿里、騰訊等公司共同維護。

使用 Sea.js的好處:

Sea.js 追求簡單、自然的程式碼書寫和組織方式,具有以下核心特性:

簡單友善的模組定義規範:Sea.js 遵循 CMD 規範,可以像 Node.js 一般書寫模組程式碼。
自然直覺的程式碼組織方式:依賴的自動載入、配置的簡潔清晰,可以讓我們更享受編碼的樂趣。
Sea.js 還提供常用插件,非常有助於開發調試和性能優化,並具有豐富的可擴展介面。

下面要跟大家介紹sea.js的三種寫模組的模式

使用exports,exports 是一個對象,用來向外提供模組介面。

define(function (require, exports, module) {
var a = require("./init");
var fun1 = function () {
return a.write("模块main调用模块init的write方法");
};
exports.fun1=fun1;
}); 

除了增加 exports 物件成員,還可以使用 return 直接向外提供介面。

define(function(require,exports,module){
var a = require("./init");
var fun1 = function () {
return a.write("模块main调用模块init的write方法");
};
return{
fun1:fun1
}
})

如果模組沒有任何業務邏輯只是傳回一個物件還可以簡化為以下

define({
fun1 : function () {
alert("模块main的fun1调用成功")
}
});

還有一種是透過module.exports對外提供一個統一的介面例如:

define(function(require,exports,module){
var a = require("./init");// ./是当前目录 ../是上级目录 /是根目录
var fun1 = function () {
return a.write("模块main调用模块init的write方法");
};
exports.b=function(){ //没有任何意义,赋值无效
alert("bb")
};
module.exports={
fun1:fun1
}
});

exports 只是 module.exports 的一個引用。在 方法內部為 exports 重新賦值時,並不會改變 module.exports 的值。因此給 exports 賦值是無效的,以上的方法只暴漏給外部一個fun1,而上面的b方法賦值是無效的,不能用來更改模組介面。

exports.async()
require.async(id||[], callback?)

require.async 方法用來在模組內部非同步載入模組,並在載入完成後執行指定回呼。 callback 參數可選。

define(function(require,exports,module){
require.async('./init',function(a){
a.write("模块main调用模块init的write方法")
});
require.async(['./init',"./search"],function(a,b){
a.write("模块main调用模块init的write方法");
b.search("search模块成功引入")
});
});

module module是一個對象,上面儲存了與當前模組相關聯的一些屬性和方法。

1 module.id String

模組的唯一識別。

2 module.uri String

根據模組系統的路徑解析規則得到的模組絕對路徑,一般情況下(沒有在 define 中手寫 id 參數時),module.id 的值就是 module.uri,兩者完全相同。

3 module.dependencies Array

dependencies 是一個數組,表示當前模組的依賴。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn