携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

什么是前端模块化

1.将复杂程序根据规范拆分成若干模块，一个模块包括输入和输出

2.模块的内部实现是私有的，对外暴露接口与其他模块通信

3.一个html页面可以引用的script包括：脚本和模块

脚本和模块的区别

前端模块化的进化过程

• 第一阶段：全局function模式，将不同功能封装成不同函数

  • 缺陷：容易引起全局命名空间冲突

• 第二阶段：全局namespace模式，通过对象封装模块

  • 缺陷：外部能够修修改模块内部数据
  • 解决：函数作用域 + 闭包

• 第三阶段：IIFE模式，通过自执行函数创建闭包

  • 缺陷：无法解决模块间相互依赖问题

• 第四阶段：IIFE模式增强，支持传入自定义依赖

  • 缺陷：
    • 多依赖传入时，代码阅读困难
    • 无法支持大规模的模块化开发
    • 无特定语法支持，代码简陋

CommonJs

介绍

1.nodejs默认模块化规范，每个文件就是一个模块，有自己的作用域

2.nodejs中cjs模块加载采用同步加载方式
3.通过 require 加载模块，通过exports或module.exposts输出模块

特点

1.所有代码都运行在模块作用域，不会污染全局作用域

2.模块可以多次加载，第一次加载时会运行模块，模块输出结果会被缓存，再次加载时，会从缓存结果中直接读取模块输出结果

3.模块加载的顺序，按照其在代码中出现的顺序

4.模块输出是值的拷贝，类似iife方案中的内部变量

AMD

1. AMD规范采用非同步加载模块，允许指定回调函数
2. NODE模块通常都位于本地，加载速度快，所以适用于同步加载
3. 浏览器环境下，模块需求请求获取，所以适用于异步加载
4. require.js是AMD的一个具体实现库

CMD

1. CMD整合了CommonJs和AMD的优点，模块加载是异步的
2. CMD专门用于浏览器端，sea.js是CMD规范的一个实现

ESModule

1. ESModule设计理念是希望在编译时就确定模块依赖关系及输入输出
2. CommonJS和AMD必须在运行时才能确定依赖和输入输出
3. ESM通过import加载模块，通过export输出模块

CJS和ESModule对比