当前位置: 首页 > news >正文

JavaScript:模块化【CommonJS与ES6】

在 JavaScript 编程中,随着项目的复杂性增加,代码的组织和管理变得至关重要。模块化是一种强大的编程概念,它允许我们将代码划分为独立的模块,提高了可维护性和可扩展性。本文将详细介绍 CommonJS 和 ES6 模块,帮助你理解它们的特点和用法。

1. CommonJS 模块化

CommonJS 是一种用于模块化 JavaScript 的标准。它主要用于服务器端的 Node.js 环境,但在浏览器端也可以使用一些工具进行转换。在 CommonJS 中,每个文件都被视为一个模块,可以使用 require 导入其他模块,使用 module.exportsexports 导出变量和函数。

// 导入模块
const math = require('./math');// 使用导入的模块
console.log(math.add(2, 3));
console.log(math.subtract(5, 2));
// math.js 模块
exports.add = (a, b) => a + b;
exports.subtract = (a, b) => a - b;

2. ES6 模块化

ES6 引入了一种原生的模块化系统,使得在现代浏览器和 Node.js 中都可以使用。ES6 模块采用了更简洁和直观的语法,使用 import 导入模块,使用 export 导出变量、函数、类等。

// 导入模块
import { add, subtract } from './math';// 使用导入的模块
console.log(add(2, 3));
console.log(subtract(5, 2));
// math.js 模块
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

3. 区别与特点

  • 加载时机: CommonJS 模块是动态加载的,模块在运行时加载;ES6 模块是静态加载的,在编译时就确定加载关系。

  • 导入和导出: CommonJS 使用 requiremodule.exportsexports 进行导入和导出;ES6 使用 importexport

  • 值的复制: CommonJS 在导入时会复制一份值的副本,后续修改不会影响原模块;ES6 模块在导入时保持引用关系,修改会影响原模块。

  • 异步加载: CommonJS 模块加载是同步的,阻塞了后续代码的执行;ES6 模块加载是异步的,不会阻塞代码执行。

  • 浏览器支持: 浏览器端,ES6 模块需要使用 <script type="module"> 标签,而 CommonJS 需要借助工具进行转换。

4. 如何选择?

在现代 JavaScript 开发中,ES6 模块被广泛采用,因为它更加简洁、直观,并且在浏览器和 Node.js 中都有原生支持。如果你的项目需要兼容多个环境,可以使用工具进行模块转换,将 ES6 模块转换为 CommonJS 模块。

模块化是组织和管理代码的关键,CommonJS 和 ES6 模块是两种不同的模块化标准,各自有其特点和适用场景。通过合理选择和运用这两种模块化方式,你可以提高代码的可维护性和可扩展性,让你的 JavaScript 项目更加优雅和高效。无论是在 Node.js 环境还是在浏览器端,掌握模块化的原理和用法都是成为一名优秀 JavaScript 开发者的必备技能。

相关文章:

JavaScript:模块化【CommonJS与ES6】

在 JavaScript 编程中&#xff0c;随着项目的复杂性增加&#xff0c;代码的组织和管理变得至关重要。模块化是一种强大的编程概念&#xff0c;它允许我们将代码划分为独立的模块&#xff0c;提高了可维护性和可扩展性。本文将详细介绍 CommonJS 和 ES6 模块&#xff0c;帮助你理…...

Redis—持久化

这里写目录标题 AOF三种写回策略写回策略的优缺点AOF 重写机制AOF后台重写AOF优缺点使用命令 RDBRDB 持久化的工作原理执行快照时&#xff0c;数据能被修改吗RDB 持久化的优点RDB 持久化的缺点 混合持久化大key对持久化的影响 AOF 保存写操作命令到日志的持久化方式&#xff0…...

【设计模式】代理模式

在代理模式&#xff08;Proxy Pattern&#xff09;中&#xff0c;一个类代表另一个类的功能。这种类型的设计模式属于结构型模式。 在代理模式中&#xff0c;我们创建具有现有对象的对象&#xff0c;以便向外界提供功能接口。 介绍 意图&#xff1a;为其他对象提供一种代理以…...

mac arm 通过brew搭建 php+nginx+mysql+xdebug

1.安装nginx brew install nginx //安装brew services start nginx //启动2.安装php brew install php7.4 //安装export PATH"/opt/homebrew/opt/php7.4/bin:$PATH" //加入环境变量 export PATH"/opt/homebrew/opt/php7.4/sbin:$PATH"brew serv…...

软信天成:告别手动编码,实现智能自动化云数据管理

数字化转型浪潮之下&#xff0c;各个企业都在大力投资新的基于云的流程、平台和环境&#xff0c;以期获取可扩展性、弹性、敏捷性和成本效益等优势。 这些趋势要求企业IT部门能够帮助组织&#xff0c;在对分析进行现代化改造的过程中达到云就绪或云优先状态。事实上&#xff0…...

易基因:ChIP-seq等揭示转录因子NRF1调控原始生殖细胞发育、增殖和存活的表观遗传机制|科研进展

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 原始生殖细胞&#xff08;Primordial germ cell&#xff0c;PGC&#xff09;是生殖细胞前体&#xff0c;可以产生卵母细胞和精子&#xff0c;确保生命延续。尽管PGC特化&#xff08;PGC …...

35岁,体能断崖?你需要健康的生活习惯

大厂裁员&#xff0c;称35岁以后体能下滑&#xff0c;无法继续高效率地完成工作&#xff1b;体重上涨&#xff0c;因为35岁以后新陈代谢开始变慢&#xff1b;甚至坐久了会腰疼、睡眠困扰开始加重&#xff0c;在众多的归因中&#xff0c;35岁的到来&#xff0c;为一切的焦虑埋下…...

mysql 习题总结

1.select sex,avg(salsry) as 平均薪资 from emp group by sex; 2.select depart,sum(salsry) from emp group by depart; 3.select depart ,sum(salary) from emp group by depart order by sum(salary) desc limit 1,1; 4.select name from emp group by name having count(n…...

IL汇编语言做一个窗体

网上看到一段代码&#xff0c; .assembly extern mscorlib {} .assembly Classes { .ver 1:0:1:0 } .namespace MyForm { .class public TestForm extends [System.Windows.Forms]System.Windows.Forms.Form { .field private class [System]…...

不用技术代码,分班查询系统怎么做?

暑假即将结束&#xff0c;新学期开始将面临分班信息公布的工作&#xff01;对于分班信息公布&#xff0c;涉及到学生的个人信息&#xff0c;包括姓名、学号、班级等。在发布这些信息时&#xff0c;必须确保数据的保密性&#xff0c;防止未经授权的人员获取到学生的个人信息。因…...

【Mybatis】调试查看执行的 SQL 语句

1. 问题场景&#xff1a; 记录日常开发过程中 Mybatis 调试 SQL 语句&#xff0c;想要查看Mybatis 中执行的 SQL语句&#xff0c;导致定位问题困难 2. 解决方式 双击shift找到mybatis源码中的 MappedStatement的getBoundSql()方法 public BoundSql getBoundSql(Object para…...

【多视重建】从Zero-123到One-2-3-45:多视角生成

文章目录 摘要一、引言二、相关工作三、Zero-1-to-33.1.学习如何控制照相机的视角3.2.视角作为条件的扩散3.3三维重构3.4 数据集 四、One-2-3-454.1 Zero123: 视角条件的 2D Diffusion4.2 NeRF优化&#xff1a;将多视图预测提升到三维图像4.3 基于不完美多视图的 神经表面重建*…...

(四)Unity开发Vision Pro——参考文档

4.参考文档 4.1 支持的功能和组件 4.1.1 支持的 Unity 功能和组件 大多数 Unity 组件无需修改即可在此平台上运行 - 包括大多数自定义 MonoBehaviours、动画逻辑、物理、输入处理、资产管理、AI 等。然而&#xff0c;需要渲染的组件需要特殊的支持。因此&#xff0c;一些组件…...

【Linux】简单线程池的设计与实现 -- 单例模式

前言对锁的封装整体代码LockGuard - RALLRALLMutex封装 对线程创建的封装整体代码成员函数解释声明 业务处理封装-加减乘除&#xff08;可有可无&#xff09;整体代码成员函数解释声明 线程池的设计与实现整体代码成员函数解释声明 展示 前言 线程池: 一种线程使用模式。线程过…...

[RoarCTF 2019Online Proxy]sql巧妙盲注

文章目录 [RoarCTF 2019Online Proxy]sql巧妙盲注解题脚本脚本解析 [RoarCTF 2019Online Proxy]sql巧妙盲注 解题 在源代码界面发现&#xff1a;Current Ip 我们会联想到&#xff1a;X-Forwarded-For来修改ip&#xff1a; 结果我们发现&#xff0c;response会讲Last Ip回显出…...

flutter开发实战-just_audio实现播放音频暂停音频设置音量等

flutter开发实战-just_audio实现播放音频暂停音频设置音量等 最近开发过程中遇到需要播放背景音等音频播放&#xff0c;这里使用just_audio来实现播放音频暂停音频设置音量等 一、引入just_audio 在pubspec.yaml引入just_audio just_audio: ^2.7.0在iOS上&#xff0c;video_p…...

【Bert101】最先进的 NLP 模型解释【01/4】

0 什么是伯特&#xff1f; BERT是来自【Bidirectional Encoder Representations from Transformers】变压器的双向编码器表示的缩写&#xff0c;是用于自然语言处理的机器学习&#xff08;ML&#xff09;模型。它由Google AI Language的研究人员于2018年开发&#xff0c;可作为…...

c语言经典例题讲解(输出菱形,喝汽水问题)

目录 一、输出菱形 二、喝汽水问题 方法1&#xff1a;一步一步来 方法二&#xff1a;直接套公式 一、输出菱形 输出类似于下图的菱形&#xff1a; 通过分析&#xff1a;1、先分为上下两部分输出 2.在输出前先输出空格 3.找规律进行输出 可知&#xff0c;可令上半部分lin…...

【Flutter】【基础】CustomPaint 绘画功能(一)

功能&#xff1a;CustomPaint 相当于在一个画布上面画画&#xff0c;可以自己绘制不同的颜色形状等 在各种widget 或者是插件不能满足到需求的时候&#xff0c;可以自己定义一些形状 使用实例和代码&#xff1a; CustomPaint&#xff1a; 能使你绘制的东西显示在你的ui 上面&a…...

iOS 实现图片高斯模糊效果

效果图 用到了 UIVisualEffectView 实现代码 - (UIVisualEffectView *)bgEffectView{if(!_bgEffectView){UIBlurEffect *blur [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];_bgEffectView [[UIVisualEffectView alloc] initWithEffect:blur];}return _bgEffect…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...