目录
三个文件
index.html
aaa.js,定义一些变量和函数并导出
ccc.js,导入aaa.js里的一些变量和函数
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--type属性为module,表示把它当成一个模块来处理-->
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="ccc.js" type="module"></script>
</body>
</html>
aaa.js
let name="小明"
let age = 20
let flag = true
function sum(sum1,sum2){
return sum1+sum2
}
if(flag){
console.log(sum(20,30))
}
//第一种导出
export {
flag, sum
}
//第二种导出
export var width=20.5
export var height=50.69
//第三种,导入函数或类
function product(num1,num2){
return num1*num2
}
class person{
run(){
console.log("在奔跑")
}
}
//可以定义的时候导出,也可以定义完了像这样一起导出
export {product,person}
//export default
var address="南京市"
export default address
ccc.js
//第一种导入
import {flag,sum} from "./aaa.js"
if(flag){
console.log(sum(20,30))
console.log("每一个不曾起舞的日子都是对生命的辜负")
}
//第二种导入
import {width,height} from "./aaa.js"
console.log(width)
console.log(height)
//第三种导入function/class
import {product,person} from "./aaa.js"
console.log(product(20,30))
const p = new person()
p.run()
//导入default模块,这个时候可以自己命名传过来的某个功能
import addr from "./aaa.js"
console.log(addr)
//全部一起导入
import * as all from "./aaa.js"
console.log(all.flag)
ps:有的时候模块里有些功能我们希望导入者自己来命名
这个时候就可以用export default
但是一个模块里只能有一个,多了导入的时候,就不知道导入哪个了