2022年的愿望是找个女朋友，进入大一点的公司。
创建04-module-demo目录，创建 “no-module” 目录，创建a.js
var star = ‘王力宏’
创建b.js
var star = 5
创建demo.html
从这个例子可以看出，star的值的不确定性很大，a和b两个脚本文件中的同名变量互相干扰。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="a.js"></script>
<script src="b.js"></script>
<script>
console.log(star)
</script>
</body>
</html>
模块化解决的问题
模块化主要解决javascript程序全局空间内被污染的问题
模块化规范
CommonJS模块化规范（基于ES6语法之前）
例如：node.js中的 require 引入模块，exports 导出模块
ES6模块化规范（使用ES6语法）
export 导出模块
import 引入模块
ES6模块化规范
1、导出模块
创建"module"目录，创建m1.js
export let star = ‘王力宏’;
export function sing(){
console.log(‘大城小爱’)
}
let star = ‘王力宏’;
function sing(){ console.log(‘大城小爱’) }
export {star, sing}
创建m2.js
export let star = 5
导入模块
创建demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
import * as m1 from './m1.js'
import * as m2 from './m2.js'
console.l## 标题og(m1)
console.log(m2)
console.log(m1.star)
console.log(m2.star)
import {star, sing} from './m1.js'
import {star as star2} from './m2.js'
console.log(star)
sing()
console.log(star2)
</script>
</body>
</html>
默认暴露模块
默认暴露
export default{
username: 'helen',
age: 20,
coding(){
console.log('hello world')
}
}
导入模块
import m3 from './m3.js'
console.log(m3)
封装代码
1、创建app.js
可以看做是程序的入口文件
import * as m1 from './m1.js'
import * as m2 from './m2.js'
import m3 from './m3.js'
console.log(m1)
console.log(m2)
console.log(m3)
2、引入入口文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="app.js" type="module"></script>
</body>
</html>
|