JavaScript 中的 CommonJS (CJS) 与 ECMAScript 模块 (ESM)

javascript 中的 commonjs (cjs) 与 ecmascript 模块 (esm)

javascript 模块在组织代码、增强可重用性和提高应用程序的可维护性方面发挥着至关重要的作用。广泛使用的两个主要模块系统是 commonjs (cjs) 和 ecmascript modules (esm)。了解它们的差异和功能是在您的项目中有效利用它们的关键。

commonjs (cjs)

commonjs 是最初为 node.js 环境设计的模块系统。它强调模块的简单性和同步加载。

commonjs 导出/导入模块

commonjs 中的模块使用 module.exports 导出值、对象或函数。

1.默认导出/导入

// logger.jsfunction log(message) {    console.log(message);}module.exports = log; // default export// index.jsconst log = require('./logger');log('this is a log message.'); // output: this is a log message.

登录后复制

2.命名导出/导入

// math.jsfunction add(a, b) {    return a + b;}function subtract(a, b) {    return a - b;}module.exports = { add, subtract }; // named exports// index.jsconst { add, subtract } = require('./math');console.log(add(5, 3)); // output: 8console.log(subtract(5, 3)); // output: 2

登录后复制

ecmascript 模块 (esm)

esm,在 es6(es2015)中引入,是 javascript 的标准化模块系统。它支持同步和异步模块加载,并且在现代浏览器和具有某些配置的 node.js 中原生支持。

立即学习“Java免费学习笔记(深入)”;

ecmascript 导出模块

esm 使用导出语句来导出值、对象或函数。

1.默认导出/导入

// utils.mjs (note the .mjs extension for esm)function formatname(name) {    return `mr./ms. ${name}`;}export default formatname;// index.mjsimport formatname from './utils.mjs';console.log(formatname('john')); // output: mr./ms. john

登录后复制

2.命名出口

// operations.mjsexport function multiply(a, b) {    return a * b;}export function divide(a, b) {    return a / b;}// index.mjsimport { multiply, divide } from './operations.mjs';console.log(multiply(4, 2)); // output: 8console.log(divide(10, 2)); // output: 5

登录后复制

3. ecmascript 模块中的混合导出样式

// mixedExports.mjsfunction greet(name) {    return `Hello, ${name}!`;}export default greet;export function goodbye(name) {    return `Goodbye, ${name}!`;}// index.mjsimport sayHello, { goodbye } from './mixedExports.mjs';console.log(sayHello('Alice')); // Output: Hello, Alice!console.log(goodbye('Bob')); // Output: Goodbye, Bob!

登录后复制

commonjs 和 esm 之间的主要区别

语法:commonjs 使用 require() 和 module.exports,而 esm 使用 import 和 export 语句。加载:commonjs 模块是同步加载的,而 esm 支持同步和异步加载环境:commonjs 主要在 node.js 中使用,而 esm 在浏览器中原生支持,并且可以通过特定配置(–experimental-modules 标志或 .mjs 文件扩展名)在 node.js 中使用。

兼容性和使用

node.js:commonjs 由于其在 node.js 环境中的长期支持和简单性而仍然流行。浏览器:随着浏览器越来越多地支持 esm,esm 越来越受欢迎,提供更好的性能和模块化代码加载。

结论

在 commonjs 和 ecmascript 模块之间进行选择取决于您的项目环境和要求。虽然 commonjs 对于 node.js 后端开发来说非常强大,但 esm 提供了跨浏览器和现代 node.js 应用程序的互操作性。了解这些模块系统使开发人员能够有效地利用 javascript 的模块化功能。

通过利用 commonjs 或 esm,开发人员可以增强代码组织、提高项目可扩展性并促进 javascript 项目中的协作。

以上就是JavaScript 中的 CommonJS (CJS) 与 ECMAScript 模块 (ESM)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2673374.html

(0)
上一篇 2025年3月7日 13:40:16
下一篇 2025年3月3日 18:24:23

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 监控和优化 Google Core Web Vitals 的技巧

    google core web vitals 是重要指标,重点关注用户体验的三个关键方面:加载性能、交互性和视觉稳定性。这些指标对于确保您的网站向用户提供快速、响应灵敏且视觉稳定的体验至关重要。在这篇博文中,我们将探索监控和优化 googl…

    2025年3月7日
    200
  • 提高 Web 性能:提高网站速度的技巧和工具

    随着 Web 应用程序变得越来越复杂,性能优化至关重要。提高网络性能可以增强用户体验、SEO 排名和整体满意度。本文探讨了各种技巧和工具,可帮助您优化网站速度。 识别性能瓶颈:使用 Google Lighthouse、WebPageTest…

    2025年3月7日
    200
  • Javascript 中的 Define():清晰的解释

    最初发布于makemychance.comjavascript 是一种多功能且功能强大的语言,使开发人员能够创建动态和交互式 web 应用程序。在其众多功能中,定义和管理模块的能力对于构建可扩展和可维护的代码库至关重要。在此过程中至关重要的…

    2025年3月7日
    200
  • 浏览器js脚本如何运行 js脚本怎么在浏览器中运行步骤

    在现代浏览器中运行 JavaScript 脚本:在 HTML 文档中通过 标签或引用外部脚本文件来包含 JavaScript 代码。浏览器会在页面加载时自动执行包含的脚本,对于外部脚本,将在脚本文件加载后进行。浏览器会解析和执行脚本中的语句…

    2025年3月7日
    200
  • 让我们了解 CJS 和 MJS 之间的区别

    术语cjs(commonjs)和mjs(es模块)指的是javascript中用于将代码组织成可重用组件的两个模块系统。两者的比较如下: 1. commonjs (cjs) 语法: commonjs 使用 require() 加载模块并使用…

    2025年3月7日
    200
  • React 基础知识第 2 部分

    以下是一些更高级的 react 概念和术语: 12。上下文 api context api 提供了一种通过组件树传递数据的方法,而无需在每个级别手动传递 props。它对于主题、身份验证或用户数据等全局数据很有用。 示例: const th…

    2025年3月7日
    200
  • 如何处理 Cypress 中的动态下拉菜单

    介绍 处理动态下拉菜单是现代 web 应用程序中的一个常见挑战,特别是当下拉选项是从 api 动态获取或基于用户交互加载时。当使用 cypress 对此类下拉菜单进行自动化测试时,您需要确保选择正确的选项,即使它们是在延迟一段时间后渲染的。…

    2025年3月7日
    200
  • 解锁性能:了解总阻塞时间 (TBT)

    在 Web 开发领域,优化网站性能是提供无缝用户体验的关键因素。总阻塞时间 (TBT) 是一个重要的 Web 性能指标,用于量化页面加载过程中交互延迟的程度。在本文中,我们将深入探讨 TBT 的概念,探讨其在衡量用户体验方面的重要性,并讨论…

    2025年3月7日
    200
  • 使用 Nextjs 构建单页应用程序 (SPA)

    next.js 是一个强大的 react 框架,它提供了多种用于创建现代和优化的 web 应用程序的工具,例如服务器端渲染 (ssr) 和静态页面生成 (ssg)。然而,它还支持创建单页应用程序(spa),提供了根据每种需求选择最佳渲染策略…

    2025年3月7日
    200
  • 如何引入js

    要引入 JavaScript,可以使用内联脚本、外部脚本或模块化引入。内联脚本直接嵌入代码,而外部脚本将代码保存在单独文件中并使用 标签引用。defer 和 async 属性分别延迟和异步执行脚本。对于较大的代码库,可以使用 CommonJ…

    2025年3月7日
    200

发表回复

登录后才能评论