CommonJS的導(dǎo)入
const sum = require('./add.js')
console.log(sum(2,3)) // 5
如果一個模塊是第一次被加載茫藏,那么會執(zhí)行該模塊并導(dǎo)出內(nèi)容
如果該模塊被執(zhí)行過稽寒,那么這個模塊的代碼不會再被執(zhí)行匿级,而是直接導(dǎo)出上次執(zhí)行的結(jié)果
CommonJS的導(dǎo)出
在CommonJs中每個文件都是一個模塊幸冻,模塊的作用域是屬于自身的空镜,而一個模塊向外暴露的唯一方式是導(dǎo)出浩淘,在CommonJs中導(dǎo)出的是module.exports對象
下面兩種寫法實(shí)質(zhì)上是一樣的
module.exports = {
name: 'haha',
add: function(a, b) {
return a + b;
}
};
等同于
exports.name = 'haha';
exports.add = function(a, b) {
return a + b;
};
其內(nèi)在機(jī)制是將exports指向了module.exports捌朴,而module.exports在初始化時是一個空對象。我們可以簡單地理解為张抄,CommonJS在每個模塊的首部默認(rèn)添加了以下代碼:
var module = {
exports: {},
};
var exports = module.exports;
那么上面的2個代碼就可以看成:
var module = {
exports: {},
};
var exports = module.exports;
// 上面的代碼可以看成是CommonJS在每個模塊的首部默認(rèn)添加的
module.exports = {
name: 'haha',
add: function(a, b) {
return a + b;
}
};
var module = {
exports: {},
};
var exports = module.exports;
// 上面的代碼可以看成是CommonJS在每個模塊的首部默認(rèn)添加的
exports.name = 'haha';
exports.add = function(a, b) {
return a + b;
};
因此砂蔽,為exports.add賦值相當(dāng)于在module.exports對象上添加了一個add屬性
因此,為exports.name賦值相當(dāng)于在module.exports對象上添加了一個name屬性
注意一:不要直接給exports賦值署惯,否則會導(dǎo)致其失效左驾。 如:
exports = {
name: 'haha'
};
上面代碼中,由于對exports進(jìn)行了賦值操作极谊,使其指向了新的對象{name: 'calculater'}诡右,module.exports卻仍然是原來的空對象,因此name屬性并不會被導(dǎo)出轻猖。
注意二:不要把module.exports與exports混用帆吻。
exports.add = function(a, b) {
return a + b;
};
module.exports = {
name: 'haha'
};
上面的代碼先通過exports導(dǎo)出了add屬性
相當(dāng)于module.exports = { add: function(){...}}
然后將module.exports重新賦值為另外一個對象
這會導(dǎo)致原本擁有add屬性的對象丟失了,最后導(dǎo)出的只有name咙边。
注意點(diǎn)三:導(dǎo)出語句盡量放在文件的末尾
module.exports = {
name: 'haha'
};
console.log('nihao');
module.exports或exports后面的代碼依舊會照常執(zhí)行
比如上面的console會在控制臺上打出“nihao”
但在實(shí)際使用中猜煮,為了提高可讀性,不建議采取上面的寫法样眠,而是應(yīng)該將module.exports及exports語句放在模塊的末尾
ES6 Module
es6也是將每一個文件當(dāng)做模塊友瘤,每個模塊擁有自身的作用域
導(dǎo)入導(dǎo)出語句是import export,會自動開啟use strict控制嚴(yán)格模式
ES6 Module的導(dǎo)入
//命名式 需要有大括號
import { add } from './add.js'
// 默認(rèn)導(dǎo)入 等同于 import { default as myAdd } from './add.js'
import myAdd from './add.js'
//混合導(dǎo)入(add是export default導(dǎo)出的檐束,name是export導(dǎo)出的)
//這里的add必須寫在大括號前面辫秧,而不能順序顛倒,否則會提示語法錯誤被丧。
import add, {name} from './add.js'
//全部導(dǎo)入
import * as add from './add.js'
ES6 Module的導(dǎo)出
//寫法1
const add = function(a,b) {return a+b}
export { add }
//寫法2
export { add: function (a,b) {return a+b} }
//默認(rèn)導(dǎo)出1
export default function(a,b) {return a+b}
//默認(rèn)導(dǎo)出2
export default {
name: 'haha',
add: function(a, b) {
return a + b;
}
};
//默認(rèn)導(dǎo)出3
export default 'This is haha.js';
// 默認(rèn)導(dǎo)出4
export default class {...}