模块化:模块是一个文件
好处:
1.减少命名冲突
2.避免引入时的层层依赖
3.可以提升执行效率
**第一种方法***********************
1.如何导出(暴露)
export let run =function(){
console.log("run-->fun")
}
export let userName = "jinglijuan"
2.如何引入(依赖)
<script type="module"> //设置为module类型
import {run,userName} from "./mo.js" //内部名字要与暴露出来的名字一致
run();
console.log(userName)
</script>
**第二种方法 :暴露的数据过多时使用
1. 导出时正常导出
export let run =function(){
console.log("run-->fun")
}
export let userName = "jinglijuan"
2. 导入时
<script type = "module">
import * as 别名 from './mo.js'
console.log(别名.暴露的方法或者变量名)
console.log(mo.run)
</script>
**第三种方法:直接导出对象
1. 导出:
let run = function(){
console.log("jinglijuan")
}
let userName = "jinglijuan"
let age = 21
let sex = "woman"
export {
run,
userName,
age,
sex
}
2. 如何导入(接收):
import {userName,age} from "./mo.js"
console.log(userName,age)
**第四种方法:导出的数据起个别名
导出时通过as给导出的内容起个别名,接收时需要以别名为依据
1. 导出:
let age = 21
let sex = "woman"
export {
age as a,
sex
}
2. 如何导入(接收):
import {userName,a} from "./mo.js"
console.log(userName,a)
**第五种,引入时增加别名(从不同文件中的引入的变量名或者方法名可能是重名的,引入时使用会报错)
1.引入
import {userName as moUserName} from './mo4.js'
import {userName} from './mo5.js'
console.log(moUserName,userName)
**第六种:默认导出(使用频率最高)
只能有一个默认对象
1.导出(暴露)
export default {
userName:'jinglijuan',
age:20
}
2.引入(接收)
import mo from "./mo.js"
console.log(mo.userName)
**第七种:混合导出
1.导出(暴露)
export default{
userName:'jinglijuan',
age:20
}
export let sex = '男'
2.引入
import mo,{sex} from './mo7.js'
console(mo.userName,mo.age,sex)
模块的特点:
1.可以相互依赖
2.当你的模块被多次引入时,只执行一次
在多处引入相同的js文件,那么这个js文件只会执行一次
ES6模块化及优点,简单案例让你秒懂
点赞
收藏