前端模块化

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 - 2024