我們前端在開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)遇到導(dǎo)入導(dǎo)出功能，

在導(dǎo)入時(shí)，有時(shí)候是require，有時(shí)候是import

在導(dǎo)出時(shí)，有時(shí)候是exports，module.exports，有時(shí)候是export，export default

今天我們對(duì)這些內(nèi)容進(jìn)行簡(jiǎn)單的介紹

import，export，export default

import，export，export default屬于ES6規(guī)范

import

import 是在編譯過(guò)程中執(zhí)行?也就是說(shuō)是在代碼執(zhí)行前執(zhí)行，

比如說(shuō)，import后面的路徑寫(xiě)錯(cuò)了，在運(yùn)行代碼前就會(huì)拋錯(cuò)，

在編寫(xiě)代碼時(shí)，import不是一定要寫(xiě)在js的最前面

import命令具有提升效果，會(huì)提升到整個(gè)模塊的頭部，首先執(zhí)行。(是在編譯階段執(zhí)行的)?import是靜態(tài)執(zhí)行的?因?yàn)閕mport是靜態(tài)執(zhí)行的，不能使用表達(dá)式和變量，即在運(yùn)行時(shí)才能拿到結(jié)果的語(yǔ)法結(jié)構(gòu)

比如，不能再if和else中使用import

再比如，import后的from的路徑，可以是相對(duì)路徑，可以是絕對(duì)路徑，但是不能是根據(jù)變量得來(lái)的路徑

//import 路徑不可以為變量

var?url =?'./output'

??import?{

????a,

????b

??}?from?url//這么寫(xiě)會(huì)報(bào)錯(cuò)

//------------------

//import 的引入與否不能和代碼邏輯向關(guān)聯(lián)

let?status=?true

if(status){

?????import?{

????a,

????b

??}?from?url//這么寫(xiě)會(huì)報(bào)錯(cuò)

}

import可以使用as進(jìn)行重命名

import 的有很多種導(dǎo)入方式，

??import?foo?from?'./output'

??import?{b?as?B}?from?'./output'

??import?*?as?OBj?from?'./output'

??import?{a}?from?'./output'

??import?{b?as?BB}?from?'./output'

??import?c, ze8trgl8bvbq?from?'./output'

導(dǎo)入的方式和導(dǎo)出有些關(guān)聯(lián)，我們?cè)谙旅嬲f(shuō)導(dǎo)出的時(shí)候，對(duì)以上這些導(dǎo)入方式進(jìn)行逐一介紹

exoprt和export default

將exoprt和export default放在一起，因?yàn)樗鼈冴P(guān)聯(lián)性很大

簡(jiǎn)單說(shuō)：export是導(dǎo)出，export default是默認(rèn)導(dǎo)出

一個(gè)模塊可以有多個(gè)export，但是只能有一個(gè)export default，export default可以和多個(gè)export共存

export default 為默認(rèn)導(dǎo)出，導(dǎo)出的是用{}包裹的一個(gè)對(duì)象，以鍵值對(duì)的形式存在

導(dǎo)出的方式不同，導(dǎo)入的方式也就不同，

所以建議同一個(gè)項(xiàng)目下使用同一的導(dǎo)入導(dǎo)出方式，方便開(kāi)發(fā)

export default解構(gòu)以后就是export

通過(guò)兩個(gè)直觀的demo看下export和export default的區(qū)別

先看一段代碼(export)?

output.js

const?a =?'valueA1'

export?{a}

input.js

import?{a}?from?'./output.js'//此處的import {a}和export {a}，兩個(gè)a是一一對(duì)應(yīng)關(guān)系

console.log(a)//=>valueA1

留意上面的代碼其中export {a}導(dǎo)出的a，和import {a}導(dǎo)入的a是同一個(gè)a

再看一段代碼(export default)

const?a =?'valueA1'

export?default{a}

input.js

import?a?from?'./output.js'//此處的a和export default{a}，不是一個(gè)a，

console.log(a)//=>{ a: 'valueA1' }

看下export default的栗子中的input.js，我們稍作改動(dòng)

import?abc?from?'./output.js'//此處的a和export default{a}，不是一個(gè)a，

console.log(abc)//=>{ a: 'valueA1' }

我們做了些改動(dòng)，但是輸出沒(méi)有變化，import導(dǎo)入的是export default下的對(duì)象，叫什么名字都可以，因?yàn)橹粫?huì)存在一個(gè)export default

exoprt和export default混合使用

exoprt和export default在同一個(gè)模塊中同時(shí)使用，是支持的，雖然我們一般不會(huì)這么做

看一個(gè)栗子

output.js

const?a =?'valueA1'

const?b =?'valueB1'

const?c =?'valueC1'

const?d =?'valueD1'

function?foo()?{

??console.log(`foo執(zhí)行，c的值是${c}`);

}

export?{a}

export?{b}

export?default?{ b,d,foo}

input.js

import?obj, {a,b }?from?'./output'

console.log(a);?//=>valueA1

console.log(b);?//=>valueB1

console.log(obj);?//=>{ b: 'valueB1', d: 'valueD1', foo: [Function: foo] }

as 重命名

通過(guò) exoprt和export default導(dǎo)出的在import引入時(shí)都支持通過(guò)as進(jìn)行重命名

看個(gè)栗子

還是上面的那個(gè)output.js

const?a =?'valueA1'

const?b =?'valueB1'

const?c =?'valueC1'

const?d =?'valueD1'

function?foo()?{

??console.log(`foo執(zhí)行，c的值是${c}`);

}

export?{a}

export?{b}

export?default?{ b,d,foo}

input.js

import?{a?as?A}?from?'./output'

import?{*?as?A}?from?'./output'//這是不支持的

import?*?as?obj?from?'./output'

console.log(A);?//=>valueA1

console.log(obj);?//=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }

as后面的變量是你要在input.js中使用的

重點(diǎn)看這一部分

import?{*?as?A}?from?'./output'//這是不支持的

import?*?as?obj?from?'./output'

console.log(obj);?//=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }

* 代表了所有，包括了export和export default導(dǎo)出的

我們之前說(shuō)import{}和export{},是一一對(duì)應(yīng)關(guān)系，所以在export導(dǎo)出的，在import{}不支持使用*

關(guān)于 import，export，export default先介紹到這里，我們繼續(xù)

require，exports，module.exports(記得后面的s)

這是 AMD規(guī)范

require

require是運(yùn)行時(shí)調(diào)用，所以require理論上可以運(yùn)用在代碼的任何地方

require支持動(dòng)態(tài)引入

例如，這樣是支持的

let?flag =?true

if?(flag) {

??const?a =?require('./output.js')

??console.log(a);?//支持

}

require路徑支持變量

let?flag =?true

let?url =?'./output.js'

if?(flag) {

??const?a =?require(url)

??console.log(a);?//支持

}

通過(guò)require引入，是一個(gè)賦值的過(guò)程

exports 與 module.exports

根據(jù)AMD規(guī)范

每個(gè)文件就是一個(gè)模塊，有自己的作用域。在一個(gè)文件里面定義的變量、函數(shù)、類，都是私有的，對(duì)其他文件不可見(jiàn)。

每個(gè)模塊內(nèi)部，module變量代表當(dāng)前模塊。這個(gè)變量是一個(gè)對(duì)象，它的exports屬性(即module.exports)是對(duì)外的接口。加載某個(gè)模塊，其實(shí)是加載該模塊的module.exports屬性。

為了方便，Node為每個(gè)模塊提供一個(gè)exports變量，指向module.exports。這等同在每個(gè)模塊頭部，有一行這樣的命令。

const?exports =?module.exports;

所以說(shuō)

以下兩種寫(xiě)法等價(jià)

exports.a ='valueA1'

module.exports.a='valueA1'

前面說(shuō)在每個(gè)模塊提供一個(gè)exports變量，指向module.exports。

所以不能直接給exports賦值，賦值會(huì)覆蓋

const?exports =?module.exports;

直接給exports賦值會(huì)切斷exports和 module.exports的關(guān)聯(lián)關(guān)系

看一個(gè)栗子

output.js

const?a =?'valueA1'

const?b =?'valueB1'

const?c =?'valueC1'

module.exports = { c}

exports.b = b//當(dāng)直接給 module.exports時(shí)，exports會(huì)失效

module.exports.a = a

input.js

??const?obj =?require('./output.js')

??console.log(obj);?//=>{ c: 'valueC1', a: 'valueA1' }

繼續(xù)看代碼 output.js

//部分省略

exports.b = b//這樣可以生效

module.exports.a = a

input.js

??const?obj =?require('./output.js')

??console.log(obj);?//=>{ b: 'valueB1', a: 'valueA1' }

再看一段代碼 output.js

//部分省略

module.exports = { c}

module.exports.a = a

input.js

??const?obj =?require('./output.js')

??console.log(obj);?//=>{ c: 'valueC1', a: 'valueA1' }

當(dāng)直接給 module.exports時(shí)，exports會(huì)失效

交叉使用

在ES6中export default 導(dǎo)出的是一個(gè)對(duì)象

在AMD中exports和module.exports導(dǎo)出的也都是一個(gè)對(duì)象

所以如果你手中的項(xiàng)目代碼支持兩種規(guī)范，那么事可以交叉使用的(當(dāng)然不建議這么去做)

通過(guò)export導(dǎo)出的不一定是一個(gè)對(duì)象

demo1

output.js

//部分省略

module.exports = { c}

module.exports.a = a

inputj.s

import?obj?from?'./output'

import?{a}?from?'./output'

console.log(a);//=>valueA1

console.log(obj);//=>{ c: 'valueC1', a: 'valueA1' }

demo2

output.js

const?a =?'valueA1'

const?b =?'valueB1'

const?c =?'valueC1'

function?foo()?{

??console.log(`foo執(zhí)行，c的值是${c}`);

}

export?{a}

export?default?{b,c,foo}

export?{b}

input.js

??const?a =?require('./output.js')

??console.log(a);?//=>{ a: 'valueA1',default: { b: 'valueB1', c: 'valueC1', foo: [Function: foo] }, b: 'valueB1' }

總結(jié)

require，exports，module.exports屬于AMD規(guī)范，import，export，export default屬于ES6規(guī)范require支持動(dòng)態(tài)導(dǎo)入，動(dòng)態(tài)匹配路徑，import對(duì)這兩者都不支持require是運(yùn)行時(shí)調(diào)用，import是編譯時(shí)調(diào)用require是賦值過(guò)程，import是解構(gòu)過(guò)程對(duì)于export和export default 不同的使用方式，import就要采取不同的引用方式，主要區(qū)別在于是否存在{},export導(dǎo)出的，import導(dǎo)入需要{},導(dǎo)入和導(dǎo)出一一對(duì)應(yīng),export default默認(rèn)導(dǎo)出的，import導(dǎo)入不需要{}exports是module.exports一種簡(jiǎn)寫(xiě)形式，不能直接給exports賦值當(dāng)直接給module.exports賦值時(shí)，exports會(huì)失效

總結(jié)

以上是生活随笔為你收集整理的require 动态加载_require,exports,module.exports和import,export,export default的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。