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

JavaScript模块化

news 来源：原创 2025/7/1 10:29:26

什么是JavaScript的模块化？

JavaScript的模块化是指将代码分割成独立的、可重用的模块，每个模块具有自己的功能和作用，可以单独进行开发、测试和维护。不同的目的是提升代码的可维护性、可复用性和可扩展性，同时避免不同模块间的命名冲突和依赖问题。

在早期的JavaScript中，所有的代码都被写在同一个文件中，这样会导致以下问题：

全局命名污染：所有的变量和函数都在全局作用域中，可能导致命名冲突。
代码复制困难：如果需要在不同的项目或模块中复制相同的功能，需要手动复制代码，维护起来非常困难。
代码组织差：代码越来越多，逻辑难以分割，导致可维护性差。

为了解决这些问题，JavaScript社区提供了 CommonJS 和 AMD。

CommonJS ：

为了在服务器端（Node.js环境）实现自定义，CommonJS标准应运而生。
使用require()导入模块，module.exports导出模块，解决了代码组织和模块依赖问题。
CommonJS的设计主要面向同步加载，适用于服务器端。

AMD ：

AMD（如RequireJS）在浏览器环境中解决了优先问题。
它支持异步加载模块，避免了浏览器中模块过多导致的性能问题。
AMD允许第四个加载模块，并且不要求模块按照顺序加载，这在浏览器中尤其有用。

后面官方终于开始做为，在ECMAScript 6（ES6）标准中，JavaScript语言初步支持了标准，提供了import和export关键字。

ES模块化：

静态分析：模块的依赖关系可以在编译时解析，优化性能。
支持异步加载：通过动态import()可以辅助加载模块。
模块作用域：每个模块都有自己的作用域，避免了全局作用域污染。

ES模块使用方法

1. 具名导出

导出变量、函数、类

// math.js// 导出变量
export const PI = 3.14159;// 导出函数
export function add(a, b) {return a + b;
}// 导出类
export class Calculator {multiply(a, b) {return a * b;}
}

导入变量、函数、类

// main.js
import { PI, add, Calculator } from './math.js';console.log(PI); // 3.14159
console.log(add(2, 3)); // 5const calc = new Calculator();
console.log(calc.multiply(4, 5)); // 20

2. 默认导出 export default

默认导出时，导入的名称可以自定义。

导出

// logger.js
export default function logMessage(message) {console.log("Log:", message);
}

导入

// main.js
import log from './logger.js';log("Hello, World!"); // Log: Hello, World!

3. 组合导出（命名空间）

导出

// utils.js
const name = "JavaScript";
function greet() {return "Hello, " + name;
}
export { name, greet };

导入

// main.js
import * as utils from './utils.js';console.log(utils.name); // JavaScript
console.log(utils.greet()); // Hello, JavaScript// 代码说明
// import * as utils from './utils.js' 代码表示如下：
// *：表示导入该模块中所有导出的内容。
// as：表示将所有导入的内容命名为一个单一的对象（即命名空间），这个对象的名字是 utils。
// 你可以通过 utils 对象访问 utils.js 中导出的所有内容。

4. 重新导出

可以从一个模块导入后重新导出，使其变成一个中转模块。

导出

// math.js
// 导出变量
export const PI = 3.14159;// 导出函数
export function add(a, b) {return a + b;
}// 导出类
export class Calculator {multiply(a, b) {return a * b;}
}

重新导出

// mathOperations.js
export { PI, add, Calculator } from './math.js';

导入

// main.js
import { PI, add } from './mathOperations.js';console.log(PI); // 3.14159
console.log(add(10, 20)); // 30

5. 动态导入 import()

import() 动态导入允许在运行时动态加载模块，适用于按需加载或懒加载场景。结合 await 进行异步模块加载。

导出

// math.js
export function add(a, b) {return a + b;
}

导入

// main.js
async function loadMathModule() {const math = await import('./math.js');console.log(math.add(5, 10)); // 15
}
loadMathModule();

6. 浏览器导入

在 HTML 中使用 <script type="module">。代码不会污染全局作用域。浏览器支持 import，不需要 Webpack 等打包工具。

导出

// math.js
export function add(a, b) {return a + b;
}

导入

<!-- index.html -->
<script type="module">import { add } from './math.js';console.log(add(3, 7)); // 10
</script>

7. 在 Node.js 中使用 ES 模块

在 package.json 中添加

{"type": "module"
}

然后可以在 .mjs 文件中使用 ES 模块语法

// server.mjs
import { createServer } from 'http';const server = createServer((req, res) => {res.end("Hello, ES Modules in Node.js!");
});server.listen(3000, () => {console.log("Server running on http://localhost:3000");
});

什么是 .mjs 文件？

上面提到了 .mjs，那么什么是 .mjs 文件？

.mjs 是 JavaScript 模块文件的扩展名，表示该文件使用了 ES6 模块化（即 ECMAScript 2015 模块）语法。与传统的 .js 文件不同，.mjs 文件明确告知 Node.js 或其他 JavaScript 环境该文件使用的是 ES 模块规范。

为什么使用 .mjs？

区分 CommonJS 和 ES6 模块：在 Node.js 中，默认的模块系统是 CommonJS，通过 require() 和 module.exports 来加载和导出模块。而 ES6 模块 使用 import 和 export 语法。为了避免混淆，Node.js 引入了 .mjs 扩展名来明确区分 ES6 模块文件和传统的 CommonJS 文件。

Node.js 与 ES6 模块的兼容性：虽然 ES6 模块是 JavaScript 标准的一部分，但在 Node.js 中直到最近才开始原生支持。为了支持 ES6 模块，Node.js 在版本 12 及更高版本中引入了 .mjs 文件扩展名。当你在 Node.js 中使用 ES6 模块时，使用 .mjs 扩展名可以让 Node.js 知道该文件使用 ES6 模块化语法。

type 字段：从 Node.js 14 开始，你还可以在 package.json 文件中设置 type 字段来指定整个项目是否使用模块化语法：

如果将 type 设置为 "module"，则可以在项目中使用 .js 扩展名来作为 ES6 模块，免去 .mjs 扩展名的要求。
如果不设置或将 type 设置为 "commonjs"，则 .js 文件将继续被视为 CommonJS 模块。

JavaScript模块化

什么是JavaScript的模块化？ JavaScript的模块化是指将代码分割成独立的、可重用的模块，每个模块具有自己的功能和作用，可以单独进行开发、测试和维护。不同的目的是提升代码的可维护性、可复用性和可扩展性，同时避免不同模块间的…...

编程日记 2025/7/1 10:29:26

排序算法--插入排序

插入排序是一种简单且稳定的排序算法，适合小规模数据或部分有序数据。 // 插入排序函数 void insertionSort(int arr[], int n) {for (int i 1; i < n; i) { // 从第二个元素开始int key arr[i]; // 当前需要插入的元素int j i - 1;// 将比 key 大的元素向后移…...

编程日记 2025/6/29 22:15:17

【C语言篇】“三子棋”

一、游戏介绍三子棋，英文名为 Tic - Tac - Toe，是一款简单而经典的棋类游戏。游戏在一个 33 的棋盘上进行，两名玩家轮流在棋盘的空位上放置自己的棋子（通常用 * 和 # 表示），率先在横、竖或斜方向上连成三个…...

编程日记 2025/7/1 10:17:55

【大模型理论篇】DeepSeek-R1:引入冷启动的强化学习

1. 背景首先给出DeepSeek-V3、DeepSeek-R1-Zero、DeepSeek-R1的关系图【1】。虽然DeepSeek-R1-Zero推理能力很强，但它也面临一些问题。例如，DeepSeek-R1-Zero存在可读性差和语言混杂等问题。为了使推理过程更具可读性，进而推出了DeepSee…...

编程日记 2025/6/30 20:10:33

Linux基础 ——tmux vim 以及基本的shell语法

Linux 基础 ACWING y总的Linux基础课，看讲义作作笔记。 tmux tmux 可以干嘛？ tmux可以分屏多开窗口，可以进行多个任务，断线，不会自动杀掉正在进行的进程。 tmux – session(会话，多个) – window(多个…...

编程日记 2025/7/1 9:56:01

使用 Kotlin 将 Vertx 和 Springboot 整合

本篇文章目的是将 Springboot 和 Vertx 进行简单整合。整合目的仅仅是为了整活，因为两个不同的东西整合在一起提升的性能并没有只使用 Vertx 性能高，因此追求高性能的话这是在我来说不推荐。而且他们不仅没有提高很多性能甚至增加了学习成本一、整合流…...

编程日记 2025/7/1 1:29:10

【单层神经网络】softmax回归的从零开始实现（图像分类）

softmax回归该回归分析为后续的多层感知机做铺垫基本概念 softmax回归用于离散模型预测（分类问题，含标签） softmax运算本质上是对网络的多个输出进行了归一化，使结果有一个统一的判断标准，不必纠结为什么要这么算…...

编程日记 2025/7/1 10:05:34

课题推荐——基于自适应滤波技术的多传感器融合在无人机组合导航中的应用研究

无人机在现代航空、农业和监测等领域的应用日益广泛。为了提高导航精度，通常采用多传感器融合技术，将来自GPS、惯性测量单元（IMU）、磁力计等不同传感器的数据整合。然而，传感器的量测偏差、环境干扰以及非线性特性使得…...

编程日记 2025/7/1 1:15:13

【基于SprintBoot+Mybatis+Mysql】电脑商城项目之用户登录

🧸安清h：个人主页 🎥个人专栏：【Spring篇】【计算机网络】【Mybatis篇】 🚦作者简介：一个有趣爱睡觉的intp，期待和更多人分享自己所学知识的真诚大学生。目录 🎯1.登录-持久层 &…...

编程日记 2025/6/27 23:52:33

Mono里运行C#脚本40—mono_magic_trampoline函数的参数设置

前面介绍过跳板代码，它是用来切换托管代码与非托管的代码，以及运行时与C#代码的交互。实现从运行时切换到C#代码来运行，再从C#代码返回运行时。要想理解整个切换的细节，那么就需要理解mono_magic_trampoline函数，而要理解此函数，就必须了解这个函数的参数来源。要理…...

编程日记 2025/7/1 10:20:36

Verilog基础（三）：过程

过程(Procedures) - Always块 – 组合逻辑 (Always blocks – Combinational) 由于数字电路是由电线相连的逻辑门组成的，所以任何电路都可以表示为模块和赋值语句的某种组合. 然而，有时这不是描述电路最方便的方法. 两种always block是十分有用的：组合逻辑： always @(…...

编程日记 2025/7/1 9:05:44

实际操作检测缺陷刀片

号he 找到目标图像的缺陷位置，首先思路为对图像进行预处理，灰度-二值化-针对图像进行轮廓分析 //定义结构元素 Mat se getStructuringElement(MORPH_RECT, Size(3, 3), Point(-1, -1)); morphologyEx(thre, tc, MORPH_OPEN, se, Point(-1, -1), 1); …...

编程日记 2025/6/30 20:17:59

DeepSeek 阐述 2025年前端发展趋势

预测2025年前端的发展趋势。首先，我需要考虑当前的前端技术发展情况，以及近几年的变化趋势。比如，框架方面，React、Vue、Angular这些主流框架的更新方向和社区活跃度。可能用户想知道未来哪些技术会更流行，或者需要学…...

编程日记 2025/6/30 10:43:22

Elasticsearch基本使用详解

文章目录 Elasticsearch基本使用详解一、引言二、环境搭建1、安装 Elasticsearch2、安装 Kibana（可选） 三、索引操作1、创建索引2、查看索引3、删除索引四、数据操作1、插入数据2、查询数据（1）简单查询（2）…...

编程日记 2025/7/1 10:10:45

【Rust自学】17.3. 实现面向对象的设计模式

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 17.3.1. 状态模式状态模式(state pattern) 是一种面向对象设计模式，指的是一个值拥有的内部状态由数个状态对象&#xff08…...

编程日记 2025/7/1 9:57:58

司库建设-融资需求分析与计划制定

当企业现金流紧张时，企业需要考虑外部融资，从财务营运角度来考虑和分析如何确定输入和输出，进行整体解决方案设计。融资需求分析与计划制定功能点： 现金流预测工具：集成历史数据和业务计划，自动生成未来1…...

编程日记 2025/7/1 9:40:55

2. 【.NET Aspire 从入门到实战】--理论入门与环境搭建--.NET Aspire 概览

在当今快速发展的软件开发领域，构建高效、可靠且易于维护的云原生应用程序已成为开发者和企业的核心需求。.NET Aspire 作为一款专为云原生应用设计的开发框架，旨在简化分布式系统的构建和管理，提供了一整套工具、模板和集成包，帮…...

编程日记 2025/6/27 23:52:30

【Elasticsearch】allow_no_indices

- **allow_no_indices 参数的作用**： 该参数用于控制当请求的目标索引（通过通配符、别名或 _all 指定）不存在或已关闭时，Elasticsearch 的行为。 - **默认行为**： 如果未显式设置该参数，默认值为 …...

编程日记 2025/7/1 9:29:32

26.useScript

在 Web 应用开发中，动态加载外部脚本是一个常见需求，特别是在需要集成第三方库或服务时。然而，在 React 应用中管理脚本加载可能会变得复杂。useScript 钩子提供了一种优雅的方式来处理外部脚本的加载、错误处理和清理，使得在 Rea…...

编程日记 2025/7/1 8:59:14

跨域问题和解决方案

跨域问题及解决方案同源策略及跨域问题同源策略是一套浏览器安全机制，当一个源的文档和脚本，与另一个源的资源进行通信时，同源策略就会对这个通信做出不同程度的限制。简单来说，同源策略对同源资源放行，对异源…...

编程日记 2025/7/1 9:24:59

springboot中路径默认配置与重定向/转发所存在的域对象

Spring Boot 是一种简化 Spring 应用开发的框架，它提供了多种默认配置和方便的开发特性。在 Web 开发中，路径配置和请求的重定向/转发是常见操作。本文将详细介绍 Spring Boot 中的路径默认配置，并解释重定向和转发过程中存在的域对象。一、…...

编程日记 2025/7/1 1:11:28

【OS】AUTOSAR架构下的Interrupt详解（下篇）

目录 3.代码分析 3.1中断配置代码 3.2 OS如何找到中断处理函数 3.3 Os_InitialEnableInterruptSources实现 3.4 Os_EnableInterruptSource 3.5 DisableAllInterrupts 3.5.1Os_IntSuspendCat1 3.5.2 Os_InterruptDisableAllEnter 3.5.3 Disable二类中断 3.5.4 Disable一…...

编程日记 2025/7/1 8:40:12

基于遗传算法的256QAM星座图的最优概率整形matlab仿真,对比优化前后整形星座图和误码率

目录 1.算法仿真效果 2.算法涉及理论知识概要 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2022a仿真结果如下（完整代码运行后无水印）： GA优化曲线： 优化前后星座图对比优化前后误码率对比仿真操作步骤…...

编程日记 2025/6/30 17:50:20

Android学习21 -- launcher

1 前言之前在工作中，第一次听到launcher有点蒙圈，不知道是啥，当时还赶鸭子上架去和客户PK launcher的事。后来才知道其实就是安卓的桌面。本来还以为很复杂，毕竟之前接触过windows的桌面，那叫一个复杂。。。后面查了…...

编程日记 2025/7/1 8:24:17

小程序越来越智能化，作为设计师要如何进行创新设计

一、用户体验至上 （一）简洁高效的界面设计小程序的特点之一是轻便快捷，用户期望能够在最短的时间内找到所需功能并完成操作。因此，设计师应致力于打造简洁高效的界面。避免过多的装饰元素和复杂的布局，采用清晰的导航…...

编程日记 2025/7/1 8:33:53

【实践案例】基于大语言模型的海龟汤游戏

文章目录项目背景提示词构建海龟汤主持人真相判断专家具体实现流程文心一言大语言模型“海龟汤”插件参考项目背景 “海龟汤”作为一种聚会类桌游，又称情境推理游戏，是一种猜测情境还原事件真相的智力游戏。其玩法是由出题者提出一个难以理解的事件&…...

编程日记 2025/7/1 8:56:58

基于多智能体强化学习的医疗AI中RAG系统程序架构优化研究

一、引言 1.1 研究背景与意义在数智化医疗飞速发展的当下，医疗人工智能（AI）已成为提升医疗服务质量、优化医疗流程以及推动医学研究进步的关键力量。医疗 AI 借助机器学习、深度学习等先进技术，能够处理和分析海量的医疗数据，从而辅助医生进行疾病诊断、制定治疗方案以…...

编程日记 2025/7/1 9:54:24

【Unity2D 2022：UI】创建滚动视图

一、创建Scroll View游戏对象在Canvas画布下新建Scroll View游戏对象二、为Content游戏对象添加Grid Layout Group（网格布局组）组件选中Content游戏物体，点击Add Competent添加组件，搜索Grid Layout Group组件三、调整Grid La…...

编程日记 2025/7/1 9:31:34

C++ Primer 多维数组

欢迎阅读我的【CPrimer】专栏专栏简介：本专栏主要面向C初学者，解释C的一些基本概念和基础语言特性，涉及C标准库的用法，面向对象特性，泛型特性高级用法。通过使用标准库中定义的抽象设施，使你更加适应高级…...

编程日记 2025/7/1 9:26:50

怀旧经典：1200+款红白机游戏合集，Windows版一键畅玩

沉浸在怀旧的海洋中，体验经典红白机游戏的魅力！我们为您精心准备了超过1200款经典游戏的合集，每一款都是时代的印记，每一场都是回忆的旅程。这个合集不仅包含了丰富的游戏资源，还内置了多个Windows版的NES模拟器&…...

编程日记 2025/7/1 10:08:22

【数据采集】案例02：基于Selenium采集豆瓣电影Top250的详细数据

基于Selenium采集豆瓣电影Top250的详细数据 Selenium官网：https://www.selenium.dev/blog/ 豆瓣电影Top250官网：https://movie.douban.com/top250 写在前面实验目标：基于Selenium框架采集豆瓣电影Top250的详细数据。电脑系统：Windows 使用软件：PyCharm、Navicat 技术需求…...

编程日记 2025/7/1 10:15:16

Spring 面试题【每日20道】【其二】

1、Spring MVC 具体的工作原理？ 中等 Spring MVC 是 Spring 框架的一部分，专门用于构建基于Java的Web应用程序。它采用模型-视图-控制器（MVC）架构模式，有助于分离应用程序的不同方面，如输入逻辑、业务逻辑…...

编程日记 2025/7/1 9:56:02

算法设计-0-1背包动态规划（C++）

一、问题阐述 0-1 背包问题的目标是在给定背包容量 W 的情况下，从 n 个物品中选择一些物品放入背包，使得背包中物品的总价值最大。每个物品只能选择一次（即要么放入背包，要么不放入）。二、代码 #include <iostr…...

编程日记 2025/7/1 9:22:49

【Java知识】使用Java实现地址逆向解析到区划信息

文章目录 1. 实现 FST1.1 定义 FST 节点1.2 定义 FST 2. 实现地址逆向查询2.1 定义区划信息2.2 构建 FST 3. 运行结果4. 代码说明5. 进一步优化6. 总结实现一个 FST（Finite State Transducer，有限状态转换器） 并用于地址逆向查询区划信息…...

编程日记 2025/7/1 9:43:49

单机伪分布Hadoop详细配置

目录 1. 引言2. 配置单机Hadoop2.1 下载并解压JDK1.8、Hadoop3.3.62.2 配置环境变量2.3 验证JDK、Hadoop配置 3. 伪分布Hadoop3.1 配置ssh免密码登录3.2 配置伪分布Hadoop3.2.1 修改hadoop-env.sh3.2.2 修改core-site.xml3.2.3 修改hdfs-site.xml3.2.4 修改yarn-site.xml3.2.5 …...

编程日记 2025/7/1 9:44:55

[250204] Mistral Small 3：小巧、快速、强大 | asdf 0.16.0 发布：Golang 重写带来性能飞跃

目录 Mistral AI 发布开源模型 Mistral Small 3：小巧、快速、强大asdf 0.16.0 版本发布：Golang 重写带来性能飞跃！ Mistral AI 发布开源模型 Mistral Small 3：小巧、快速、强大法国人工智能初创公司 Mistral AI 发布了最新的开源…...

编程日记 2025/7/1 9:25:00

解读“大语言模型（LLM）安全性测评基准”

1. 引入 OWASP，全称为Open Web Application Security Project，即开放式Web应用程序安全项目，是一个致力于提高软件安全性的非营利国际组织。由于庞大的规模和复杂的结构，大语言模型也存在多种安全风险，如prompt误导…...

编程日记 2025/7/1 8:37:54

可视化相机pose colmap形式的相机内参外参

目录内参外参转换可视化相机pose colmap形式的相机内参外参内参外参转换 def visualize_cameras(cameras, images):fig plt.figure()ax fig.add_subplot(111, projection3d)for image_id, image_data in images.items():qvec image_data[qvec]tvec image_data[tvec]#…...

编程日记 2025/6/30 12:16:01

从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架（基础图形库实现）

目录基础图形库的抽象抽象图形抽象点设计我们的抽象实现我们的抽象测试抽象线设计我们的抽象实现我们的抽象绘制垂直的和水平的线使用Bresenham算法完成任意斜率的绘制绘制三角形和矩形矩形三角形实现绘制圆，圆弧和椭圆继续我们的…...

编程日记 2025/6/28 7:18:19

python学opencv|读取图像（五十三）原理探索：使用cv.matchTemplate()函数实现最佳图像匹配

【1】引言前序学习进程中，已经探索了使用cv.matchTemplate()函数实现最佳图像匹配的技巧，并且成功对两个目标进行了匹配。相关文章链接为：python学opencv|读取图像（五十二）使用cv.matchTemplate()函数实现最佳图像…...

编程日记 2025/6/28 4:22:42

4 前端前置技术（上）：AJAX技术（前端发送请求）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言前言...

编程日记 2025/6/28 3:04:40

python的ruff简单使用

Ruff 是一个用 Rust 编写的高性能 Python 静态分析工具和代码格式化工具。它旨在提供快速的代码检查和格式化功能，同时支持丰富的配置选项和与现有工具的兼容性。ruff是用rust实现的python Linter&Formatter。安装： conda install -c conda-forge…...

编程日记 2025/6/29 17:20:58

windows环境下如何在PyCharm中安装软件包

windows环境下如何在pyCharm中安装wxPython软件包在windows环境中，安装软件包可以使用终端的方式，在IDE下方的终端中执行pip install wxPython进行安装，安装完毕之后，使用pip show wxPython检查也符合预期。但是在代码文件中导…...

编程日记 2025/6/28 3:35:44

【LLM-agent】(task2)用llama-index搭建AI Agent

note LlamaIndex 实现 Agent 需要导入 ReActAgent 和 Function Tool，循环执行：推理、行动、观察、优化推理、重复进行。可以在 arize_phoenix 中看到 agent 的具体提示词，工具被装换成了提示词ReActAgent 使得业务自动向代码转换成为可能&am…...

编程日记 2025/6/30 12:37:05

Deep Crossing：深度交叉网络在推荐系统中的应用

实验和完整代码完整代码实现和jupyter运行：https://github.com/Myolive-Lin/RecSys--deep-learning-recommendation-system/tree/main 引言在机器学习和深度学习领域，特征工程一直是一个关键步骤，尤其是对于大规模的推荐系统和广告点击率预…...

编程日记 2025/6/28 6:47:20

介绍一下Mybatis的Executor执行器

Executor执行器是用来执行我们的具体的SQL操作的有三种基本的Executor执行器： SimpleExecutor简单执行器每执行一次update或select，就创建一个Statement对象，用完立刻关闭Statement对象 ReuseExecutor可重用执行器可重复利用Statement…...

编程日记 2025/6/29 18:52:27