require 动态加载_require,exports,module.exports和import,export,export default
我們前端在開發過程中經常會遇到導入導出功能,
在導入時,有時候是require,有時候是import
在導出時,有時候是exports,module.exports,有時候是export,export default
今天我們對這些內容進行簡單的介紹
import,export,export default
import,export,export default屬于ES6規范
import
import 是在編譯過程中執行?也就是說是在代碼執行前執行,
比如說,import后面的路徑寫錯了,在運行代碼前就會拋錯,
在編寫代碼時,import不是一定要寫在js的最前面
import命令具有提升效果,會提升到整個模塊的頭部,首先執行。(是在編譯階段執行的)?import是靜態執行的?因為import是靜態執行的,不能使用表達式和變量,即在運行時才能拿到結果的語法結構
比如,不能再if和else中使用import
再比如,import后的from的路徑,可以是相對路徑,可以是絕對路徑,但是不能是根據變量得來的路徑
//import 路徑不可以為變量
var?url =?'./output'
??import?{
????a,
????b
??}?from?url//這么寫會報錯
//------------------
//import 的引入與否不能和代碼邏輯向關聯
let?status=?true
if(status){
?????import?{
????a,
????b
??}?from?url//這么寫會報錯
}
import可以使用as進行重命名
import 的有很多種導入方式,
??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, ozvdkddzhkzd?from?'./output'
導入的方式和導出有些關聯,我們在下面說導出的時候,對以上這些導入方式進行逐一介紹
exoprt和export default
將exoprt和export default放在一起,因為它們關聯性很大
簡單說:export是導出,export default是默認導出
一個模塊可以有多個export,但是只能有一個export default,export default可以和多個export共存
export default 為默認導出,導出的是用{}包裹的一個對象,以鍵值對的形式存在
導出的方式不同,導入的方式也就不同,
所以建議同一個項目下使用同一的導入導出方式,方便開發
export default解構以后就是export
通過兩個直觀的demo看下export和export default的區別
先看一段代碼(export)?
output.js
const?a =?'valueA1'
export?{a}
input.js
import?{a}?from?'./output.js'//此處的import {a}和export {a},兩個a是一一對應關系
console.log(a)//=>valueA1
留意上面的代碼其中export {a}導出的a,和import {a}導入的a是同一個a
再看一段代碼(export default)
const?a =?'valueA1'
export?default{a}
input.js
import?a?from?'./output.js'//此處的a和export default{a},不是一個a,
console.log(a)//=>{ a: 'valueA1' }
看下export default的栗子中的input.js,我們稍作改動
import?abc?from?'./output.js'//此處的a和export default{a},不是一個a,
console.log(abc)//=>{ a: 'valueA1' }
我們做了些改動,但是輸出沒有變化,import導入的是export default下的對象,叫什么名字都可以,因為只會存在一個export default
exoprt和export default混合使用
exoprt和export default在同一個模塊中同時使用,是支持的,雖然我們一般不會這么做
看一個栗子
output.js
const?a =?'valueA1'
const?b =?'valueB1'
const?c =?'valueC1'
const?d =?'valueD1'
function?foo()?{
??console.log(`foo執行,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 重命名
通過 exoprt和export default導出的在import引入時都支持通過as進行重命名
看個栗子
還是上面的那個output.js
const?a =?'valueA1'
const?b =?'valueB1'
const?c =?'valueC1'
const?d =?'valueD1'
function?foo()?{
??console.log(`foo執行,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中使用的
重點看這一部分
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導出的
我們之前說import{}和export{},是一一對應關系,所以在export導出的,在import{}不支持使用*
關于 import,export,export default先介紹到這里,我們繼續
require,exports,module.exports(記得后面的s)
這是 AMD規范
require
require是運行時調用,所以require理論上可以運用在代碼的任何地方
require支持動態引入
例如,這樣是支持的
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);?//支持
}
通過require引入,是一個賦值的過程
exports 與 module.exports
根據AMD規范
每個文件就是一個模塊,有自己的作用域。在一個文件里面定義的變量、函數、類,都是私有的,對其他文件不可見。
每個模塊內部,module變量代表當前模塊。這個變量是一個對象,它的exports屬性(即module.exports)是對外的接口。加載某個模塊,其實是加載該模塊的module.exports屬性。
為了方便,Node為每個模塊提供一個exports變量,指向module.exports。這等同在每個模塊頭部,有一行這樣的命令。
const?exports =?module.exports;
所以說
以下兩種寫法等價
exports.a ='valueA1'
module.exports.a='valueA1'
前面說在每個模塊提供一個exports變量,指向module.exports。
所以不能直接給exports賦值,賦值會覆蓋
const?exports =?module.exports;
直接給exports賦值會切斷exports和 module.exports的關聯關系
看一個栗子
output.js
const?a =?'valueA1'
const?b =?'valueB1'
const?c =?'valueC1'
module.exports = { c}
exports.b = b//當直接給 module.exports時,exports會失效
module.exports.a = a
input.js
??const?obj =?require('./output.js')
??console.log(obj);?//=>{ c: 'valueC1', a: 'valueA1' }
繼續看代碼 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' }
當直接給 module.exports時,exports會失效
交叉使用
在ES6中export default 導出的是一個對象
在AMD中exports和module.exports導出的也都是一個對象
所以如果你手中的項目代碼支持兩種規范,那么事可以交叉使用的(當然不建議這么去做)
通過export導出的不一定是一個對象
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執行,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' }
總結
require,exports,module.exports屬于AMD規范,import,export,export default屬于ES6規范require支持動態導入,動態匹配路徑,import對這兩者都不支持require是運行時調用,import是編譯時調用require是賦值過程,import是解構過程對于export和export default 不同的使用方式,import就要采取不同的引用方式,主要區別在于是否存在{},export導出的,import導入需要{},導入和導出一一對應,export default默認導出的,import導入不需要{}exports是module.exports一種簡寫形式,不能直接給exports賦值當直接給module.exports賦值時,exports會失效
總結
以上是生活随笔為你收集整理的require 动态加载_require,exports,module.exports和import,export,export default的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 一米六,一百六十斤现在很想减肥应该怎么办
- 下一篇: 三相全桥整流电路_三相桥式全控整流电路