module
每個文件就是一個模塊。文件內定義的變量、函數等等都是在自己的作用域內,都是自身所私有的,對其它文件不可見。
每個文件內部都有一個module對象,它包含以下屬性
id: 模塊的識別符,通常是帶有絕對路徑的模塊文件名filename:模塊的文件名,帶有絕對路徑loaded:返回一個布爾值,表示模塊是否已經完成加載parent:返回一個對象,表示調用該模塊的模塊children:返回一個數組,表示該模塊要用到的其他模塊exports:表示模塊對外輸出的值
module.exports
在module中有一個屬性exports,即:module.exports。它是該模塊對外的輸出值,是一個對象。其它模塊在加載該模塊時,實際上加載到的數據都是由它提供的。
module.exports輸出的可以是一個對象,也可以是一個函數。在引用該模塊的文件內,如果接受到的是對象,可以直接訪問其中的屬性,如果接受到的是一個函數,也可以直接執行。
exports
exports是一個特殊的存在,它是對module.exports的指向,可以通過向exports對象中添加變量、方法等,但是不能直接將exports指向一個值,這樣會切斷exports和module.exports之間的聯系。
export和module.exports的使用有一點需要注意,如果導出的是一個函數,只能使用module.exports。
export
export用於規定模塊的對外接口,可以輸出變量、函數或類。export規定的對外接口必須與模塊內部的變量建立一一對應關系。
- 錯誤寫法
// 方式一
export 1; // 報錯
// 方式二
var a = 1;
export a; // 報錯
// 方式三
function fn() {}
export fn; // 報錯
- 正確寫法
// 方式一
export var a = 1;
// 方式二
var a = 1;
export {a};
// 方式三
var a = 1;
export {a as a1}; // 對a重命名輸出
// 方式四
export function fn() {};
// 方式五
function fn() {}
export {fn};
export default
export default和export的區別:
- 使用
export時,輸出的內容和接收時用的變量名稱必須一致,否則無法加載;使用export default,則為模塊指定默認輸出,同時,可以為接收到的變量指定其它名稱 - 使用
export輸出的變量或者函數,在import時,需要使用大括號;使用export default則不用
import
import和export配對使用,用於加載接收export輸入的內容
require
require用於加載模塊文件,默認加載的文件后綴名為.js
- 如果加載的文件路徑以
/開頭,則表示加載的是一個絕對路徑 - 如果加載的文件路徑以
./或../開頭,則表示加載的是一個相對當前位置的路徑 - 如果加載的文件路徑不以以上內容開頭,則加載的是一個核心模塊,默認會到
node_modules下尋找
小結
module、module.exports、exports采用的是CommonJS模塊規范。export和export default采用的是ES6模塊規范。
module.exports輸出的是值的拷貝;export是值的引用module.exports在運行時加載;export是在編譯時輸出
// addA.js
var a = 1;
function addA() {
a++;
}
module.exports = {
a: a,
addA: addA
};
// use addA
var addA = require('./addA.js');
console.log(addA.a); // 1
addA.addA();
console.log(addA.a); // 1
/************ 改善后 *********************/
// addA.js
var a = 1;
function addA() {
a++;
}
module.exports = {
get a() {
return a;
},
addA: addA
};
// addA.js
export.a = 1;
export.addA = function() {
a++;
}
// use addA
import {a, addA} from './addA';
console.log(a);// 1
addA();
console.log(a);// 2
