模块化
- 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起
- 块的内部数据与实现是私有的,只是向外部暴露一些接口(方法)与外部其它模块通信
在第四版红宝书关于模块化思想是这些描述的
“把逻辑分块,各自封装,互相独立,每个块自行决定对外暴露什么,同时自行决定引入执行哪些外部代码”
前端模块化的理解
前端模块化就是复杂的文件编程一个一个独立的模块,比如 JS 文件等等,分成独立的 模块有利于重用(复用性)和维护(版本迭代),这样会引来模块之间相互依赖的问题, 所以有了 commonJS 规范,AMD,CMD 规范等等,以及用于 JS 打包(编译等处理)的 工具 webpack
为什么使用模块化
- 在实际的开发过程中,经常会遇到变量、函数、对象等名字的冲突,这样就容易造成冲突,还会造成全局变量被污染
- 同时,程序复杂时需要写很多代码,而且还有引入很多类库,这样稍微不注意就容易造成文件依赖混乱
为了解决上面的问题,我们才开始使用 模块化的js,所以说模块化的作用就是:
- 避免全局变量被污染
- 便于代码编写和维护
ES Module基本特性
- 自动采用严格模式,忽略’use strict’
- 每个ESM模块都是单独的私有作用域
- ESM是通过CORS去请求外部js模块的
- ESM的script标签会延迟执行脚本,相当于defer
默认导出
- 导出对象
//test.js
export default {
height: 185,
name: 'jack',
f1: function () {
console.log(1)
}
}
<script type="module">
import myobj from "./test.js"
console.log(myobj)
console.log(myobj.name)
console.log(myobj.f1())
</script>
导入导出的注意事项
- 导出不是字面量对象,只是语法
- 导入也不是对象的解构,只是语法
- 导出的是 引用关系 只读,利用这点可以定义一些常量模块的配置文件,外部用的时候就不用修改
导出的不是值,也就是不是拷贝一份给你 ,只是把地址给你,所以外部拿到的,会受内部修改的影响,毕竟是同一份内存空间
- 相对路径的
./
在网页中引用资源是可以省略的,import不能省略,省略以字母开头ES Module会认为在加载
第三方模块/插件/依赖 - 只需要执行模块,不要使用成员
import {} from '"./module"
//只会执行不会提取成员
import "./module"
//简写 - 导入所有成员放到对象,成员作为对象的属性
import * as mod form './module.js'
- 导入模块时
import
关键词可以理解为导入模块的声明,需要开发阶段
明确导入模块的路径,可是运行阶段/某种情况满足下
才知道,那就不能使用import from 变量,需要动态导入模块
,ES Module提供了全局的import
函数,专门用来动态导入模块,返回的是一个promise
//test.js var a = 1 var name = 'jack' function f1() { console.log('aa') } export { a, name, f1 }
<script type="module"> console.log(import("./test.js")) //模块加载是个异步的过程 import("./test.js").then(res=>{ console.log(res) }) </script>
这种写法不允许,import
只能出现在顶层