神族九帝's blog 神族九帝's blog
首页
网盘 (opens new window)
线报 (opens new window)
商城 (opens new window)
  • 复习指导
  • HTML
  • CSS
  • JavaScript
  • 设计模式
  • 浏览器
  • 手写系列
  • Vue
  • Webpack
  • Http
  • 前端优化
  • 项目
  • 面试真题
  • 算法
  • 精选文章
  • 八股文
  • 前端工程化
  • 基础篇
  • 进阶篇
  • 高级篇
  • 计算机基础
  • 高频考点
  • 精简题
  • 综合问题
  • 复习题
  • vue
  • vue2源码学习
  • 剖析vuejs内部运行机制
  • TypeScript 入门实战笔记
  • vue3源码学习
  • 2周刷完100道前端优质面试真题
  • npm发包
  • 重学node
  • 前端性能优化方法与实战
  • webpack原理与实战
  • webGl
  • 前端优化
  • Web3
  • 更多
  • 网站
  • 资源
  • Vue资源
  • 收藏的一些API
  • 未来要做的事
  • 宝塔面板+青龙面板
  • 安卓手机当服务器使用
  • 京东自动评价代码
  • 搭建x-ui免流服务器(已失效)
  • 海外联盟
  • 好玩的docker
  • 导航
GitHub (opens new window)

神族九帝,永不言弃

首页
网盘 (opens new window)
线报 (opens new window)
商城 (opens new window)
  • 复习指导
  • HTML
  • CSS
  • JavaScript
  • 设计模式
  • 浏览器
  • 手写系列
  • Vue
  • Webpack
  • Http
  • 前端优化
  • 项目
  • 面试真题
  • 算法
  • 精选文章
  • 八股文
  • 前端工程化
  • 基础篇
  • 进阶篇
  • 高级篇
  • 计算机基础
  • 高频考点
  • 精简题
  • 综合问题
  • 复习题
  • vue
  • vue2源码学习
  • 剖析vuejs内部运行机制
  • TypeScript 入门实战笔记
  • vue3源码学习
  • 2周刷完100道前端优质面试真题
  • npm发包
  • 重学node
  • 前端性能优化方法与实战
  • webpack原理与实战
  • webGl
  • 前端优化
  • Web3
  • 更多
  • 网站
  • 资源
  • Vue资源
  • 收藏的一些API
  • 未来要做的事
  • 宝塔面板+青龙面板
  • 安卓手机当服务器使用
  • 京东自动评价代码
  • 搭建x-ui免流服务器(已失效)
  • 海外联盟
  • 好玩的docker
  • 导航
GitHub (opens new window)
  • 复习指导

  • HTML

  • CSS

  • JavaScript

    • 思维导图
    • 数据类型
    • 隐式类型转换
    • 闭包
    • 原型和原型链
    • 继承
    • 数组扁平化flat
    • new操作符做了什么
    • 数组去重性能
    • 防抖与节流函数
    • 深浅拷贝
    • Event Loop
    • 数组方法和类数组
    • 数组排序
    • 异步编程
    • 获取URL参数
    • 模块规范
      • Commonjs
      • AMD
      • UMD
      • ES6
    • tree-shaking的原理
    • 隔离沙箱
  • 设计模式

  • 浏览器

  • 手写系列

  • Vue

  • Webpack

  • Http

  • 前端优化

  • 项目

  • 面试真题

  • 算法

  • 精选文章

  • 八股文

  • 前端工程化

  • 面试题
  • JavaScript
wu529778790
2021-11-23

模块规范

CommonJS/AMD/UMD/ES6 Module 这四种模块规范

  1. CommonJS 规范定义了模块应该怎样进行编写,从而各个模块系统之间可以进行相互操作。

  2. CommonJS 不支持异步加载,因此异步模块定义(AMD)主要为了解决异步加载模块而提出。

  3. 通用模块定义(UMD)模式用于兼容 AMD 和 CommonJS 的规范。

  4. CommonJS 规范用于运行时进行模块加载,ES6 模块化可以在编译阶段确定各个模块之间的依赖关系。

# Commonjs

特点

  • 一个文件就是一个模块
  • 使用 require 载入模块,使用 module.exports 输出模块,因此各个模块间可以进行交互
  • 不支持异步加载

主要是 nodejs 使用的规范

# AMD

异步定义模块,主要就是为了解决异步加载模块而提出

Requirejs 就是 AMD 的实现

# UMD

兼容 AMD 和 Commonjs,并且支持了传统的全局变量模式

# ES6

相比于运行时进行加载的 CommonJS 规范,ES6 模块化主要是为了在编译阶段就可以确定各个模块之间的依赖关系

特点

  • 使用 es6 加载 export 导出
  • 一个模块只会加载一次(Commonjs 也是一样)
  • 导出的模块为变量引用,因此可以在内存中共享

大部分是用 es6 模块,因为我们编译的时候需要使用 babel、webpack 等方式构建依赖树

es6 有兼容性问题,因此需要使用 babel 编译,以及 webpack 打包

CommonJS 导入的是导出值的拷贝,但导出值变化时,到导入值不会改变;而 ES6 Module 则是动态映射,会随着导出值的改变而变

编辑 (opens new window)
上次更新: 2021/11/23, 21:37:14
获取URL参数
tree-shaking的原理

← 获取URL参数 tree-shaking的原理→

最近更新
01
好玩的docker
07-04
02
我的第一个NFT
07-03
03
海外迅雷
06-01
更多文章>
Power by vuepress | Copyright © 2015-2023 神族九帝
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×