模块化之CJS, AMD, UMD 和 ESM

最新推荐文章于 2024-04-17 08:34:48 发布

snowDreamzzz

最新推荐文章于 2024-04-17 08:34:48 发布

阅读量343

点赞数 5

分类专栏： javascript 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qubes/article/details/134272202

版权

[[toc]]

模块化优点

防止命名冲突
代码复用
高维护性

CJS, AMD, UMD 和 ESM

历史

ES6之前，JS一直没有自己的模块体系
后来社区出现了CommonJS和AMD，
CommonJS 主要用于服务器（Node）
AMD 主要用于浏览器
ES6引入了ESM
到此，JS终于有了自己的模块体系，基本上可以完全取代CJS和AMD

服务端:

同步加载模块
CommonJS => NodeJS、Browserify

客户端

异步加载模块
AMD => requireJS
CMD => seaJS

Snipaste_2023-08-13_12-20-15

CJS:server

CJS 是 CommonJS 的缩写。
针对环境: 服务器端，2009年，Node 就是使用 CJS 模块
如何识别: module.exports 和 require()

特点:

CJS 不能在浏览器中工作，它必须经过转换和打包，Browserify 工具，我们可以在浏览器端使用采用CommonJS规范的js文件
运行: 同步导入模块
加载: 动态，被加载的时候运行
输出: 值的浅拷贝
CJS 模块加载 ESM 模块: 不能使用require命令，而要使用import()函数

// 1. CJS 基本使用
// 定义模块
const obj = {
   a: 1};
module.exports = obj;
// 使用模块
const obj = require('./test.js');

// 2. CJS 输出值拷贝
/*************** a.js**********************/
let count = 0
exports.count = count; // 输出值的拷贝
exports.add = ()=>{
   
    //这里改变count值，并不会将module.exports对象的count属性值改变
    count++;
}
/*************** b.js**********************/
const {
    count, add } = require('./a.js')
console.log(count) //0
add();
console.log(count)//0