Sea.JS知識(shí)總結(jié)
SeaJS是一個(gè)遵循CommonJS規(guī)范的JavaScript模塊加載框架。是一款現(xiàn)代的用于Web開(kāi)發(fā)的模塊加載工具,提供簡(jiǎn)單、極致的模塊化體驗(yàn)。Sea.js 由阿里、騰訊等公司共同維護(hù)。
使用 Sea.js的好處:
Sea.js 追求簡(jiǎn)單、自然的代碼書(shū)寫(xiě)和組織方式,具有以下核心特性:
簡(jiǎn)單友好的模塊定義規(guī)范:Sea.js 遵循 CMD 規(guī)范,可以像 Node.js 一般書(shū)寫(xiě)模塊代碼。
自然直觀的代碼組織方式:依賴(lài)的自動(dòng)加載、配置的簡(jiǎn)潔清晰,可以讓我們更多地享受編碼的樂(lè)趣。
Sea.js 還提供常用插件,非常有助于開(kāi)發(fā)調(diào)試和性能優(yōu)化,并具有豐富的可擴(kuò)展接口。
下面給大家介紹sea.js的三種編寫(xiě)模塊的模式
使用exports,exports 是一個(gè)對(duì)象,用來(lái)向外提供模塊接口。
define(function (require, exports, module) { var a = require("./init"); var fun1 = function () { return a.write("模塊main調(diào)用模塊init的write方法"); }; exports.fun1=fun1; });
除了給 exports 對(duì)象增加成員,還可以使用 return 直接向外提供接口。
define(function(require,exports,module){ var a = require("./init"); var fun1 = function () { return a.write("模塊main調(diào)用模塊init的write方法"); }; return{ fun1:fun1 } })
如果模塊沒(méi)有任何業(yè)務(wù)邏輯只是返回一個(gè)對(duì)象還可以簡(jiǎn)化為以下
define({ fun1 : function () { alert("模塊main的fun1調(diào)用成功") } });
還有一種是通過(guò)module.exports對(duì)外提供一個(gè)統(tǒng)一的接口例如:
define(function(require,exports,module){ var a = require("./init");// ./是當(dāng)前目錄 ../是上級(jí)目錄 /是根目錄 var fun1 = function () { return a.write("模塊main調(diào)用模塊init的write方法"); }; exports.b=function(){ //沒(méi)有任何意義,賦值無(wú)效 alert("bb") }; module.exports={ fun1:fun1 } });
exports 僅僅是 module.exports 的一個(gè)引用。在 方法內(nèi)部給 exports 重新賦值時(shí),并不會(huì)改變 module.exports 的值。因此給 exports 賦值是無(wú)效的,以上的方法只暴漏給外部一個(gè)fun1,上面的b方法賦值是無(wú)效的,不能用來(lái)更改模塊接口。
exports.async()
require.async(id||[], callback?)
require.async 方法用來(lái)在模塊內(nèi)部異步加載模塊,并在加載完成后執(zhí)行指定回調(diào)。callback 參數(shù)可選。
define(function(require,exports,module){ require.async('./init',function(a){ a.write("模塊main調(diào)用模塊init的write方法") }); require.async(['./init',"./search"],function(a,b){ a.write("模塊main調(diào)用模塊init的write方法"); b.search("search模塊成功引入") }); });
module module是一個(gè)對(duì)象,上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法。
1 module.id String
模塊的唯一標(biāo)識(shí)。
2 module.uri String
根據(jù)模塊系統(tǒng)的路徑解析規(guī)則得到的模塊絕對(duì)路徑,一般情況下(沒(méi)有在 define 中手寫(xiě) id 參數(shù)時(shí)),module.id 的值就是 module.uri,兩者完全相同。
3 module.dependencies Array
dependencies 是一個(gè)數(shù)組,表示當(dāng)前模塊的依賴(lài)。
- Require.JS中的幾種define定義方式示例
- require.js與bootstrap結(jié)合實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面登錄和頁(yè)面跳轉(zhuǎn)功能
- require.js+vue開(kāi)發(fā)微信上傳圖片組件
- require.js配合插件text.js實(shí)現(xiàn)最簡(jiǎn)單的單頁(yè)應(yīng)用程序
- 第一次接觸JS require.js模塊化工具
- require.js的用法詳解
- 詳解Sea.js中Module.exports和exports的區(qū)別
- sea.js常用的api簡(jiǎn)易文檔
- Seajs是什么及sea.js 由來(lái),特點(diǎn)以及優(yōu)勢(shì)
- 詳解Require.js與Sea.js的區(qū)別
相關(guān)文章
JS+Canvas實(shí)現(xiàn)接球小游戲的示例代碼
本文主要為大家詳細(xì)介紹了如何利用JS+Canvas實(shí)現(xiàn)接球小游戲,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)有一定的幫助,感興趣的小伙伴可以了解一下2022-06-06javascript實(shí)現(xiàn)點(diǎn)擊產(chǎn)生隨機(jī)圖形
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊產(chǎn)生隨機(jī)圖形,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01JS實(shí)現(xiàn)AES加密并與PHP互通的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)AES加密并與PHP互通的方法,結(jié)合實(shí)例形式分析了javascript與php的加密、解密算法相關(guān)操作技巧,需要的朋友可以參考下2017-04-04localStorage實(shí)現(xiàn)便簽小程序
這篇文章主要為大家詳細(xì)介紹了localStorage實(shí)現(xiàn)便簽小程序的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11JavaScript中實(shí)現(xiàn)繼承的三種方式和實(shí)例
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)繼承的三種方式和實(shí)例,本文講解了類(lèi)式繼承、原型式繼承、使用擴(kuò)充方法實(shí)現(xiàn)多重繼承三種方式,需要的朋友可以參考下2015-01-01JS+CSS實(shí)現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼,涉及JavaScript結(jié)合css動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09JavaScript 高級(jí)篇之閉包、模擬類(lèi),繼承(五)
本篇主要分享我對(duì)閉包的理解及使用閉包完成私有屬性、模擬類(lèi)、繼承等,結(jié)合大量例子,希望大家能快速掌握!首先讓我們先從一些基本的術(shù)語(yǔ)開(kāi)始吧2012-04-04