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免费学习笔记(深入)”;

豆包AI编程 豆包AI编程

豆包推出的AI编程助手

豆包AI编程 1697 查看详情 豆包AI编程

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)的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月26日 23:06:39
下一篇 2025年11月26日 23:07:01

相关推荐

  • 基于PHP和GET参数实现HTML表格数据动态筛选教程

    本文将指导如何使用PHP和GET参数,实现HTML表格中数据库数据的动态筛选。通过在页面上设置筛选按钮,用户可以根据特定状态(如在线、离线)来实时刷新并显示相应的数据行,有效管理和展示大量信息。 在web应用中,展示来自数据库的大量数据并提供筛选功能是常见的需求。当用户需要根据特定条件(例如员工状态…

    2025年12月11日
    000
  • PHP中JSON文件缓存与客户端刷新策略

    本文深入探讨了PHP应用中JSON文件在客户端浏览器上的缓存问题及其解决方案。当本地JSON数据更新时,客户端浏览器可能因缓存机制而无法获取最新数据,导致用户需要手动清除缓存。文章详细介绍了如何利用PHP的filemtime函数生成动态版本化URL,实现高效的缓存失效(Cache Busting),…

    2025年12月11日
    000
  • Symfony中构建动态级联表单:以汽车搜索为例的AJAX实现

    本文将详细介绍如何在Symfony框架中实现一个动态级联选择表单,以汽车搜索为例。针对多对一关联数据(如车型、品牌、型号)的逐级筛选需求,我们将探讨如何利用AJAX技术,在用户选择一个选项后,异步加载并更新后续下拉框的内容,从而避免页面重载,提升用户体验,并提供完整的控制器、表单类型及前端JavaS…

    2025年12月11日
    000
  • 结合SQL联接与外部API实现基于类型和距离的数据筛选

    本文探讨了如何通过SQL多表联接高效地检索关联数据,并结合外部API(如Google Distance Matrix API)解决数据库内部难以直接处理的复杂业务逻辑,例如基于地理距离的筛选。教程详细阐述了SQL INNER JOIN 和 FIND_IN_SET 函数的应用,以及在应用程序层(PHP…

    2025年12月11日
    000
  • php语言怎样实现简单的搜索引擎功能 php语言搜索引擎实现的基础教程技巧

    实现简单php搜索引擎的核心是内容索引与查询,通过数据库存储文章信息并利用sql进行关键词匹配;2. 高效索引可通过mysql的fulltext索引提升搜索速度,替代低效的like操作;3. 可选关键词提取与倒排索引结构(keywords表和article_keywords表)支持更精细的搜索控制;…

    2025年12月11日 好文分享
    000
  • 利用 jQuery Datepicker 屏蔽数据库中的日期

    本文介绍了如何使用 jQuery Datepicker 结合 PHP 从数据库中读取日期,并将其用于屏蔽 Datepicker 中不可用的日期。通过优化 PHP 返回的数据格式和 JavaScript 的异步处理,可以有效地提高 Datepicker 的性能和用户体验。 实现步骤 PHP 端数据准备…

    2025年12月11日
    000
  • 爬虫如何编写?DOM解析与数据抓取

    爬虫编写核心是两步:抓取网页内容和解析提取数据。1. 发起http请求获取html,可用requests库实现;2. 使用解析工具如beautifulsoup或lxml进行dom解析,并通过css选择器或xpath定位并提取目标数据。对于动态内容,需用selenium或playwright模拟浏览器…

    2025年12月11日 好文分享
    000
  • PHP怎么实现数据缓存穿透 防止缓存穿透的6个有效策略

    缓存穿透是指查询一个不存在的数据,导致每次请求都直击数据库,解决核心是即使查不到也要在缓存层处理以避免流量直接冲击数据库。1. 缓存空对象:若数据库无结果,则缓存空值并设短过期时间,优点简单有效但会占用缓存空间;2. 布隆过滤器:前置判断key是否存在,节省空间但存在误判可能;3. 接口层校验:拦截…

    2025年12月11日 好文分享
    000
  • 博客系统怎么开发?PHP+MySQL实战

    开发博客系统数据库设计需清晰可扩展,核心包括users、posts、comments、categories四张表。users表存储用户信息如id、username、password等;posts表记录文章详情,关联users和categories;comments表管理评论,与posts和users…

    2025年12月11日 好文分享
    000
  • Laravel应用中基于jQuery的Tab页数据懒加载与事件绑定实践

    本文旨在解决Laravel应用中,使用jQuery实现Tab页签数据按需加载时,点击事件失效的问题。通过分析错误的jQuery选择器用法,提供了将HTML元素与JavaScript事件正确关联的解决方案,包括优化HTML结构以支持精确选择,并演示了如何利用jQuery的事件绑定机制实现高效的Tab内…

    2025年12月11日
    000
  • PHPCMS和织梦CMS的评论管理功能对比研究

    phpcms适合需要深度定制评论功能且具备技术团队的项目,织梦cms更适合追求易用性和快速搭建的站点。phpcms在权限控制和模块化设计上更灵活,支持不同内容模型设置独立评论规则,并提供批量审核、关键词过滤等高级功能,适合未来有二次开发需求的场景;而织梦cms集成度高,后台操作直观,自带完善的审核机…

    2025年12月11日 好文分享
    000
  • 动态年份范围选择器在PHP与MySQL中的实现

    本教程详细介绍了如何利用PHP和MySQL构建一个动态的年份范围选择器,用于过滤数据库记录。文章涵盖了从数据库中获取最小和最大年份、生成5年间隔的选项、构建HTML下拉菜单,到处理用户选择并使用SQL的BETWEEN操作符进行数据过滤的全过程。同时强调了使用预处理语句防止SQL注入等安全实践。 1.…

    2025年12月11日
    000
  • 调整PHPCMS的缓存设置以提升网站速度

    调整phpcms缓存设置是提升网站速度最直接且高效的手段。1. 开启html静态化:在后台“系统设置”->“站点管理”中勾选“全站静态化”,发布内容时选择生成静态页,显著降低服务器负载;2. 数据缓存类型选择:默认使用文件缓存,适用于中小型网站;高并发场景建议使用memcache或redis,…

    2025年12月11日 好文分享
    000
  • 为PHPCMS网站添加在线客服插件的方法

    为phpcms网站添加在线客服功能的核心方法是集成第三方客服系统的javascript代码。具体步骤包括:1.选择合适的在线客服服务商,如智齿客服、美洽等;2.注册并获取提供的嵌入式javascript代码;3.登录phpcms后台,进入模板管理,找到页脚footer.html或头部header.h…

    好文分享 2025年12月11日
    000
  • 如何用PHP实现手机端网站新闻列表的异步分类渲染?

    优化手机端新闻列表:PHP异步分类渲染技术 为了提升手机端网站新闻列表的用户体验,我们需要实现点击分类后异步加载新闻列表的功能。本文将详细介绍如何使用PHP结合AJAX技术实现这一功能,即使您没有异步处理经验也能轻松上手。 技术实现:AJAX与PHP的完美结合 该功能的核心在于AJAX技术。用户点击…

    2025年12月11日
    000
  • CI框架中如何异步渲染移动端列表页的分类新闻?

    使用CI框架异步加载移动端分类新闻 本文介绍如何利用CodeIgniter (CI)框架实现移动端列表页分类新闻的异步加载,提升用户体验。 实现步骤: 前端 (JavaScript): 为每个分类标题添加点击事件监听器,并将分类ID作为参数传递。使用AJAX向后端发送请求,获取指定分类的新闻数据。 …

    2025年12月11日
    000
  • 移动端新闻列表异步加载:如何用CodeIgniter实现点击学位异步渲染新闻?

    CodeIgniter移动端新闻列表异步加载 挑战: 构建一个移动端新闻列表页面,点击不同学位类别即可异步加载对应新闻内容。项目基于CodeIgniter框架,但开发者缺乏异步编程经验。 解决方案: 利用AJAX技术实现异步加载: AJAX请求: 用户点击学位类别时,前端通过AJAX发送请求到服务器…

    2025年12月11日
    000
  • 网页访问速度慢怎么办?优化策略有哪些?

    网页访问滞后:优化策略 对于您提到的页面访问缓慢问题,以下一些建议或许对您有所帮助: 1. 减少 HTTP 请求 外部文件引用会导致额外的 HTTP 请求,从而拖慢页面加载速度。尝试使用 CSS 和 JavaScript 压缩工具来减少请求数量,并合并多个资源文件。 2. 缩小代码 缩小代码可以减少…

    2025年12月10日
    000
  • 使用PHP动态填充HTML下拉列表框的教程

    本文详细介绍了如何使用PHP函数动态生成并填充HTML下拉列表框(元素),以取代静态HTML定义。通过一个可复用的PHP函数,您可以根据后端数据(如数据库查询结果)灵活构建下拉选项,并支持设置默认选中项,从而提高代码的可维护性和复用性。 动态生成HTML下拉列表框的需求 在web开发中,经常需要根据…

    2025年12月10日
    000
  • PHP获取目录文件列表并在JavaScript中使用

    本文将介绍如何使用PHP读取指定目录下的所有文件名,并将这些文件名传递给JavaScript代码使用。通过PHP的文件操作函数和JSON编码,我们可以方便地在服务器端获取文件列表,并在客户端利用JavaScript进行进一步处理,例如动态展示文件列表或执行其他相关操作。 PHP获取文件列表 首先,我…

    2025年12月10日
    000

发表回复

登录后才能评论
关注微信