四.前端模块化开发
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>
未更新