11.模块化

1.分别暴露

m1.js

export function teach(){
   console.log('hello')
}

index.html 通用方式

<scritp type="module">
       import * as m1 form "./src/js/m1.js"
</scritp>

index.html 结构赋值

<scritp type="module">
import {name,teach} form"./src/js/m1.js"
</scritp>

2.统一暴露

m2.js

let name="Nihao"
function teach(){
   console.log('hello')
}
export{
   name,teach
}

index.html 通用方式

<scritp type="module">
       import * as m2 form "./src/js/m2.js"
</scritp>

index.html 结构赋值

<scritp type="module">
import {name,teach} form"./src/js/m2.js"
</scritp>

3.默认暴露

tips:对象形式
m3.js

export default{
    name:"jikey",
      go:{
    console.log('hello')
      }
}

index.html

<scritp type="module">
       import * as m3 from "./src/js/m3.js"
</scritp>

index.html 结构赋值

<scritp type="module">
import {default as m3} from"./src/js/m3.js"
</scritp>

index.html 简便方式 针对默认暴露

<scritp type="module">
import m3 from"./src/js/m3.js"
</scritp>

4.当重名时取别名

<scritp type="module">
import {name as age,teach} from"./src/js/m2.js"
</scritp>