1、使用導(dǎo)出導(dǎo)入模塊,必須在script標(biāo)簽寫清楚類型 type='module'
HTML:
<body>
<script type='module' src="main.js"></script>
</body>
2、模塊寫完,就需要進行導(dǎo)出(export),如module.js:
let name="小明"
let age=18
let module=function(){
alert(`我是${name},我今年${age}`)
}
export default module //默認導(dǎo)出module
3、需要用到某個模塊,就需要進行導(dǎo)入(import),如main.js:
import module from './module.js' //導(dǎo)入模塊
setTimeout(function(){
module()
},3000)
一、常見的導(dǎo)入方式(import)
import xxx from "module.js" //默認導(dǎo)出情況,導(dǎo)入xxx名字隨意
import * as xx from "module.js" // *將所有內(nèi)容導(dǎo)入,并掛載在xx上面
import { name } from "module.js" // 導(dǎo)出是name,導(dǎo)入就可以寫name
import { name as name2 } from "module.js" // 可以對導(dǎo)入name進行重新命名為name2
import { name , age ,module} from "module.js" //可以選擇全部導(dǎo)入,也可以部分導(dǎo)入
import { name , age as _age2} from "module.js" // 可以對導(dǎo)入部分進行重命名
二、常見的導(dǎo)出方式(export)
export default module //默認導(dǎo)出
export default {name,age,module} //導(dǎo)出多個變量
注意:由于歷史原因ES6之前不能使用模塊這個功能,所有我們?nèi)绻跒g覽器上使用模塊功能,可以使用安裝parcel這個庫進行。