js 模块化

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安装

运行

全部导入

    <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>