Module 语法

之前js 出现的某些痛点：

1. 在script 中引入的变量名不可以重复，不然后面的变量会将前面的数据覆盖掉；

1.1 痛点介绍

(1) 异步加载

我们之前学习的都是将 虽然写在html 标签之前,但是却能推后执行。

<script src="1.js" defer></script>
// <script src="1.js" async></script>

1. 使用async 时，js 代码加载完毕但是DOM还未渲染完全就会出现访问时找不到节点的问题；
2. defer 则是等到DOM 全部都渲染完毕之后再进行js 代码的执行，所以比较来说更靠谱一点。

(2) 私密

一般情况下，我们在声明变量或者函数时使用 _ 表示该变量或者函数是私密的。

(3) 重名

之前js 痛点：
在引入的文件中出现相同名称的变量或者函数，在调用时后者会将前者覆盖掉。

(4) 依赖

现有1.js, 2.js, 3.js 三个文件，其中3.js 调用前两个文件中的方法，此时就需要将3.js 放在后面，此时出现的情况叫做依赖。

1.2 解决方法

以上四个痛点模块化都能解决!

(1) 解决异步加载问题

<script src="1.js" type="module"></script>

关键是使用了 type=“module”

(2) 解决私密问题

使用了 type=“module” 之后就做到了私密不漏，并且我们此时也无法访问文件内部。

所以此时我们需要这样书写代码：
将访问其他js 文件的script 部分添加 type=“module” ；然后在其中导入需要的方法；在需要的文件中导出暴露需要的方法。

导入：

// 导入1.js 中的方法
import 方法名称 from “地址”
(如果是同目录下文件那就必须要有 “ ./ ”)
导出方法名称可以随便写

导出：

// 导出方法
export default 方法名称
导出名称必须对应导出文件中的方法名称

defalut 只能定义一次，如果要导出多个方法，需要将方法定义到对象中，最后导出对象就可以

(3) 重名解决方法

导入的文件中可能出现方法名称相同的问题，此时我们只需要定义不同导出对象名称，通过对象.方法 进行调用就

import obj1 from './1.js'
import obj2 from './2.js'
console.log(obj1.test,obj2.test)

(4) 解决依赖问题

另外一种导出 / 导入方法：

// 导出
export{
Al,
A2,
test
}

// 导入
import {A1, A2. test as testA} from ‘./1.js’
此时导入导出函数名称必须相同

这种方法使得我们可以按需导入，不要的部分可以不导入

出现下面的情况时，我们可以使用 as

as 表示重命名

另外，在创建方法时也可以直接导出

导入的第二种写法：

// import * as obj1 from ‘./1.js’
// import * as obj2 from ‘./2.js’

这种方式可以将1.js / 2.js 文件中所有暴露出来的方法都导入进来！

第三种导入 / 导出规范：
这种方法是将前两种方法组合在一起了，

// 导出
export default 方法名称

// 导入
import testA,{A1,A2} from ‘./1.js’

默认导出方式可以任意起名字，但是第二种方法只能使用原方法名称。

1.3 模块化使用案例

模块化使用案例前身

上面链接是学习class 继承时的案例，现在可以使用模块化规范把代码修改的更加简洁！
对原js 代码添加type 属性：

<script type="module">
        import CreateBox from './03-createBoxForModuleTest.js'
        import CreateImgBox from './04-createImgBox.js'
        ......
    </script>

创建CreateBox.js:

class CreateBox {
    constructor(select, data) {
        this.ele = document.querySelector(select);
        this.title = data.title
        this.list = data.list
        this.render()
    }
    render() {
        let oh3 = this.ele.querySelector("h3")
        let oul = this.ele.querySelector("ul")
        oh3.innerHTML = this.title
        oul.innerHTML = this.list.map(item => `<li>${item}</li>`).join("")
    }
}
export {
	CreateBox
}

创建CreateImgBox.js:

import {CreateBox} from './03-createBox.js'
class CreateImgBox extends CreateBox{
    constructor(select, data) {
        super(select, data)
        this.imgUrl = data.url
        this.render()
    }
    render() {
        super.render()
        let oimg = this.ele.querySelector("img")
        oimg.src = this.imgUrl
    }
}
export default CreateImgBox

三种导入导出方式需要配对着使用，不能混乱着使用！！!