ES6-模块化处理

模块化是一种组织和管理前端代码的方式，将代码分成小的模块单元，使代码更易于维护、扩展和复用

它包括了定义、导入、导出以及管理模块的方法和规范

目前，前端模块化有多种规范和实现，包括CommonJS、AMD和ES6模块化

ES6模块化是js语言的模块标准，使用import 和 export进行导入和导出

大部分浏览器都支持了ES6模块化，因此他成为了最为广泛使用的前端模块化标准

ES6有三种导出方法：分别导出、统一导出、默认导出 ，并且这三种语法是可以同时使用的 😊

---

导入

js默认不支持这种模块化的语法，所以需要设置script的标签属性type的值为module

<script type="module"></script>

*代表module.js的所有成员，无论何种方式导入，导入的内容都会被当成一个对象处理

import * as m1 from "./module.js" //导入同一目录下的module.js文件 作为m1对象来使用

---

使用解构表达式按需导入

可以使用解构表达式直接对导入对象分别赋值，在导入的同时可以起别名

import {PI as pi,sum,Person} from "./module.js"

---

分别导出

在需要被暴露的属性/类/方法中，添加export关键字即按需暴露

//module.js
export const PI = 3.14
function sum(a,b){
    return a+b
}

全部导入

import * as m1 from "./module.js"
console.log(m1.PI)//访问暴露的属性
//使用不被暴露的方法
console.log(m1.sum(10,20)) //Uncaught TypeError: m1.sum is not a function

分别导入

import {PI} from "./module.js"
console.log(PI)
//使用不被暴露的方法
console.log(sum(10,20)) //Uncaught TypeError: m1.sum is not a function

---

统一导出

在文件的最后使用export{}按需暴露

//module.js
const PI = 3.14
function sum(a,b){
    return a+b
}
class Person{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    sayHello(){
        console.log(`hello,my name is ${this.name},${this.age} years old`)
    }
}
export{PI,sum,Person}

全部导入

import * as m1 from "./module.js"
console.log(m1.PI) //3.14
console.log(m1.sum(10,20)) //30
let person = new m1.Person("xiaobai",18)
person.sayHello() //hello,my name is xiaobai,18 years old

分别导入

import {PI,sum} from "./module.js"
console.log(PI) //3.14
console.log(sum(10,20)) //30

虽然导出了Person类，但是使用分别导入可以不导入Person类

---

默认导出

在文件的最后使用export default定义一个默认暴露

在一个文件中，默认暴露只能有一个

在导入时，可直接使用default替换其属性名/方法名/类名使用

const PI = 3.14
function sum(a,b){
    return a+b
}
class Person{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    sayHello(){
        console.log(`hello,my name is ${this.name},${this.age} years old`)
    }
}
export default PI

全部导入

import * as m1 from "./module.js"
console.log(m1.default)//default替换PI属性名使用

---

分别导入

default为switch的关键字，所以我们直接使用其之前起一个别名

也可以简化其写法，缺省default as关键字

//import {default as PI}  from "./module.js"
import PI from "./module.js" //简化写法
console.log(PI)

---