目錄
導(dǎo)出簡介（里面有小細(xì)節(jié)請(qǐng)仔細(xì)閱讀）
?module.exports與exports
1.該js文件要導(dǎo)出的值即為test
?2.該js文件要導(dǎo)出的值即為test1和test2
3. 注意這里我是先給module.exports.test2賦值，然后給module.exports賦值，因此{(lán)test1}覆蓋了原來的test2，因此module.exports中只有test1
?4. 該js文件要導(dǎo)出的值即為test2
5. 注意這里(注意點(diǎn))，module.exports ={test1};改變了module.exports指向的引用,exports還指向之前的module.exports引用，因此無論exports.test2 = test2;在哪里執(zhí)行都不能改變?cè)搄s文件索要暴露的值。所以如果要改變module.exports指向的引用，就不要使用exports
export與export default?
1.根據(jù)輸出可知：export default test1;等價(jià)于exports.default = test1; export {test2};等價(jià)于exports.test2 = test2;
（坑）export {}這個(gè)語法比較特殊，{}花括號(hào)中，必須是提前定義好的
（1）正確
（2）錯(cuò)誤
?2.可見:要想使用export或者export defalut 就不能改變module.exports指向的引用
?（坑）上面第七行代碼進(jìn)行了，執(zhí)行module的指向更改，后續(xù)如果引入的話，就只會(huì)引入module.exports最新的一次指向
?導(dǎo)入簡介
require
import
（注意）如果同時(shí)存在自定義的和default那么impor的時(shí)候需要注意
export defalut 就是默認(rèn)輸出的值，在使用import時(shí)，要想使用這個(gè)默認(rèn)的值就需要只獲取一個(gè)值（不加大括號(hào)，變量名隨便寫）
require和import區(qū)別
區(qū)別1：模塊加載的時(shí)間
區(qū)別2：模塊的本質(zhì)
區(qū)別3：嚴(yán)格模式
ES6 模塊之中，頂層的 this 指向 undefined ，即不應(yīng)該在頂層代碼使用 this
導(dǎo)出簡介（里面有小細(xì)節(jié)請(qǐng)仔細(xì)閱讀）
變量的導(dǎo)出涉及到四個(gè)關(guān)鍵字module.exports與exports，export與export default,
其中module.exports與exports是符合CommonJS模塊規(guī)范的。
export與export default是es6用來導(dǎo)出模塊的。
?module.exports與exports
- module是一個(gè)對(duì)象，代指的整個(gè)js文件,而他的exports屬性就是該js文件對(duì)外暴露的對(duì)象，只要是module.exports的屬性內(nèi)的值都能被訪問到（包括字符串，數(shù)字，對(duì)象，函數(shù)）。
- exports指向了module.exports就相當(dāng)于在js文件開頭添加了這樣一段代碼
-
var exports = module.exports;
總之我們只要記住一點(diǎn):module.exports指向的東西，就是我們要導(dǎo)出的東西
1.該js文件要導(dǎo)出的值即為test
const test=1;
module.exports ={test};
console.log(module.exports)
?2.該js文件要導(dǎo)出的值即為test1和test2
const test1="test1";
const test2= "test2";
module.exports ={test1};
module.exports.test2 =test2;
console.log(module.exports)
3. 注意這里我是先給module.exports.test2賦值，然后給module.exports賦值，因此{(lán)test1}覆蓋了原來的test2，因此module.exports中只有test1
const test1="s";
const test2= "ss";
const test3="sss";
module.exports.test2 =test2;
module.exports ={test1};
console.log(module.exports)
?
?4. 該js文件要導(dǎo)出的值即為test2
const test1="s";
const test2= "ss";
const test3="sss";
exports.test2 = test2;
console.log(module.exports)
?
5. 注意這里(注意點(diǎn))，module.exports ={test1};改變了module.exports指向的引用,exports還指向之前的module.exports引用，因此無論exports.test2 = test2;在哪里執(zhí)行都不能改變?cè)搄s文件索要暴露的值。所以如果要改變module.exports指向的引用，就不要使用exports
export與export default?
- 這兩個(gè)是es6的語法，在小程序中也是可以使用的
- export與export default都是用來導(dǎo)出變量的，并且他們兩個(gè)作用與exports相同，只是語法不同
- 二者同樣是給module.exports賦值，export可以賦多個(gè)值，export default只能賦一個(gè)值（只能使用一次）.
- export后面跟的是聲明或者語句,export default后面跟的是表達(dá)式
1.根據(jù)輸出可知：export default test1;等價(jià)于exports.default = test1; export {test2};等價(jià)于exports.test2 = test2;
const test1="s";
const test2= "ss";
const test3="sss";
export default test1;
export {test2};
export const test4="ssss";
console.log(module.exports)
（坑）export {}這個(gè)語法比較特殊，{}花括號(hào)中，必須是提前定義好的
（1）正確
const test1 = "test1";
export {
test1//這種可以
};
console.log(module.exports)
（2）錯(cuò)誤
export {
test1:1
};
console.log(module.exports)?
?2.可見:要想使用export或者export defalut 就不能改變module.exports指向的引用
const test1="s";
const test2= "ss";
const test3="sss";
const test4="ssss";
export default test1;
export {test2};
module.exports ={test3};//這里進(jìn)行了指向更改
export {test4};
console.log(module.exports)
?
?（坑）上面第七行代碼進(jìn)行了，執(zhí)行module的指向更改，后續(xù)如果引入的話，就只會(huì)引入module.exports最新的一次指向
?導(dǎo)入簡介
我們知道了如何導(dǎo)出變量，那肯定還得知道如何導(dǎo)入
使用require 與import來導(dǎo)入
require 是是符合CommonJS模塊規(guī)范的。import是es6用來導(dǎo)出模塊的。
require 可以在js文件中的任意位置使用，import只能在文件開頭使用
require
require比較好理解，他可以直接獲取module.exports的對(duì)象，進(jìn)而使用其中的屬性和方法
//test.js中
const test1="s";
const test2= "ss";
const test3="sss";
const test4="ssss";
export default test1;
export {test2};
exports.test3=test3;
module.exports.test4=test4;
//引用的文件中
var test = require("../../utils/test.js");
console.log(test)
import
?import是直接獲取module.exports對(duì)象的屬性和方法
（注意）如果同時(shí)存在自定義的和default那么impor的時(shí)候需要注意
方法1、方法2、方法3都在下面的代碼里面
//test.js中
const test1="s";
const test2= "ss";
const test3="sss";
const test4="ssss";
export default test1;//導(dǎo)出默認(rèn)
export {test2};
exports.test3=test3;
module.exports.test4=test4;
//引用的文件中，import在文件開頭
//情況1（用法）
import {test2,test3,test4} from "../../utils/test.js"http://這種情況下對(duì)test2 test3 test4進(jìn)行單獨(dú)導(dǎo)出
//情況2（用法）
import test0 from "../../utils/test.js"http://這種情況下只對(duì)module.exports中的default的值單獨(dú)導(dǎo)出并且賦值給test0
//情況3（用法）
import * as all from "../../utils/test.js"http://這種情況下將module.exports的所有值都付給allexport defalut 就是默認(rèn)輸出的值，在使用import時(shí)，要想使用這個(gè)默認(rèn)的值就需要只獲取一個(gè)值（不加大括號(hào)，變量名隨便寫）
//test.js中
const test1="s";
export default test1;
//引用的文件中，import在文件開頭
import SuiBianXie from "../../utils/test.js"
console.log(SuiBianXie)
require和import區(qū)別
區(qū)別1：模塊加載的時(shí)間
require：運(yùn)行時(shí)加載
import：編譯時(shí)加載（效率更高）【由于是編譯時(shí)加載，所以import命令會(huì)提升到整個(gè)模塊的頭部】
區(qū)別2：模塊的本質(zhì)
require：模塊就是對(duì)象，輸入時(shí)必須查找對(duì)象屬性
import：ES6 模塊不是對(duì)象，而是通過 export 命令顯式指定輸出的代碼，再通過 import 命令輸入（這也導(dǎo)致了沒法引用 ES6 模塊本身，因?yàn)樗皇菍?duì)象）。由于 ES6 模塊是編譯時(shí)加載，使得靜態(tài)分析成為可能。有了它，就能進(jìn)一步拓寬 JavaScript 的語法，比如引入宏（macro）和類型檢驗(yàn)（type system）這些只能靠靜態(tài)分析實(shí)現(xiàn)的功能。文章來源：http://www.zghlxwxcb.cn/news/detail-432619.html
區(qū)別3：嚴(yán)格模式
CommonJs模塊和ES6模塊的區(qū)別：
（1）CommonJs模塊默認(rèn)采用非嚴(yán)格模式
（2）ES6 的模塊自動(dòng)采用嚴(yán)格模式，不管你有沒有在模塊頭部加上 “use strict”;
（3）CommonJS 模塊輸出的是一個(gè)值的拷貝，ES6 模塊輸出的是值的引用文章來源地址http://www.zghlxwxcb.cn/news/detail-432619.html
ES6 模塊之中，頂層的 this 指向 undefined ，即不應(yīng)該在頂層代碼使用 this
到了這里，關(guān)于（區(qū)別、詳解、使用）module.exports與exports，export與export default，import 與require require和import區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
