es6之前
1.代码模块化
通过使用立即执行函数，对象和闭包创建的模块方式称为
作用域只有两种：全局作用域和函数作用域
main.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> <script type="text/javascript" src="./main.js"></script> </head> <body> <button onclick="click">点 击</button> <script> mouseCounterModule.countClick() </script> </body> </html>
main.js
const mouseCounterModule = function () { let count = 0 const click1 = () => { console.log(++count) }; return { countClick: () => { document.addEventListener("click", click1) } }; }();
2.模块扩展
3.AMD模块化
4.CommonJs模块化
es6模块
main.js
命名导出
//导出 let a='aaa' export let b='bbb' export function f(){ console.log('fff') }
main.html
需要使用花括号对
<body> <script> // 导入命名 import { b, f } from "./main.js" f() </script> </body>
报错
解决：script 添加 type="module" 属性
<script type="module"> import {b,f} from "./main.js" f() </script>
又报错误:
解决：
跨域问题，需要起个服务端
vscode安装
运行
ok
全部导入
<script type="module"> import * as mainModule from "./main.js" console.log(mainModule.b) mainModule.f() </script>
mainModule点的时候没提示？
指定导出
let a = 'aaa' let b = 'bbb' function f() { console.log('fff') } export {b, f}
导出时使用别名
export {b as bbb, f as fff}
默认导出
默认导出使用 export default
一个模块里只能有一个 export default
使用了 export default 变量函数或者类，不用加{}
let a = 'aaa' export default class Student { constructor(name) { this.name = name } }
导入
<script type="module"> import Student from "./main.js" let a = new Student('li') console.log(a.name) </script>
在一行里同时导入多种类型
let a = 'aaa' export let b = 'bbb' export function f() { console.log('fff') } export default class Student { constructor(name) { this.name = name } }
导入
<script type="module"> import Student, { b, f } from "./main.js" console.log(b) f() let a = new Student('li') console.log(a.name) </script>
使用别名解决多个模块名称重复问题
a1.js
export let a = 'a1'
a2.js
export let a = 'a2'
main.html
<body> <script type="module"> import {a as a1} from "./a1.js" import {a as a2} from "./a2.js" console.log(a1) console.log(a2) </script> </body>