JS模块化

76 阅读1分钟

目标

script两个变量参数 async&defer

  • defer属性:异步加载,不阻塞主线程执行,DOMContentLoaded之前执行,多个defer会按顺序执行
  • async属性:也是异步加载,但加载完成就会立即执行,不会等待html执行,执行顺序也无法保证,适用于不依赖文档解析或者其他脚本解析的结果

CJS commonJs

  • 特征: module + export暴露接口
  • 通过require进行其他模块的调用
优点

CJS率先实现了从框架层面解决了依赖、模块化的问题

缺点
  • 针对的是服务端,对于异步依赖没有很好的解决
  • 新的问题 - 异步依赖

AMD规范

  • 通过异步加载 + 允许定制回调函数
  • 经典框架 require.js
优点
  • 解决了浏览器中异步加载模块,可以并行加载多个模块
缺点
  • 会有引入成本 缺少考虑按需加载

UMD

用来兼容 CJS、AMD等

CMD规范

优点
  • 按需加载,依赖就近
缺点
  • 依赖打包 加载逻辑存在于每个模块中,扩大了每个模块等体积

ESM

新增定义
引入---import
导出---export
原生实现了异步加载 import('./a.js').then(() => {}) // 路由懒加载