什么是模塊?
我們先簡單描述下模塊的特點,模塊是一個獨立的完成某些功能的單位,它應該具有抽象性、封裝性(接口),例如u盤就是一個模塊,為什么這么所呢,
1.獨立性:我們將文件存入u盤,它是可以獨立完成文件的存儲功能。
2.抽象性:u盤就是將便攜式文件存儲的這項常用、公用的功能提取出來的產物。
3.封裝性:u盤里面有哪些零件,往往從它外面是看不見的,這里這么說會有些歧義,嚴謹點說就是u盤里面的那些我們不需要關心的零件,u盤都包裝了起來,對外只會留給我們一個使用的usb接口(接口在封裝性中非常重要)
js模塊
js的模塊化的發展是一個演進的過程,目的是為了解決命名沖突、文件依賴等問題,一些原始的寫法、模塊化的工具sea.js、requireJs、再到webpack等工具這些模塊化的知識大家可以參考其他資料,這里筆者不贅述,只說關鍵的、跟要說的node.js模塊相關的,先來看代碼
var foo=(function(){
var bar=123;
var add=function(v1,v2){
return v1+v2;
}
return {
add:add
}
)()
上面的代碼就是js的一個模塊,獨立完成某些功能和抽象,這里不用說了,就是一個簡單add方法,我們重點說下封裝,這里使用return的方式對外開放接口, 而在函數里面的其他代碼例如bar,就屬于被函數封裝了。那么為什么要說這一段js代碼,其實不管AMD、CMD、commonJs規范或者es6的模塊,它們的實現的核心就是函數自調用的這種封裝。
node.js模塊
首先說node.js模塊是采用CommonJS模塊規范,那么和上面js模塊有什么樣的關系,先不用著急,我們先看下下面這個圖:
這是在Chrome控制臺上定義一個foo,window對象就會多一個屬性foo,我們在頁面上加載的js代碼都有這樣的特點,因為window是全局對象。
對比一下node.js的代碼,node.js也有一個全局對象global,會不會和window一樣呢,我們看下下面的代碼:
foo = 123;
var bar = 456;
console.log('foo--->',global.foo);
console.log('bar--->',global.bar);
輸出結果:
在一個js里面去定義全局變量foo,foo會變成global的屬性,而bar沒有,bar變成這個js私有的了,就如同下面這張圖:
在node.js里面,我們把一個js就看成是一個模塊,它具有封裝性,在這個模塊里面的代碼(全局變量除外)都是私有的,如果想要被外部調用,那就需要exports與module.exports曝露出去,并且用require去接收。
module.exports與exports
一個node.js模塊中也就是一個js中(下面我們都用一個模塊代替一個js),module.exports用法如下
//用法1
//直接賦值,可以賦數字、字符串、數組、對象、函數
//注意:一個模塊中module.exports只能賦值一次
module.exports=123;
//用法2
//屬性賦值,可以多次賦值,賦數字、字符串、數組等都可以
module.exports.foo=123;
module.exports.bar=456;
exports的用法如下
//用法
//exports只能通過屬性的方式曝露,曝露數字、字符串、數組等都可以
exports.foo=123;
require
有了代碼的曝露,那么也就有代碼的引入,require就是用來加載模塊的,這里我們先不談模塊化系統,只說加載一個簡單模塊,module.exports與require如下
//1.js
module.exports=‘囧’
//2.js
var foo=require(‘./1’);
console.log(foo); //輸出囧
exports與require如下
//3.js
exports.bar=‘囧’
//4.js
var foo=require(‘./1’);
console.log(foo.bar); //輸出囧
通過require得到的就是module.exports,永遠是module.exports,那exports呢?module.exports與exports的區別是什么呢?,exports是module.exports的別名,可以理解為 var exports=module.exports,所以exports只能用于屬性的賦值,應用場景也是不同的,如果我只想從一個模塊中曝露出一個字符串或者一個數字,那要用module.exports,如果用exports則會向上面的4.js那樣需要通過屬性的形式取,顯的很繁瑣,如果是用來曝露多個屬性,雖然module.exports可以用屬性曝露,最好還是用exports,因為寫起來簡單...對就是這個原因----簡單,如下
//5.js
module.exports.foo=123;
module.exports.bar=123;
//6.js
exports.foo=123;
exports.bar=123;
兩種寫法都可以,所以一次性曝露用module.exports,如果是曝露多個屬性、方法、字符串等用exports比較簡單。
模擬require
上面我們還遺留了兩個問題,1. var bar = 456;這個bar是怎么在一個模塊中變成私有的?2.為什么exports是module.exports的別名?
那么下面我們簡單模擬下require方法,如下
var fs = require('fs');
//模擬require方法
var myRequire = function (path) {
var Module = function () {
this.exports = {}
}
var code = fs.readFileSync(path);
//包裝代碼
var packageCode = `(function(exports ,module) {${code} return module.exports})`;
console.log(packageCode);
//獲取要執行的方法
var result = eval(packageCode);
console.log(result);
var module=new Module();
//將module.exports當實參傳給exports
return result(module.exports,module);
}
//調用
var foo = myRequire('./foo.js');
console.log(foo);
首先我們用fs模塊將要引入的foo.js的代碼讀出來,然后包裝成下面的代碼
(function(exports ,module) {
//foo.js里面的代碼
return module.exports})
現在我們就清楚了為什么一個js里面的代碼是具有封裝性的了,用的是js模塊那提到過的函數函數自調用的方式封裝的。
return result(module.exports,module);
注意我們去調用result這個方法,result指向的就是(function(exports ,module) {//foo.js里面的代碼 return module.exports})這個方法,那么這個方法的形參就是exports、module,實參是module.exports、module,也就是說我們在代碼里面使用的exports,其實是指向的module.exports。
var Module = function () {
this.exports = {}
}
var module=new Module();
這里我們看到一個module對象,這個對象是用來存儲每一個模塊的信息,我們可以在模塊的代碼里面打印下module看一下
console.log(module);
如上圖,module里面的exports默認是一個空對象,和我們模擬的寫法一致,這也就是我們可以直接是引用module.exports.屬性曝露接口的原因,parent、children是用來存被引用和引用的模塊的,paths這是npm查找模塊的路徑,每一個被node加載的模塊都有唯一的一個module存儲著這個模塊的信息,也說明module是動態產生的。筆者在這里只談基礎的模塊,至于模塊化系統,請參考其他文章。