模块化开发学习
模块导出导入
简单示例
（需要以本地服务器运行进行调试。个人使用VScode的Live Server。）
不同的模块之间通过使用export关键字将代码导出为模块，其他模块可以使用import导入该模块。
#index.js
js
let title = "Tonks"
let web ="www.7k7k.com"
let getweb = ()=>{
return "www.4399.com"
}
export{title,web,getweb} #index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>learning</title>
</head>
<body>
<script type="module">
import{title,web,getweb} from './index.js'
console.log(title)
console.log(web)
console.log(getweb())
</script>
</body>
</html> LiveServer一下，console打印：
Live reload enabled. index2.html:46
Tonks index2.html:14
www.7k7k.com index2.html:15
www.4399.com index2.html:16
Failed to load resource: the server responded with a status of 404 (Not Found) 最下一行报错是由于浏览器小窗口图标的缺失。暂时没有找到规避的方法，不过刷新一下就解决了。
别名
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>learning</title>
</head>
<body>
<script type="module">
import{title as t,web,getweb} from './index.js'
console.log(t)
console.log(web)
console.log(getweb())
</script>
</body>
</html> 别名的使用能减少重复函数/变量/属性的产生。
将变量和函数整体导出
#index.js
js
let title = "Tonks"
let web ="www.7k7k.com"
let getweb = ()=>{
return "www.4399.com"
}
export{title,web,getweb} #index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>learning</title>
</head>
<body>
<script type="module">
import obj from './index.js'
console.log(obj.title)
console.log(obj.web)
console.log(obj.getweb())
</script>
</body>
</html> 或者不使用default关键字，改动一下index.html内容：
html
<script type="module">
import * as obj from './index.js'
console.log(obj.title)
console.log(obj.web)
console.log(obj.getweb())
</script> 效果同理。*表示匹配任意字符，表示导出的所有变量和函数都赋值给了obj这个对象。