前端模块化

date
Feb 3, 2022
slug
front-end-module
status
Published
tags
基础知识
summary
关于前端模块化的前世今生的简述汇总与差异。
type
Post
  • IIFE:自执行函数解决 命名空间 的问题
  • AMD/CMD: 解决模块间的 依赖加载 执行顺序 的问题
  • CommonJS: Node 服务端 采用的模块加载规范
  • UMD:实现上述模块 规范兼容 的统一处理
  • ES6 Modules:前端模块加载的 官方规范
  • Webpack: 前端构建工具,可实现不同规范不同资源的模块化
    • graph TD
          M[JS Module]
          I[1. IIFE ]
          AC[2. AMD/CMD]
          CommonJs[3. CommonJs ]
          UMD[4. UMD]
          ES6[5. ES6 Modules ]
          Webpack[6. Webpack ]
          M --> I
          M --> CommonJs
          M --> AC
          M --> |browser| ES6
      subgraph one
          I
          CommonJs
          AC
      end
          AC --> UMD
          CommonJs --> UMD
          UMD --> Webpack
          ES6 --> Webpack
 
import * from 'xxx' 和 import() 的区别
  • 前者为静态引入
    • 也就是编译阶段,会在程序执行之前
  • 后者为动态引入
    • import() 返回的是一个包装好的 promise 对象
    • 可以动态加载不同路径资源
    • 运行阶段,参与程序执行
 
CommonJS 与 ES6 的差异
  • CommonJS 输出的是一个值的 浅拷贝,ES6 输出的是值的 引用
    • 修改值时拷贝的不影响,引用的影响
  • CommonJS 是 运行时 加载,ES6 是 编译时 输出接口
    • CommonJS 模块加载机制:
        1. require 命令第一次加载模块时会在内存中生成并 缓存 该对象
        1. 该对象的id属性就是模块名,取值是将从 exports 属性中取值
        1. 因该对象被缓存,所以当同一个模块被 require 加载多次时,也不会被真正执行,除非手动清楚系统缓存
    • ES6 模块加载机制:
      • JS 引擎对脚本静态分析时,遇到加载命令 import 时,会生成 只读引用,当脚本真正执行时,再根据引用到被加载模块里取值
      • 当多个文件引入同一个模块中的实例时,加载的也是同一个实例
  • CommonJS 是 同步 加载模块,ES6 是 异步 加载
 

© jianxiaoBai 2021 - 2022