程序员社区

模块化的使用

目录
三个文件
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
但是一个模块里只能有一个,多了导入的时候,就不知道导入哪个了

赞(0) 打赏
未经允许不得转载:IDEA激活码 » 模块化的使用

一个分享Java & Python知识的社区