CJS与ESM：CJS

news2024/11/24 20:08:41
模块化方案

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

如果我们在一个html文件中，引入脚本，以前是通过script脚本来引入：
在这里插入图片描述
这种方式下引入的脚本实际上相当于把所有的代码都放在了全局作用域中，假如a.js和b.js文件中都有name变量，首先会覆盖，其次是let,多次声明同一个变量会报错
在这里插入图片描述
这就是相当于在全局作用域中 重复声明与赋值

另外也可以通过立即执行函数将变量的作用域限制在函数内部，然后通过return 返回出去，这个就不多说了，重点说下cjs与esm

CommonJS：
CJS主要用于服务器端文件的导入和导出，我们在一个文件中可以定义变量和函数等，通过module.exports导出，module.exports是一个空对象，给这个对象身上添加属性，或者重新为其赋值为另一个对象，就会将其指向的对象作为导出对象导出出去

// 1.js
console.log(module.exports); //输出 {}

// 1.js
console.log(module.exports);

let name = "aa";
let age = 20;
function sayHi() {
  console.log("hihihi");
}

// 给对象添加属性
module.exports.name = name;
module.exports.age = age;
module.exports.sayHi = sayHi;

console.log(module.exports);
//{ name: 'aa', age: 20, sayHi: [Function: sayHi] }

或者是让module.exports重新指向一个对象：

// 1.js
console.log(module.exports);

let name = "aa";
let age = 20;
function sayHi() {
  console.log("hihihi");
}

module.exports = {
  name,
  age,
  sayHi,
};

console.log(module.exports);
//{ name: 'aa', age: 20, sayHi: [Function: sayHi] }

在另一个文件中通过require()导入：

// 1.js 导出
let name = "aa";
let age = 20;
function sayHi() {
  console.log("hihihi");
}

module.exports = {
  name,
  age,
  sayHi,
};

// 2.js 导入
const m1 = require("./1.js");
console.log(m1); 
//{ name: 'aa', age: 20, sayHi: [Function: sayHi] }

在CJS中，require(“./1.js”) 获取的实际上是，导出对象的地址，就是说，导出对象module.exports和m1变量中保存的地址是一样的，

导出的是原始类型时

假如导出的一个原始类型，即：

// 1.js 导出
let name = "aa";
let age = 20;

module.exports = name


// 2.js 导入
const m1 = require("./1.js");
console.log(m1); //aa

在导入的时候类似于原始类型变量的赋值，在2.js文件中创建了一个变量m1,然后拷贝了1.js中的name变量。
这时候，导出，导入值的改变不会对彼此产生影响，就类似于原始类型数据之间的拷贝，是独立的，互不影响。
举例来说：

// 1.js 导出
let name = "aa";

// 2s以后修改name
setTimeout(() => {
  console.log("2s后在导出文件进行修改");
  name = "hahaha";
}, 2000);

module.exports = name;


// 2.js 导入
const m1 = require("./1.js");
console.log(m1);

// 4s以后输出m1,看下导出文件1.js的修改，有没有对这里产生影响
setTimeout(() => {
  console.log('导入文件中没有影响',m1);
}, 4000);

输出

aa
2s后在导出文件进行修改
导入文件中没有影响 aa
导出的是对象类型时

假设导出的对象是一个对象类型，对象内部的属性有原始类型，也有复杂类型时。

// 1.js 导出
let name = "aa";
let age = 20;
let friends = {
  name: "zs",
  age: 22,
  score: [10, 20, 30],
};

module.exports = {
  name,
  age,
  friends,
};

//修改
setTimeout(() => {
  module.exports.name = "jjj";
  module.exports.friends.age = 100;
}, 2000);


// 2.js 导入
const m1 = require("./1.js");
console.log(m1);

setTimeout(() => {
  console.log(m1);
}, 3000);

输出

{
  name: 'aa',
  age: 20,
  friends: { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
}
{
  name: 'jjj',
  age: 20,
  friends: { name: 'zs', age: 100, score: [ 10, 20, 30 ] }
}

在1.js中，通过module.exports.的形式修改导出的数据时，可以发现导入文件中的数据也改变了，这是因为module.exports和m1,指向的内部地址是一样的，类似于对象的浅拷贝，相互之间会产生影响。

同样，如果在导入文件中修改导出的对象，导出文件中也会受到影响

// 1.js 导出
let name = "aa";
let age = 20;
let friends = {
  name: "zs",
  age: 22,
  score: [10, 20, 30],
};

module.exports = {
  name,
  age,
  friends,
};

setTimeout(() => {
  console.log("导出文件中的源导出数据", module.exports);
}, 3000);



// 2.js 导入
const m1 = require("./1.js");
console.log("初始导入对象", m1);

setTimeout(() => {
  console.log("导入文件中修改导出对象-----");
  m1.name = "2.js";
  console.log("修改完成");
}, 2000);

输出

初始导入对象 {
  name: 'aa',
  age: 20,
  friends: { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
}
导入文件中修改导出对象-----
修改完成
导出文件中的源导出数据 {
  name: '2.js',
  age: 20,
  friends: { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
}
导入的时候使用解构赋值

在导入文件的时候，我们直接解构对象：

const { name, age, friends } = require("./1.js");
console.log("初始导入对象", name, age, friends);

现在的代码含义是，导入1.js中的导出对象，同时我们使用了对象解构，在2.js中也定义了name,age,friends变量，然后他们被赋值为了导出对象中的对应值。
这时候就类似于进行浅拷贝

由于name,age都是原始类型，直接会拷贝一份，如果去修改导出文件的值，导入文件不受影响

// 1.js 导出
let name = "aa";
let age = 20;
let friends = {
  name: "zs",
  age: 22,
  score: [10, 20, 30],
};

module.exports = {
  name,
  age,
  friends,
};

setTimeout(() => {
  module.exports.name = "haha";
  console.log(module.exports);
}, 2000);


// 2.js 导入
const { name, age, friends } = require("./1.js");
console.log("初始导入对象", name, age, friends);

setTimeout(() => {
  console.log(name);
}, 3000);

输出：

初始导入对象 aa 20 { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
{
  name: 'haha',
  age: 20,
  friends: { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
}
aa

而friends是对象类型，如果我们在2.js中修改，也会反映到1.js中：

// 1.js 导出
let name = "aa";
let age = 20;
let friends = {
  name: "zs",
  age: 22,
  score: [10, 20, 30],
};

module.exports = {
  name,
  age,
  friends,
};

setTimeout(() => {
  console.log("导出文件中的源导出数据", module.exports);
}, 3000);


// 2.js 导入
const { name, age, friends } = require("./1.js");
console.log("初始导入对象", name, age, friends);

setTimeout(() => {
  console.log("导入文件中修改导出对象-----");
  friends.age = -1;
  console.log("修改完成");
}, 2000);

输出

初始导入对象 aa 20 { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
导入文件中修改导出对象-----
修改完成
导出文件中的源导出数据 {
  name: 'aa',
  age: 20,
  friends: { name: 'zs', age: -1, score: [ 10, 20, 30 ] }
}

这是因为friends和module.exports.friends实际上指向的地址是一样的。

总结一下，实际上通过require()导入对象时，会执行一次文件，然后返回的是导出对象值的拷贝，如果是基本类型，就是复制了一份，如果是对象类型，就是返回了导出对象module.exports的内存地址。

整体给我的感觉就类似于浅拷贝。

commonjs是在代码运行时加载，因为commonjs是导出的整个对象，需要在脚本运行完成后才能生成
commonjs使用的是同步加载模块方式，require()的文件需要执行一遍。当文件都在服务器端时，就类型于文件都在我们本地，读取和执行都很快。
如果说是浏览器端，浏览器需要向服务器请求这些js文件，还需要下载文件，然后去执行文件，如果文件中引入了其他文件，又需要下载执行，这就会很耗费时间 ，所以在浏览器环境下我们不适用这种模块化方案，采用的是ESModule.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1951162.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【算法】分布式共识Paxos

【算法】分布式共识Paxos

一、引言 在分布式系统中，一致性是至关重要的一个问题。Paxos算法是由莱斯利兰伯特（Leslie Lamport）在1990年提出的一种解决分布式系统中一致性问题的算法。 二、算法原理 Paxos算法的目标是让一个分布式系统中的多个节点就某个值达成一致。算…
阅读更多...
LoRaWAN设备的两种入网方式（ABP和OTAA）

LoRaWAN设备的两种入网方式（ABP和OTAA）

目录 一、OTAA 1、名词解释 2、入网流程 二、ABP 三、两种入网方式的比较 一、OTAA 1、名词解释 （1）AppEUI：64位（8字节）的唯一标识符，用于标识特定的应用程序或组织（如果用的是chirpstac…
阅读更多...
Linux的yum源安装MySQL5.7

Linux的yum源安装MySQL5.7

linux的yum源安装MySQL5.7 一、MySQL 1、简介 MySQL 是一种流行的关系型数据库管理系统（RDBMS），由瑞典公司 MySQL AB 开发，后来被 Oracle Corporation 收购。它是一个开源软件，提供了高效、稳定和可靠的数据管理解决…
阅读更多...
VLAN与三层交换机

VLAN与三层交换机

文章目录 VLAN的功能与优势VANE优势基于端口划分 VLAN的优先级最低，是最常用的VLAN划分方式。 VLAN的范围![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f3f61b8a05ac46a5be263b38816db79f.png)VLAN的帧格式交换网络中的链路类型 交换机的链路类型端口类…
阅读更多...
笔试编程算法题笔记（三 C++代码）

笔试编程算法题笔记（三 C++代码）

1.kotori和n皇后 题意简单来说就是，在一个无穷大的棋盘上，不断插入k个皇后，皇后们如果在 同一行，同一列，在一个45主对角线 在一个135副对角线上，就可以互相攻击。 我们需要判断在第i个皇后插入后&#xff…
阅读更多...
Codeforces 903 div3 A-F

Codeforces 903 div3 A-F

A 题目分析 数据范围很小&#xff0c;暴力枚举即可&#xff0c;然后给字符串x的长度设置一个上限&#xff0c;我设了50&#xff0c;因为n*m<25&#xff0c;多一倍够用了 C代码 #include<iostream> using namespace std; void solve(){int n,m;string x,s;cin>>…
阅读更多...
视频怎么加密？常见的四种视频加密方法和软件

视频怎么加密？常见的四种视频加密方法和软件

视频加密是一种重要的技术手段&#xff0c;用于保护视频内容不被未经授权的用户获取、复制、修改或传播。在加密过程中&#xff0c;安企神软件作为一种专业的加密工具&#xff0c;可以发挥重要作用。 以下将详细介绍如何使用安企神软件对视频进行加密&#xff0c;并探讨视频加密…
阅读更多...
VUE3学习第三篇：报错记录

VUE3学习第三篇：报错记录

1、在我整理好前端代码框架后&#xff0c;而且也启动好了对应的后台服务&#xff0c;访问页面&#xff0c;正常。 2、报错ReferenceError: defineModel is not defined 学到这里报错了 在vue网站的演练场&#xff0c;使用没问题 但是在我自己的代码里就出问题了 3、watchEffec…
阅读更多...
等级保护测评解决方案

等级保护测评解决方案

什么是等级保护测评&#xff1f; 网络安全等级保护是指对国家重要信息、法人和其他组织及公民的专有信息以及公开信息和存储、传输、处理这些信息的信息系统分等级实行安全保护&#xff0c;对信息系统中使用的信息安全产品实行按等级管理&#xff0c;对信息系统中发生的信息安全…
阅读更多...
【NPU 系列专栏 3 -- NVIDIA 的 H100 和 H200 的算力介绍】

【NPU 系列专栏 3 -- NVIDIA 的 H100 和 H200 的算力介绍】

请阅读【嵌入式及芯片开发学必备专栏】 文章目录 NVIDIA H100 和 H200 的算力NVIDIA H100 芯片的算力NVIDIA H100 算力参数NVIDIA H100 举例 NVIDIA H200 芯片的算力NVIDIA H200 算力参数 H200 的内存和带宽提升H200 推理吞吐量提高H200 性能提升NVIDIA H200 举例Summary NVIDI…
阅读更多...
DLMS/COSEM中公开密钥算法的使用_椭圆曲线加密法

DLMS/COSEM中公开密钥算法的使用_椭圆曲线加密法

1.概述 椭圆曲线密码涉及有限域上的椭圆曲线上的算术运算。椭圆曲线可以定义在任何数字域上(实数、整数、复数)&#xff0c;但在密码学中&#xff0c;椭圆曲线最常用于有限素数域。 素数域上的椭圆曲线由一组实数(x, y)组成&#xff0c;满足以下等式: 方程的所有解的集合构成…
阅读更多...
linux 查看当前目录下占用空间命令

linux 查看当前目录下占用空间命令

du -sh */
阅读更多...
C 语言动态链表

C 语言动态链表

线性结构->顺序存储->动态链表 一、理论部分 从起源中理解事物&#xff0c;就是从本质上理解事物。 -杜勒鲁奇 动态链表是通过结点&#xff08;Node&#xff09;的集合来非连续地存储数据&#xff0c;结点之间通过指针相互连接。 动态链表本身就是一种动态分配内存的…
阅读更多...
【C++】C++应用案例-翻转数组

【C++】C++应用案例-翻转数组

翻转数组&#xff0c;就是要把数组中元素的顺序全部反过来。比如一个数组{1,2,3,4,5,6,7,8}&#xff0c;翻转之后就是{8,7,6,5,4,3,2,1}。 &#xff08;1&#xff09;另外创建数组&#xff0c;反向填入元素 数组是将元素按照顺序依次存放的&#xff0c;长度固定。所以如果想要…
阅读更多...
全网最详细Gradio教程系列5——Gradio Client: javascript

全网最详细Gradio教程系列5——Gradio Client: javascript

全网最详细Gradio教程系列5——Gradio Client: javascript 前言本篇摘要5. Gradio Client的三种使用方式5.2 使用Gradio JavaScript Client5.2.1 安装1. npm方式2. CDN方式3. 在线运行环境&#xff1a;PLAYCODE 5.2.2 连接到Gradio程序1. 通过URL或SpaceID连接2. 辅助&#xff…
阅读更多...
RuoYi-Vue-Plus (多数据源注解使用、【手动、拦截器】切换数据源)

RuoYi-Vue-Plus (多数据源注解使用、【手动、拦截器】切换数据源)

接上文多数据源配置&#xff1a; RuoYi-Vue-Plus (多数据源配置)-CSDN博客 一、功能演示 代码生成菜单页面&#xff0c; 展示数据源切换 查询主库 查询从库 二、前端传参切换数据源 页面路径&#xff1a; src/views/tool/gen/index.vue 搜索框如下&#xff1a;下面4发送请求时…
阅读更多...
SPICE | 常见电路SPICE模型总结

SPICE | 常见电路SPICE模型总结

Ref. 1. CMOS VLSI Design: A Circuits and Systems Perspective 目录 0 基础 1 反相器 inverter 2 缓存器 buffer 3 NAND 4 NOR 5 传输门 Transmission gate 6 三态反相器 Tristate Inverter 7 选择器 Multiplexers 8 D锁存器 D Latch 9 D触发器 D Flip-Flop 0 基础…
阅读更多...
Linux文件描述符

Linux文件描述符

前言 我们以前就听过"Linux下一切皆文件"&#xff0c;但是说实话我们只是记住了这句话&#xff0c;实质是不理解的&#xff01;本期我们就会解释&#xff01; 本期内容介绍 • 回顾C语言文件操作 • 系统I/O操作接口 • 文件描述符fd • 理解Linux下一切皆文件 • …
阅读更多...
如何设置postgresql数据库的账户密码

如何设置postgresql数据库的账户密码

说明&#xff1a;在我的云服务器上&#xff0c;postgres是使用yum的方式安装的&#xff0c;不需要设置postgres账户的密码&#xff0c;本文介绍安装后如何手动设置postgres账户的密码&#xff1b; postgres数据库安装&#xff0c;参考下面这篇文章&#xff1a; PostgreSQL安装…
阅读更多...
构建基于Spring Boot的SaaS应用

构建基于Spring Boot的SaaS应用

引言 在设计和实现SaaS系统时&#xff0c;安全性是至关重要的考虑因素。一个全面的安全策略不仅能保护系统免受恶意攻击&#xff0c;还能确保用户数据的机密性、完整性和可用性。本文将探讨在SaaS架构中实现数据加密、敏感信息保护以及应用安全的最佳实践和技术方案&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023