common.js和es6中模块引入的区别

common.js

CommonJS 是一种模块系统,主要用于 Node.js 环境。它使用 require 函数来引入模块,并使用 module.exports 来导出模块。

语法:

  • 导出模块:
// moduleA.js
const name = 'Jo';
module.exports = name;// 或者导出一个对象
const person = { name: 'Jo', age: 18 };
module.exports = person;
  • 引入模块:
// main.js
const name = require('./moduleA');
console.log(name); // 'John'// 引入对象
const person = require('./moduleA');
console.log(person.name); // 'Jo'
console.log(person.age);  // 18

CommonJS的特点

  1. 同步加载模块:CommonJS 使用同步的方式加载模块,这意味着当一个模块被加载时,它会阻塞后续代码的执行,直到该模块完全加载并执行完毕。
// 模块A
console.log("Module A is being executed.");
module.exports = "This is module A.";// 入口文件
console.log("Before requiring module A.");
const moduleA = require('./moduleA');
console.log("After requiring module A.")
  1. 模块导出:在 CommonJS 中,使用 module.exports 来导出模块的内容。这可以是任何类型的值,包括对象、函数、类等。
// 模块B
const sum = (a, b) => a + b;
module.exports = sum;// 入口文件
const sumFunction = require('./moduleB');
console.log(sumFunction(2, 3)); // 输出 5
  1. 模块导入:使用 require() 函数来导入其他模块的内容。例如,const moduleA = require(‘./moduleA’) 将会加载 moduleA.js 并将其导出的内容赋值给 moduleA。

  2. 单例模块:在 CommonJS 中,每个模块只会被加载一次,并且在内存中缓存,之后再次导入该模块时,都会返回相同的实例。这样可以减少资源消耗并提高性能。

// 模块C
class MyClass {constructor() {this.counter = 0;}incrementCounter() {this.counter++;}
}module.exports = new MyClass();// 入口文件
const singletonInstance1 = require('./moduleC');
const singletonInstance2 = require('./moduleC');singletonInstance1.incrementCounter();
console.log(singletonInstance2.counter); // 输出 1
  1. 服务器端使用广泛:由于 CommonJS 最初是为服务器端 JavaScript(如 Node.js)设计的,因此在服务器端 JavaScript 开发中得到了广泛应用。

  2. 适用于大型应用:CommonJS 适用于构建大型应用程序,因为它可以帮助将代码组织成模块,并且提供了清晰的模块导入和导出机制,使得代码更易于维护和管理。

总的来说,CommonJS 提供了一种简单而强大的模块化方案,尤其适用于服务器端 JavaScript 开发以及构建大型应用程序。

ES6 模块

ES6 模块系统是 ECMAScript 标准的一部分,使用 import 和 export 语法来定义模块,广泛用于现代前端开发以及一些支持 ES6 的服务器环境。

语法

  • 导出模块:
// moduleA.js
export const name = 'Jo';// 导出默认值
const person = { name: 'Jo', age: 18 };
export default person;
  • 引入模块:
// main.js
import { name } from './moduleA';
console.log(name); // 'Jo'// 引入默认导出
import person from './moduleA';
console.log(person.name); // 'Jo'
console.log(person.age);  // 18

ES6 模块的特点

  1. 静态导入和导出:ES6 模块的导入和导出是静态的,意味着模块的导入和导出关系在代码解析阶段就能确定,而不是在运行时。这使得工具可以更容易地分析和优化模块之间的依赖关系。

  2. 单例导入:与 CommonJS 不同,ES6 模块导入的是模块的绑定值的引用,而不是导出对象本身的副本。这意味着在不同模块中引用相同导出的变量,实际上引用的是同一个内存地址,这种行为被称为单例导入。

  3. 导出方式:ES6 模块的导出方式更加灵活,可以一次导出多个变量或函数,并且支持默认导出和命名导出两种方式。

// moduleA.js
export const name = "John";
export const age = 30;// moduleB.js
const greeting = "Hello";function sayHello() {console.log(`${greeting}, ${name}! You are ${age} years old.`);
}export { greeting, sayHello };
  1. 导入方式:ES6 模块的导入语法使用了 import 关键字,并支持默认导入、命名导入和命名空间导入。
// main.js
import { name, age } from './moduleA';
import { greeting, sayHello } from './moduleB';console.log(`${greeting}, ${name}! You are ${age} years old.`);
sayHello();
  1. 异步加载:ES6 模块支持动态导入,可以在运行时动态加载模块。这种异步加载的方式能够提高应用程序的性能和响应速度。
// main.js
document.getElementById('button').addEventListener('click', async () => {const module = await import('./moduleA');console.log(module.name); // 输出 "John"
});
  1. 编译时优化:由于 ES6 模块的导入和导出关系在代码解析阶段就能确定,因此工具可以进行更有效的编译时优化,例如无用代码删除(tree shaking)等。

  2. 浏览器支持:与 CommonJS 不同,ES6 模块是 ECMAScript 标准的一部分,因此得到了浏览器原生支持,无需使用工具转换成其他格式。

总的来说,ES6 模块具有静态导入和导出、单例导入、灵活的导出方式、异步加载等特点,适用于现代 JavaScript 应用程序的开发,并且在浏览器和 Node.js 等环境中都得到了广泛应用。

CommonJS和ES6的兼容性和转换

CommonJS 是 Node.js 等环境中使用的模块系统,而 ES6 模块是 ECMAScript 2015 引入的新的模块化系统。它们之间存在一些兼容性和转换的问题。

  1. 兼容性
  • 在 Node.js 环境中,通常原生支持 CommonJS 模块,但对于 ES6 模块需要使用 --experimental-modules 标志启用,并且语法上也有一些不同。
  • 在浏览器环境中,原生支持 ES6 模块,但对于 CommonJS 模块,需要使用工具如 Browserify 或 Webpack 进行转换后才能在浏览器中运行。
  1. 转换
  • 使用 Babel 可以将 ES6 模块转换为 CommonJS 或 AMD 格式,以便在不支持 ES6 模块的环境中运行。
  • 对于 Node.js 中的 CommonJS 模块,可以使用工具将其转换为 ES6 模块,以便在支持 ES6 模块的环境中使用。
// ES6 模块
// es6Module.js
export const foo = "Hello";// 转换为 CommonJS 格式
// commonJSModule.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.foo = "Hello";

通过使用 Babel 进行转换,可以让不同模块系统之间的代码在不同环境中运行和使用。在实际开发中,通常会根据目标环境和需求选择合适的模块系统,并使用相应的工具进行转换和兼容性处理。

使用场景

CommonJS 的使用场景:

  1. 服务器端开发:Node.js 原生支持 CommonJS 模块,因此在服务器端开发中,特别是使用 Node.js 进行后端开发时,常常会选择使用 CommonJS 模块。
  2. 同步加载:CommonJS 模块是同步加载的,适合于服务器端的同步加载模块的环境。
  3. 动态加载:CommonJS 允许在运行时动态加载模块,这使得它在某些需要动态加载的情况下更为适用。
  4. 模块化封装:CommonJS 模块更适合于封装和组织代码,尤其是对于那些需要将功能打包为模块并在不同项目中重复使用的情况。

ES6 模块的使用场景:

  1. 浏览器端开发:现代浏览器原生支持 ES6 模块,因此在前端开发中,特别是使用现代浏览器的前端开发时,常常会选择使用 ES6 模块。
  2. 静态加载:ES6 模块是静态加载的,这意味着在解析阶段就已经确定模块的依赖关系,适合于前端项目中对模块依赖有明确要求的情况。
  3. 异步加载:ES6 模块支持异步加载,可以通过 import() 函数实现按需加载,这使得它在前端项目中更适用于动态加载和按需加载的场景。
  4. 模块化打包:使用工具如 Webpack、Rollup 等可以将 ES6 模块打包成浏览器可识别的代码,这样可以将多个模块打包成一个或多个文件,减少网络请求,提高加载效率。

综上所述,CommonJS 更适用于服务器端开发和同步加载的场景,而 ES6 模块更适用于浏览器端开发和静态加载的场景。在选择使用模块系统时,应根据具体的项目需求和目标环境做出合适的选择。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

⌈ 传知代码 ⌋ 多模态COGMEN详解

💛前情提要💛 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间,对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…

【Vue】智慧商城

步骤一般都是: 静态结构 > 封装接口 > 路由获取参数 > 获取数据 动态渲染 先封装接口再路由获取参数的原因是因为,只有先封装好了接口,才能知道我们需要哪些参数 接口文档:https://apifox.com/apidoc/shared-12ab6b18-a…

Java——IO流(一)-(2/9):File类的常用方法(判断文件类型、获取文件信息、创建删除文件、遍历文件夹)

目录 常用方法1:判断文件类型、获取文件信息 方法 实例演示 常用方法2:创建文件、删除文件 方法 实例演示 常用方法3:遍历文件夹 方法 实例演示 常用方法1:判断文件类型、获取文件信息 方法 File提供的判断文件类型、获…

【Redis】Redis的数据过期策略有哪些

Redis 提供了多种数据过期策略,用于管理存储在其中的数据的生命周期。数据过期策略决定了何时以及如何删除过期的数据。主要的策略有以下几种: 1. 定时删除(Timed Deletion) 在设置键的过期时间时,Redis 会创建一个定…

【C#线程设计】3:threadpool

实现: (1).控件:group Box,text Box,check Box,label,botton,richtextbox 控件拉取见:https://blog.csdn.net/m0_74749240/article/details/139409510?spm1…

插卡式仪器模块:数据记录模块(插卡式)

• 32 位分辨率 • 250 KSPS 采样率 • 可以同时并且连续地记录两个通道的电压输入 • 实时上传原始数据至 PC 端 通道22输入阻抗电压22 kΩ10 MΩ电流0.2 Ω输入范围电压 250 mV 4.5 V电流1.5 A耦合DCDC带宽450 Hz385 HzADC 分辨率32 Bits24 Bits采样率10 kSPS250 kSPS测量…

kafka集成SpringBoot api编写教程

1.新建项目 用的idea是20222.1.3版本,没有Spring Initializr 插件,不能直接创建springboot项目 可以在以下网址创建项目,下载后解压,然后用idea打开项目即可 1.1 在 https://start.spring.io/ 上创建项目 1.2上传到linux&#x…

知识图谱的应用---智能公安

文章目录 智慧公安典型应用 智慧公安 智能公安是利用互联网、物联网、人工智能、云计算、智能引擎、视频技术、知识图谱等技术为支撑,以公安信息化为核心,通过互联化、物联化、智能化的方式,促进公安系统各个功能模块高度集成、协调运作&…

【Redis】Redis实现高性能的原因

Redis 作为一个单线程的数据库,能够达到高性能的关键在于其设计上的几个方面。以下是 Redis 快速的几个主要原因: 1. 内存存储 Redis 是一个内存数据库,所有数据都存储在内存中。内存的访问速度远远快于磁盘,所以这使得读写操作…

DataGridView *星号行

这个问题可能是因为你的 DataGridView 控件中的 AllowUserToAddRows 属性被设置为 true,导致在最后一行出现了一个星号行。这个星号行实际上是 DataGridView 控件中的“空行”,它会在最后一行自动添加,以便用户可以添加新的行。 要解决这个问…

第53集《摄大乘论》

《摄大乘论》,和尚尼慈悲、诸位法师、诸位居士,阿弥陀佛!(阿弥陀佛!)请大家打开《讲义》第一七八页,乙七、增上心学分。 这一科是正宗分的第七科,讲到增上心学。我们在前面花了很多的时间,来介…

stm32之USMART调试组件的使用

一、什么是USMART? USMART是正点原子团队为其STM32开发平台开发的一种类似linux的shell的调试工具。具体工作过程是通过串口发送命令给单片机,然后单片机收到命令之后调用单片机里面对应的相关函数,并执行,同时支持返回结果。 二、USMART调…

Vue.js 学习总结(8)—— Vue 3 的 Teleport 特性,让你实现跨组件传输内容

什么是 Teleport? 在 Vue 3 中,Teleport 是一个新的内置组件,它允许你将子组件或 DOM 元素渲染到指定的 DOM 节点之外。简而言之,你可以将某个组件“传送”到另一个地方,而不必让它们局限于父组件的 DOM 树结构中。 …

ReactRouter——路由配置、路由跳转、带参跳转、新route配置项

目录 写在前面 (一)初步使用router 1.安装react-router-dom 2.创建router结构 3.嵌套路由 4.配置not found页面 (1)确切路由报错页面 (2)未配置路由报错页面 5.重定向 (二)路由跳转 1.组件跳转 2.NavLink 3.js跳转 (三)传递参数 1.searchParams(query)参数 2…

这两款kimi和豆包插件,用来辅助文献阅读和总结,太香了!娜姐亲测好用

我是娜姐 迪娜学姐 ,一个SCI医学期刊编辑,探索用AI工具提效论文写作和发表。 ChatGPT刚出来的时候,几款速读PDF的AI工具ChatDoc、ChatPDF也跟着火了起来,可见大家对于速读文献、总结文档需求很高。 我记得ChatPDF只有几次免费机会…

Follow Carl To Grow|【LeetCode】654.最大二叉树,617.合并二叉树,700.二叉搜索树中的搜索,98.验证二叉搜索树

【LeetCode】654.最大二叉树 题意:给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点,其值为 nums 中的最大值。 递归地在最大值 左边 的 子数组前缀上 构建左子树。 递归地在最大值 右边 的 子数组后缀…

2024.6.9 七

Python的time库 先导入库 import time相关函数 time.time() 返回当前时间的时间戳(一个记录时间的浮点数),从1970年开始算的 time.localtime(sec) 返回一个指定时间戳(sec)的struct_time对象,是一个元组封装起来的,默认是当地时间 struct_time对象 tm_year 年 tm_mon 月 tm_…

opencv--使用opencv实现旋转角度的模板匹配

下面的例子是简单的使用opencv 实现的模板匹配流程,其中时间性能和精确度还需要调整,如果直接使用会出问题,所以这个只是例子,根据代码原理可以实现尺度变化的模板匹配和旋转尺度变化同时,具体根据实现的旋转代码进一步…

Nacos的配置中心

1.前言 除了注册中心和负载均衡之外, Nacos还是⼀个配置中心, 具备配置管理的功能. Namespace 的常用场景之一是不同环境的配置区分隔离, 例如开发测试环境和⽣产环境的配置隔离。 1.1 为什么需要配置中心? 当前项目的配置都在代码中,会存…