在ES5中其实是没有模块的，只能通过各种方法来实现模块。
<script src="./js1.js"></script>
<script src="./js2.js"></script>
<script src="./main.js"></script>
//js1
window.module1 = function(){
alert(1)
}
//js2
window.module2 = function(){
alert(2)
}
//main
setTimeout(() => {
window.module1()
}, 5000);
setTimeout(() => {
window.module1()
}, 2000);
但是如果有js文件里有全局变量
//js1
var a=1
window.module1 = function(){
alert(a)
}
//js2
var a=2
window.module2 = function(){
alert(a)
}
//main
setTimeout(() => {
window.module1()
}, 5000);
setTimeout(() => {
window.module2()
}, 2000);
后加载的会覆盖先加载的
需要使用一个立即执行函数
!function(){
var a=1
window.module1 = function(){
alert(a)
}
}
es6中使用花括号和let形成局部变量
{
let a=1
window.module1 = function(){
alert(a)
}
}
使用es6语法制作模块
//html
<script type = "module" src="./main.js"></script>
//xxx.js
let xxx = [1,2,3]
export default module
//js1.js
import xxx from './xxx.js'
let module1 = function(){
alert(xxx)
}
export default module1
//js2.js
import xxx from './xxx.js'
let module2 = function(){
alert(xxx)
}
export default module2
//main.js
import module1 from './js1.js'
import module2 from './js2.js'
setTimeout(() => {
window.module1()
}, 5000);
setTimeout(() => {
window.module2()
}, 2000);
html里引入使用了模块的文件要加上type="module"，
js1,js2里使用‘export default module1’ 来导出
main里使用‘import module1 from './js1.js'’来导入
import 是 default时变量可以随意起。
也可以自定义导出
//导出模块
export {name,age,xxx}
export default module1
//导入模块
import {name,age,xxx} from '导出模块
import module from '导出模块'
自定义导出的时候名字必须相同。
但是导入多个模块时候，变量名有可能会重合。
//导出模块1
export {name,age,xxx}
export default module1
//导出模块2
export {name,age,xxx}
export default module2
//导入模块
import {name,age,xxx} from '导出模块1'
import module1 from '导出模块1'
import {name,age,xxx} from '导出模块2'
import module2 from '导出模块2'
此时会报错。
如果想同时引入不同模块，变量名相同时,使用as重命名变量。
import {name as name1} from '导出模块1'
import {name as name2} from '导出模块2'
也可以使用‘*’将要导出内容一次性导出。
import * as xxx from '导出模块'
//将要导出内容导入对象xxx里。
浏览器可能不支持import和export
这时可以使用babel webpack来解决。
前端模块化的意义
- 提高开发效率，有利于多人协同开发
- 解决文件依赖问题，无需考虑引用包顺序
- 避免全局变量污染
- 方便代码的复用和后期的维护
总结就是js填坑史。
