seaJs使用心得之exports與module.exports的區(qū)別實(shí)例分析
本文實(shí)例講述了seaJs使用心得之exports與module.exports的區(qū)別。分享給大家供大家參考，具體如下：
1. exports 是 module.exports 的 輔助對(duì)象，exports對(duì)外提供api 時(shí)需要用return 返回exports 對(duì)象
2. module.exports 也可直接向外提供api
參考 ： https://github.com/seajs/seajs/issues/242
exports Object
exports 是一個(gè)對(duì)象，用來(lái)向外提供模塊接口。
define(function(require, exports) {
// 對(duì)外提供 foo 屬性
exports.foo = 'bar';
// 對(duì)外提供 doSomething 方法
exports.doSomething = function() {};
});
除了給 exports 對(duì)象增加成員，還可以使用 return 直接向外提供接口。
define(function(require) {
// 通過(guò) return 直接提供接口
return {
foo: 'bar',
doSomething: function() {}
};
});
如果 return 語(yǔ)句是模塊中的唯一代碼，還可簡(jiǎn)化為：
define({
foo: 'bar',
doSomething: function() {}
});
上面這種格式特別適合定義 JSONP 模塊。
特別注意：下面這種寫(xiě)法是錯(cuò)誤的！
define(function(require, exports) {
// 錯(cuò)誤用法！！!
exports = {
foo: 'bar',
doSomething: function() {}
};
});
正確的寫(xiě)法是用 return 或者給 module.exports 賦值：
define(function(require, exports, module) {
// 正確寫(xiě)法
module.exports = {
foo: 'bar',
doSomething: function() {}
};
});
提示：exports 僅僅是 module.exports 的一個(gè)引用。在 factory 內(nèi)部給 exports 重新賦值時(shí)，并不會(huì)改變 module.exports 的值。因此給 exports 賦值是無(wú)效的，不能用來(lái)更改模塊接口。
module.exports Object
當(dāng)前模塊對(duì)外提供的接口。
傳給 factory 構(gòu)造方法的 exports 參數(shù)是 module.exports 對(duì)象的一個(gè)引用。只通過(guò) exports 參數(shù)來(lái)提供接口，有時(shí)無(wú)法滿(mǎn)足開(kāi)發(fā)者的所有需求。 比如當(dāng)模塊的接口是某個(gè)類(lèi)的實(shí)例時(shí)，需要通過(guò) module.exports來(lái)實(shí)現(xiàn)：
define(function(require, exports, module) {
// exports 是 module.exports 的一個(gè)引用
console.log(module.exports === exports); // true
// 重新給 module.exports 賦值
module.exports = new SomeClass();
// exports 不再等于 module.exports
console.log(module.exports === exports); // false
});
注意：對(duì) module.exports 的賦值需要同步執(zhí)行，不能放在回調(diào)函數(shù)里。下面這樣是不行的：
// x.jsdefine(function(require, exports, module) {
// 錯(cuò)誤用法
setTimeout(function() {
module.exports = { a: "hello" };
}, 0);
});
在 y.js 里有調(diào)用到上面的 x.js:
// y.jsdefine(function(require, exports, module) {
var x = require('./x');
// 無(wú)法立刻得到模塊 x 的屬性 a
console.log(x.a); // undefined
});
希望本文所述對(duì)大家sea.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
seajs模塊之間依賴(lài)的加載以及模塊的執(zhí)行
做前端項(xiàng)目已經(jīng)離不開(kāi)SeaJS了，現(xiàn)在的很多的網(wǎng)站都用了SeaJS，對(duì)這個(gè)JS模塊加載器原理的越來(lái)越感興趣。這篇文章我們來(lái)一起學(xué)習(xí)seajs模塊之間依賴(lài)的加載以及模塊的執(zhí)行，感興趣的朋友們下面來(lái)一起看看吧。2016-10-10
Seajs是一個(gè)Web模塊加載框架，追求簡(jiǎn)單、自然的代碼書(shū)寫(xiě)和組織方式，Sea.js 遵循 CMD 規(guī)范，模塊化JS代碼。依賴(lài)的自動(dòng)加載、配置的簡(jiǎn)潔清晰，可以讓程序員更多地專(zhuān)注編碼。這篇文章為seajs深入學(xué)習(xí)的第一篇，主要介紹的基礎(chǔ)性的內(nèi)容，感興趣的朋友們可以參考學(xué)習(xí)。2016-10-10
這篇文章主要介紹了seajs中最常用的7個(gè)功能、配置,結(jié)合實(shí)例形式簡(jiǎn)單分析了seajs中常用的項(xiàng)目配置、模塊加載、定義、獲取等操作技巧,需要的朋友可以參考下2017-10-10
近幾年前端工程化越來(lái)越完善，打包工具也已經(jīng)是前端標(biāo)配了，像seajs這種老古董早已停止維護(hù)，這是一篇細(xì)細(xì)品味Seajs源碼的文章,看完一定受益匪淺2019-04-04
這篇文章主要介紹了SeaJS入門(mén)教程系列之完整示例,演示了一個(gè)完整的SeaJS開(kāi)發(fā)例子,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了seajs中模塊依賴(lài)的加載處理,結(jié)合實(shí)例形式分析了seajs模塊依賴(lài)與加載的原理、相關(guān)注意事項(xiàng)與使用方法,需要的朋友可以參考下2017-10-10
seajs中模塊的解析規(guī)則詳解和模塊使用總結(jié)
這篇文章主要介紹了seajs中模塊的解析規(guī)則詳解和模塊使用總結(jié),需要的朋友可以參考下2014-03-03
這篇文章主要介紹了SeaJS入門(mén)教程,講述了SeaJS的由來(lái),JavaScript傳統(tǒng)開(kāi)發(fā)模式和模塊化開(kāi)發(fā)的對(duì)比,需要的朋友可以參考下2014-03-03
seajs學(xué)習(xí)之模塊的依賴(lài)加載及模塊API的導(dǎo)出
SeaJS是一個(gè)遵循 CommonJS 規(guī)范的模塊加載框架，可用來(lái)輕松愉悅地加載任意JavaScript模塊和css模塊樣式。SeaJS接口和方法也非常少，SeaJS 就兩個(gè)核心：模塊定義和模塊的加載及依賴(lài)關(guān)系。本文將詳細(xì)介紹模塊的依賴(lài)加載及模塊API的導(dǎo)出，有需要的朋友們可以參考借鑒。2016-10-10
Seajs是什么及sea.js 由來(lái)，特點(diǎn)以及優(yōu)勢(shì)
這篇文章主要介紹了Seajs的相關(guān)知識(shí)和和學(xué)習(xí)心得,適合剛接觸SeaJS的同學(xué),需要的朋友可以參考下，有更好的新手教程或文檔，歡迎推薦、分享2016-10-10