模块

在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来解决。

前端模块化的意义

1. 提高开发效率，有利于多人协同开发
2. 解决文件依赖问题，无需考虑引用包顺序
3. 避免全局变量污染
4. 方便代码的复用和后期的维护

总结就是js填坑史。