模块化ES Module

模块化

• 将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起
• 块的内部数据与实现是私有的，只是向外部暴露一些接口（方法）与外部其它模块通信

在第四版红宝书关于模块化思想是这些描述的“把逻辑分块，各自封装，互相独立，每个块自行决定对外暴露什么，同时自行决定引入执行哪些外部代码”

前端模块化的理解

前端模块化就是复杂的文件编程一个一个独立的模块，比如 JS 文件等等，分成独立的 模块有利于重用（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问题， 所以有了 commonJS 规范，AMD，CMD 规范等等，以及用于 JS 打包（编译等处理）的 工具 webpack

为什么使用模块化

• 在实际的开发过程中，经常会遇到变量、函数、对象等名字的冲突，这样就容易造成冲突，还会造成全局变量被污染
• 同时，程序复杂时需要写很多代码，而且还有引入很多类库，这样稍微不注意就容易造成文件依赖混乱

为了解决上面的问题，我们才开始使用 模块化的js，所以说模块化的作用就是：

1. 避免全局变量被污染
2. 便于代码编写和维护

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只能出现在顶层