四.前端模块化开发
1.为什么要进行模块化开发
2.如何进行模块化开发
3.模块化开发实站用法
未更新
四.前端模块化开发
1.为什么要进行模块化开发
①前言
- 分析可知此时star为b的，即b覆盖了a，此时出现问题。
<!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>//a中内容var star = '王力宏'<script src="b.js"></script>//b中内容var star = 5<script>console.log(star)</script>
</body>
</html>
②解决问题
- 模块化开发主要为了解决js的变量全局空间被污染的问题
- 原因
因为js是从上到下执行，所以谁在下，谁就被覆盖，代码容易出现问题
2.如何进行模块化开发
①导入模块 使用import
- 方法1 （导入模块）
import * as m from ./m.js
import m1 from ./m1.js
- 方法2 （直接赋值变量 解构module）
import {star} from ./m2.js
- 举例
<!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.log(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)import m3 from './m3.js'console.log(m3)</script>
</body>
</html>
②导出模块 使用export
- 方法1（直接作用在变量或者方法）
export let star =5
export let sing=5
- 方法2（批量导出模块）
export {star, sing}
- 方法3（导出默认模块）
export default{
username: ‘helen’,
}
- 测试
//方法1
export let star = 5
//方法2
let star = '王力宏';function sing(){console.log('大城小爱')
}export {star, sing}
//方法3
//可以导出任意类型，但同时只能有一个export default
// export default 'helen'
// export default 99//大部分情况是导出对象
export default{username: 'helen',age: 20,coding(){console.log('hello world')}
}
3.模块化开发实际用法
- 先将所有模块导入一个入口文件
- 然后在实际页面中直接导入聚合模块
- 测试
//名称叫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)
<!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>
未更新
