文章目录
Module 语法
之前js 出现的某些痛点：
- 在script 中引入的变量名不可以重复，不然后面的变量会将前面的数据覆盖掉；
1.1 痛点介绍
(1) 异步加载
我们之前学习的都是将 虽然写在html 标签之前,但是却能推后执行。
<script src="1.js" defer></script>
// <script src="1.js" async></script>
- 使用async 时，js 代码加载完毕但是DOM还未渲染完全就会出现访问时找不到节点的问题；
- 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” ；然后在其中导入需要的方法；在需要的文件中导出暴露需要的方法。
导入：
导出：
defalut 只能定义一次，如果要导出多个方法，需要将方法定义到对象中，最后导出对象就可以
(3) 重名解决方法
导入的文件中可能出现方法名称相同的问题，此时我们只需要定义不同导出对象名称，通过对象.方法 进行调用就
import obj1 from './1.js'
import obj2 from './2.js'
console.log(obj1.test,obj2.test)
(4) 解决依赖问题
另外一种导出 / 导入方法：
这种方法使得我们可以按需导入，不要的部分可以不导入
出现下面的情况时，我们可以使用 as
as 表示重命名
另外，在创建方法时也可以直接导出
导入的第二种写法：
这种方式可以将1.js / 2.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
三种导入导出方式需要配对着使用，不能混乱着使用！！!
