模块化开发

最早时没有模块化

①没有办法维护
- 一般把整合的 js 起名叫做 main.js，并且不知道依赖了哪一个文件
②全局变量污染
- 每定义一个变量，就要去查看之前是否使用过
③依赖关系不清
- 现在只知道 c.js 里用到了 a.js 和 b.js 文件里面的内容，但是 b.js 里有没有依赖到 a.js 里的内容我们并不知道

2011年出现的，社区里发起的
因为非官方，没有关键字，大家书写了一套 require.js 的第三方文件来实现 模块化标准
把每一个 js 文件独立出来
- 使用了导入导出的语法来实现模块化
- 在 js 文件里引入另一个 js 文件
定义模块
- 调用 define 的方法
  - 独立模块定义：每一个模块文件开始执行 define()，不依赖其他文件，就是一个单纯的模块，向外暴露的内容，直接 return 就好
  - 依赖其他模块的模块：我也是一个模块文件，但是我依赖的其他模块的内容使用 define() ，定义语法：define([依赖文件1，依赖文件2，...]，function(模块A，模块B，...){ })
  - 导入其他模块：我是一个模块整合文件，直接使用 a.js 文件里的方法，使用这个方法 require()，语法： require([依赖文件1，依赖问卷2，...]，function(模块1，模块2){ })

2015 年发布， ES6 语法里自带了一个模块化标准
2016 年开始， Vue 出现了，人家出现了一个脚手架（开发的大框架给你搭好）
- 搭建这个架子的时候，内置了 ES6 模块化标准
2018 年，各大浏览器厂商开始原生支持 ES6 模块化标准
2018 年中， Chrome 率先原生支持 ES6 模块化
语法：变成了 JS 的语法、关键字，不需要任何第三方文件的引入
特点：页面必须在服务器上打开
- live server 插件
- 如果想使用模块化语法，script 标签要加一个属性 type="module"
使用：
- 每一个文件都可以作为独立模块，页面都可以作为整合文件
- 导出语法
  - 语法1：export default 导出的内容
  - 语法2：export var num = 200
- 导入语法
  - 接收 export default 导出
    - import 变量 from '哪一个 JS 文件'
  - 接收 export 导出的内容
    - import { 接收变量 } from '哪一个 JS 文件'
  - import 文件名
    - 此语法导入不接受数据
2020年
- ES2020 发布新的标准
- 多了一个按需加载的模块化
- 语法：import(你要加载的文件).then(function (res) { })