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

小结:JavaScript 模块化工具链

JavaScript 模块化工具链

是现代前端开发中用于组织、管理和优化模块化代码的核心工具集合。以下是关于 JS 模块化工具链的概述,包括关键工具、作用和常见工作流程:**

**1. **模块化的背景

JavaScript 模块化是为了解决代码组织、依赖管理和作用域隔离的问题。常见的模块化规范包括:

  • CommonJS:主要用于 Node.js,同步加载模块(require/module.exports)。
  • AMD:异步模块定义,适合浏览器环境(如 RequireJS)。
  • ES Modules (ESM):现代 JavaScript 标准模块系统(import/export),浏览器和 Node.js 均支持。
  • UMD:通用模块定义,兼容多种环境。

ES Modules 已成为主流,现代工具链大多围绕 ESM 构建。


**2. **核心工具链

以下是构建 JS 模块化工具链的常见工具及其作用:

**(1) **模块打包工具(Bundlers)

模块打包工具将多个模块(JS、CSS、图片等)合并为少量优化后的文件,适合生产环境。

  • Webpack
    • 功能:强大的模块打包工具,支持代码分割、动态导入、Tree Shaking。
    • 优点:生态丰富,适合复杂项目。
    • 缺点:配置复杂,初学者学习曲线陡峭。
  • Vite
    • 功能:基于 ESM 的快速打包工具,开发时利用浏览器原生模块加载,生产环境使用 Rollup 打包。
    • 优点:开发体验极佳,启动速度快。
    • 缺点:生态相对较新,插件不如 Webpack 丰富。
  • Rollup
    • 功能:专注于库开发,支持 Tree Shaking,生成更小的打包文件。
    • 优点:输出简洁,适合构建库。
    • 缺点:对复杂应用支持不如 Webpack。
  • esbuild
    • 功能:超快打包工具,基于 Go 语言,强调性能。
    • 优点:速度极快,配置简单。
    • 缺点:功能较少,插件生态有限。
  • Turbopack
    • 功能:Next.js 团队开发的新一代打包工具,旨在取代 Webpack。
    • 现状:仍在开发中,性能优于 Webpack,但尚未广泛采用。

**(2) **模块加载器

模块加载器在运行时动态加载模块,主要用于浏览器环境。

  • SystemJS:支持多种模块规范(CommonJS、AMD、ESM),适合动态加载。
  • RequireJS:基于 AMD,早期广泛使用,现逐渐被 ESM 取代。
  • 现代浏览器:直接支持 ESM,无需额外加载器(通过

**(3) **包管理工具

包管理工具用于安装、管理和更新项目依赖。

  • npm:Node.js 默认包管理器,生态庞大。
  • Yarn:Facebook 开发,注重性能和稳定性,提供离线缓存。
  • pnpm:高效的包管理工具,使用硬链接节省磁盘空间,安装速度快。
  • Bun:新兴的全栈工具,集包管理、运行时和打包功能于一体。

**(4) **转译工具

转译工具将现代 JavaScript(或 TypeScript)转换为浏览器兼容的代码。

  • Babel
    • 功能:将 ES6+ 代码转为 ES5,支持 JSX、TypeScript 等。
    • 插件:可扩展性强,配合 Webpack 或 Vite 使用。
  • SWC
    • 功能:基于 Rust 的超快转译器,兼容 Babel 的部分功能。
    • 优点:速度快,常用于 Next.js 和 Vite。
  • TypeScript Compiler (tsc)
    • 功能:将 TypeScript 转为 JavaScript,支持类型检查。
    • 配合工具:常与 Webpack、Vite 或 esbuild 集成。

**(5) **代码检查与格式化

确保代码质量和一致性。

  • ESLint:检查 JavaScript/TypeScript 代码,修复潜在错误。
  • Prettier:代码格式化工具,保持风格一致。
  • Biome:新兴工具,集成 linting 和格式化,性能优于 ESLint+Prettier。

**(6) **开发服务器

提供本地开发环境,支持热重载(HMR)。

  • Vite:内置开发服务器,基于 ESM,热重载极快。
  • Webpack Dev Server:配合 Webpack 使用,支持 HMR。
  • esbuild:提供简单的开发服务器,适合轻量项目。

**3. **典型工具链工作流程

以下是现代 JS 项目中常见的模块化工具链工作流程:

  1. 初始化项目
    • 使用 npm inityarn initpnpm init 创建 package.json
    • 配置模块化规范(通常为 ESM,设置 “type”: “module”)。
  2. 编写模块化代码
    • 使用 import/export 编写 ES Modules。
    • 可结合 TypeScript 或 JSX。
  3. 安装依赖
    • 通过 npm installyarn addpnpm add 安装库(如 React、Vue)。
  4. 配置工具链
    • 配置打包工具(Vite、Webpack、Rollup)。
    • 添加 Babel 或 SWC 进行转译。
    • 配置 ESLint 和 Prettier 确保代码质量。
  5. 开发
    • 使用 Vite 或 Webpack Dev Server 启动本地开发环境。
    • 利用 HMR 提高开发效率。
  6. 构建
    • 运行 vite buildwebpack 生成生产环境代码。
    • 优化包括代码分割、Tree Shaking、压缩等。
  7. 部署
    • 将构建后的文件部署到静态服务器或 CDN。

ES Modules (ESM)

ES Modules (ESM) 是 JavaScript 的官方模块化标准,引入于 ES6 (ES2015),现已成为浏览器和 Node.js 的主流模块系统。以下是对 ES Modules 的深入解析,涵盖其语法、特性、工作原理、优势、挑战以及与工具链的结合。


**1. **ES Modules 核心概念

ES Modules 是一种静态模块系统,允许开发者通过 importexport 语法组织代码。它的设计目标是提供模块化、作用域隔离和依赖管理。

**(1) **基本语法

  • 导出模块
    javascript

    // 命名导出
    export const name = "Grok";
    export function sayHello() {return "Hello, ESM!";
    }// 默认导出
    export default class Module {constructor() {this.id = 1;}
    }// 聚合导出
    export { name, sayHello as greet };
    
  • 导入模块
    javascript

    // 导入命名导出
    import { name, sayHello } from './module.js';// 导入默认导出
    import Module from './module.js';// 导入全部(命名空间)
    import * as MyModule from './module.js';// 重命名导入
    import { sayHello as greet } from './module.js';// 动态导入(异步)
    import('./module.js').then(module => {console.log(module.name);
    });
    

**(2) **关键特性

  • 静态结构importexport 必须位于模块顶层,不能出现在条件语句或函数内部。这使得模块依赖关系在解析阶段即可确定,利于优化(如 Tree Shaking)。
    javascript

    // 错误:动态导入不能在顶层以外
    if (true) {import { name } from './module.js'; // SyntaxError
    }
    
  • 严格模式:ESM 模块默认运行在严格模式(“use strict”),避免 this 指向全局对象等问题。

  • 模块作用域:每个模块有独立的作用域,变量不会泄露到全局。

  • 异步加载:浏览器支持动态导入(import()),适合按需加载。

  • 单例模式:模块只会被解析和执行一次,多次导入共享同一实例。
    javascript

    // module.js
    export let counter = 0;
    counter++;// main.js
    import { counter } from './module.js';
    import { counter as counter2 } from './module.js';
    console.log(counter, counter2); // 1, 1(共享同一实例)
    

**(3) **文件扩展名

  • 在浏览器中,导入模块时需要包含文件扩展名(如 .js)。
    html

    <script type="module">import { name } from './module.js'; // 必须带 .js
    </script>
    
  • 在 Node.js 中,扩展名可以省略,但需在 package.json 中设置 “type”: “module”


**2. **工作原理

ES Modules 的加载和执行分为三个阶段:

  1. 解析(Construction)
    • 解析模块的 importexport 语句,构建模块依赖图。
    • 检查语法错误,但不执行代码。
  2. 实例化(Instantiation)
    • 为模块分配内存,初始化导出变量(但不赋值)。
    • 建立模块间的绑定关系(Live Bindings)。
  3. 执行(Evaluation)
    • 执行模块代码,填充导出变量的值。
    • 模块按依赖顺序执行,循环依赖通过绑定处理。

**(1) **Live Bindings

ESM 的导出是动态绑定(Live Bindings),导入的变量会反映导出的最新值。

javascript

// counter.js
export let count = 0;
export function increment() {count++;
}// main.js
import { count, increment } from './counter.js';
console.log(count); // 0
increment();
console.log(count); // 1(count 反映最新值)

**(2) **循环依赖

ESM 支持循环依赖,通过模块解析和绑定机制避免死锁。

javascript

// a.js
import { b } from './b.js';
export const a = 'A';
console.log(b); // 'B'// b.js
import { a } from './a.js';
export const b = 'B';
console.log(a); // 'A'
  • 解析顺序:解析 a.js → 解析 b.js → 执行 b.js → 执行 a.js
  • Live Bindings 确保变量在执行时可用。

**3. **浏览器支持

浏览器通过

html

<script type="module" src="main.js"></script>
<script type="module">import { name } from './module.js';console.log(name);
</script>

**(1) **特性

  • 异步加载:模块按需加载,类似 defer

  • CORS 限制:远程模块需支持 CORS(需设置 Access-Control-Allow-Origin)。

  • 动态导入:通过 import() 实现按需加载。
    javascript

    const module = await import('./module.js');
    console.log(module.default);
    

**(2) **局限性

  • 文件协议限制:本地开发(file://)无法加载模块,需通过 HTTP 服务器。
  • 兼容性:现代浏览器(Chrome 61+、Firefox 60+、Safari 10.1+)支持 ESM,旧浏览器需通过 Babel 转译。

**4. **Node.js 中的 ESM

Node.js 从 v12 开始稳定支持 ESM,但与 CommonJS 共存带来了一些复杂性。

**(1) **启用 ESM

  • 方法 1:在 package.json 中设置 “type”: “module”,默认所有 .js 文件为 ESM。
    json

    {"type": "module"
    }
    
  • 方法 2:使用 .mjs 扩展名明确标识 ESM 文件。

  • 方法 3:动态导入 CommonJS 模块。
    javascript

    const cjsModule = await import('./cjs-module.cjs');
    

**(2) **与 CommonJS 的差异

特性ESMCommonJS
加载方式异步/静态同步
导出方式exportmodule.exports
导入方式importrequire
顶层thisundefinedmodule.exports
__filename不直接可用(需import.meta.url**)**直接可用
动态导入支持 (import())有限(需require或动态导入)

**(3) **互操作

  • ESM 可以导入 CommonJS 模块(通过默认导出)。
    javascript

    import cjs from './cjs-module.cjs';
    
  • CommonJS 无法直接 require ESM 模块,需使用动态导入。
    javascript

    const esm = await import('./esm-module.js');
    

**(4) **注意事项

  • ESM 模块路径需包含扩展名(如 ./module.js),除非使用模块解析器(如 Vite)。
  • 工具(如 Webpack、Vite)可平滑处理 ESM 和 CommonJS 的混合使用。

**5. **优势

  1. 标准化:ESM 是 JavaScript 官方标准,得到浏览器和 Node.js 的原生支持。
  2. 静态分析:静态结构便于工具优化(如 Tree Shaking、代码分割)。
  3. 异步加载:支持动态导入,适合按需加载。
  4. 作用域隔离:模块化代码更安全,避免全局污染。
  5. 生态支持:现代框架(React、Vue、Svelte)和工具(Vite、esbuild)全面支持 ESM。

**6. **问题

  1. 兼容性问题
    • 问题:旧浏览器或遗留代码不支持 ESM。
    • 解决:使用 Babel 转译为 ES5,或通过 Webpack/Rollup 打包。
  2. Node.js 复杂性
    • 问题:ESM 和 CommonJS 混合使用可能导致错误。
    • 解决:统一使用 ESM,或使用工具(如 Vite、esbuild)处理互操作。
  3. 本地开发限制
    • 问题:浏览器无法通过 file:// 加载模块。
    • 解决:使用 Vite 或 http-server 搭建本地服务器。
  4. 模块路径问题
    • 问题:ESM 要求显式扩展名,增加了代码冗余。
    • 解决:配置工具(如 Vite 的 resolve.extensions)自动补全扩展名。

**7. **高级特性

  1. 顶级 await(Node.js 14+,浏览器支持):

    • 允许在模块顶层使用 await,无需包裹在异步函数中。

    javascript

    const data = await fetch('https://api.example.com/data').then(res => res.json());
    export { data };
    
  2. Import Assertions(实验性,Node.js 17+):

    • 用于导入非 JavaScript 资源(如 JSON、CSS)。

    javascript

    import json from './data.json' assert { type: 'json' };
    
  3. Import Maps(浏览器支持,Node.js 实验性):

    • 自定义模块解析路径,简化依赖管理。

    html

    <script type="importmap">{"imports": {"lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"}}
    </script>
    <script type="module">import _ from 'lodash';
    </script>
    
  4. Module Preloading

    • 浏览器支持 提前加载模块,提高性能。

    html

    <link rel="modulepreload" href="./module.js">
    

常见 ESM 错误及解决方法:

  • 错误SyntaxError: Cannot use import statement outside a module
    • 解决:确保文件为 ESM(设置 “type”: “module” 或使用 .mjs)。
  • 错误Failed to resolve module specifier
    • 解决:检查路径是否正确,包含扩展名,或配置模块解析规则。
  • 错误CORS policy blocked
    • 解决:确保远程模块支持 CORS,或使用本地开发服务器。

相关文章:

小结:JavaScript 模块化工具链

JavaScript 模块化工具链 是现代前端开发中用于组织、管理和优化模块化代码的核心工具集合。以下是关于 JS 模块化工具链的概述&#xff0c;包括关键工具、作用和常见工作流程&#xff1a;** **1. **模块化的背景 JavaScript 模块化是为了解决代码组织、依赖管理和作用域隔离…...

RabbitMQ ④-持久化 || 死信队列 || 延迟队列 || 事务

消息确认机制 简单介绍 RabbitMQ Broker 发送消息给消费者后&#xff0c;消费者处理该消息时可能会发生异常&#xff0c;导致消费失败。 如果 Broker 在发送消息后就直接删了&#xff0c;就会导致消息的丢失。 为了保证消息可靠到达消费者并且成功处理了该消息&#xff0c;…...

十一、Hive JOIN 连接查询

作者&#xff1a;IvanCodes 日期&#xff1a;2025年5月16日 专栏&#xff1a;Hive教程 在数据分析的江湖中&#xff0c;数据往往分散在不同的“门派”&#xff08;表&#xff09;之中。要洞察数据间的深层联系&#xff0c;就需要JOIN这把利器&#xff0c;将相关联的数据串联起来…...

启用rvzi可视化自己的机器人发现joint state publisher gui没有滑块

启用rvzi可视化自己的机器人发现joint state publisher gui没有滑块&#xff1f; 解决方法&#xff1a; 一&#xff1a;查看urdf中joint type定义是不是revolute。 二&#xff1a;查看urdf关节限制是不是正确&#xff0c;如果是0到0则不正确。 <joint name"joint_…...

Gitee DevOps:中国企业数字化转型的“本土化加速器“

在数字化浪潮席卷全球的当下&#xff0c;DevOps已经从技术热词转变为企业的核心生产力工具。根据IDC最新报告&#xff0c;到2025年中国DevOps市场规模将达到15亿美元&#xff0c;年复合增长率高达25%。在这一快速增长的市场中&#xff0c;一个显著趋势正在显现&#xff1a;越来…...

RKNN开发环境搭建(ubuntu22.04)

以下情况在RV1106G3的平台上验证正常。 1、conda安装 1&#xff09;conda --version//确认是否安装 2&#xff09;创建一个安装目录&#xff0c;进行下一步 3&#xff09;wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-4.6.14-Linux-x…...

2025年上软考 考试时间+准考证打印全攻略

各位同学好呀&#xff01;我是你们的老朋友大老李~之前咱们聊过软考报名和机考模拟系统的使用技巧。今天要和大家分享一下&#xff0c;最近好多同学私信的问题&#xff1a;"老李&#xff01;准考证到底哪天能打印&#xff1f;""考试时间会不会有变动&#xff1f…...

vllm量化05—FP8 W8A8

本系列基于Qwen2.5-7B&#xff0c;学习如何使用vllm量化&#xff0c;并使用benchmark_serving.py、lm_eval 测试模型性能和评估模型准确度。 测试环境为&#xff1a; OS: centos 7 GPU: nvidia l40 driver: 550.54.15 CUDA: 12.3本文是该系列第5篇——FP8 W8A8 一、量化 fro…...

OpenCV 图像透视变换详解

在计算机视觉领域&#xff0c;图像的视角问题常常会影响后续的分析与处理。例如&#xff0c;从倾斜角度拍摄的文档、带有畸变的场景图像等&#xff0c;都需要通过特定的方法进行矫正。OpenCV 作为计算机视觉领域的重要库&#xff0c;提供了强大的图像透视变换功能&#xff0c;能…...

Vue主题色切换实现方案(CSS 变量 + 类名切换)

定义主题变量 // styles/themes.scss :root {--primary-color: #314099;--secondary-color: #1E3968;--text-color: #2c44ce; }[data-theme"红系主题"] {--primary-color: #d74146;--secondary-color: #c20707;--text-color: #db3b3b; }在组件中使用变量 <templ…...

MySQL 高可用

目录 一、概述MySQL高可用 1. 什么是高可用性&#xff08;High Availability, HA&#xff09;&#xff1f; 2. MySQL 高可用常见方案 3. 高可用核心机制 4. 选型建议 注意事项 二、案例环境组成 MySQL 主主复制 keepalived HAProxy 的高可用负载均衡架构 三、案例架构…...

C#学习教程(附电子书资料)

概述 C#&#xff08;读作"C Sharp"&#xff09;是一种由微软开发的现代编程语言&#xff0c;结合了C的高效性和Java的简洁性&#xff0c;专为.NET框架设计。以下是其核心特性和应用领域的详细介绍电子书资料&#xff1a;https://pan.quark.cn/s/6fe772420f95 一、语…...

MySQL性能优化

目录 一、索引优化 1、慢查询日志分析 2、EXPLAIN 执行计划分析 3、索引类型选择 4、索引使用原则 5、常见索引失效场景 二、SQL语句优化 1、避免低效操作符 2、减少数据扫描量 3、子查询优化 4、其他高频优化技巧 三、表设计优化 1、数据类型优化 四、架构设计优…...

Mendix 中的XPath 令牌(XPath Tokens)详解

在 Mendix 中&#xff0c;XPath 令牌&#xff08;XPath Tokens&#xff09; 是一种特殊的动态参数化查询技术&#xff0c;允许你在 XPath 表达式中使用变量或上下文相关的值&#xff0c;从而实现更灵活的查询逻辑。 1. 什么是 XPath 令牌&#xff1f; XPath 令牌是 Mendix 提…...

Feign异步模式丢失上下文问题

Feign异步模式丢失上下文问题 问题描述 当我们使用异步对我们代码进行操作优化时&#xff0c;代码中使用了RequestContextHolder去获取上下文的数据&#xff0c;当我们执行原来可以执行的业务时发现报了空指针异常或数据为空&#xff0c;这是为什么呢&#xff1f; 原理解释 …...

保姆教程-----安装MySQL全过程

1.电脑从未安装过mysql的&#xff0c;先找到mysql官网&#xff1a;MySQL :: Download MySQL Community Server 然后下载完成后&#xff0c;找到文件&#xff0c;然后双击打开 2. 选择安装的产品和功能 依次点开“MySQL Servers”、“MySQL Servers”、“MySQL Servers 5.7”、…...

BUFDS_GTE2,IBUFDS,BUFG缓冲的区别

1、IBUFDS_GTE2 这是 Xilinx FPGA 中专门为 高速收发器&#xff08;SerDes/GTX/GTH/GTY&#xff09;参考时钟设计的差分输入缓冲器。 主要功能是将外部的差分时钟信号&#xff08;如LVDS、LVPECL等&#xff09;转换为FPGA内部的单端时钟信号&#xff0c;并保证信号的完整性和高…...

FPGA: XILINX Kintex 7系列器件的架构

本文将详细介绍Kintex-7系列FPGA器件的架构。以下内容将涵盖Kintex-7的核心架构特性、主要组成部分以及关键技术&#xff0c;尽量全面且结构化&#xff0c;同时用简洁的语言确保清晰易懂。 Kintex-7系列FPGA架构概述 Kintex-7是Xilinx 7系列FPGA中的中高端产品线&#xff0c;基…...

c/c++的opencv的图像预处理讲解

OpenCV 图像预处理核心技术详解 (C/C) 图像预处理是计算机视觉任务中至关重要的一步。原始图像往往受到噪声、光照不均、尺寸不一等多种因素的影响&#xff0c;直接用于后续分析&#xff08;如特征提取、目标检测、机器学习模型训练等&#xff09;可能会导致性能下降或结果不准…...

索恩格汽车SEG Automotive EDI 需求分析

SEG Automotive&#xff08;索恩格汽车&#xff09;是一家全球领先的汽车电气化系统供应商&#xff0c;专注于为传统内燃机和新能源车辆提供高效、可持续的动力解决方案。 EDI 在汽车行业的重要性 在汽车制造行业&#xff0c;高效的供应链是精益生产的核心。精益生产强调“按…...

【简单模拟实现list】

在C标准模板库&#xff08;STL&#xff09;中&#xff0c;list是一个非常强大的容器&#xff0c;它基于双向链表实现&#xff0c;支持高效的插入和删除操作。虽然我们可以直接使用STL中的list&#xff0c;但通过自己模拟实现一个list&#xff0c;可以更好地理解其背后的原理和数…...

深入解析ZAB协议:ZooKeeper的分布式一致性核心

引言 在分布式系统中&#xff0c;如何高效、可靠地实现多节点间的数据一致性是核心挑战之一。ZAB协议&#xff08;ZooKeeper Atomic Broadcast&#xff09;作为 ZooKeeper的核心算法&#xff0c;被广泛应用于分布式协调服务&#xff08;如Kafka、HBase、Dubbo等&#xff09;。…...

交叉熵损失函数,KL散度, Focal loss

交叉熵损失函数&#xff08;Cross-Entropy Loss&#xff09; 交叉熵损失函数&#xff0c;涉及两个概念&#xff0c;一个是损失函数&#xff0c;一个是交叉熵。 首先&#xff0c;对于损失函数。在机器学习中&#xff0c;损失函数就是用来衡量我们模型的预测结果与真实结果之间…...

k8s部署实战-springboot应用部署

在 Kubernetes 上部署 SpringBoot 应用实战指南 前言 本文将详细介绍如何将一个 SpringBoot 应用部署到 Kubernetes 集群中,包括制作镜像、编写部署文件、创建服务等完整步骤。 准备工作 1. 示例 SpringBoot 应用 假设我们有一个简单的 SpringBoot 应用,提供 REST API 服…...

快速选择算法:优化大数据中的 Top-K 问题

在处理海量数据时&#xff0c;经常会遇到这样的需求&#xff1a;找出数据中最大的前 K 个数&#xff0c;而不必对整个数据集进行排序。这种场景下&#xff0c;快速选择算法&#xff08;Quickselect&#xff09;就成了一个非常高效的解决方案。本文将通过一个 C 实现的快速选择算…...

uniapp-商城-60-后台 新增商品(属性的选中和页面显示)

前面添加了属性&#xff0c;添加属性的子级项目。也分析了如何回显&#xff0c;但是在添加新的商品的时&#xff0c;我们也同样需要进行选择&#xff0c;还要能正常的显示在界面上。下面对页面的显示进行分析。 1、界面情况回顾 属性显示其实是个一嵌套的数据显示。 2、选中的…...

利用 Amazon Bedrock Data Automation(BDA)对视频数据进行自动化处理与检索

当前点播视频平台搜索功能主要是基于视频标题的关键字检索。对于点播平台而言&#xff0c;我们希望可以通过优化视频搜索体验满足用户通过模糊描述查找视频的需求&#xff0c;从而提高用户的搜索体验。借助 Amazon Bedrock Data Automation&#xff08;BDA&#xff09;技术&…...

项目QT+ffmpeg+rtsp(一)——Qt的安装和rtsp的测试

文章目录 一、Qt安装二、插件配置tool与卸载三、下载ffmpeg四、查看能否使用(视频)五、代码复现5.1 rtsp申请5.2 rtsp在线测试5.3代码修改六、结果一、Qt安装 对于QT中5.12版本之后,都是使用在线版本,如果你想安装某一个的历史在线版本,一定要点击archive,不然显示不出来…...

高速光耦在通信行业的应用(五) | 5Mbps通信光耦的特性

针对5MBd速率光耦市场&#xff0c;晶台推出KL2200、KL2201和KL2202系列光耦 ,对标大部分国外品牌产品的应用&#xff1b;它分别由一个红外发射二极管和一个高速集成光电检测器逻辑门组成。 它采用 8 引脚 DIP 封装&#xff0c;并提供 SMD 选项。KL2200 的检测器具有一个三态输出…...

#跟着若城学鸿蒙# web篇-运动和方向传感器监测

前言 有些前端业务场景需要用到一些传感器&#xff0c;比如运动传感器和方向传感器来实现摇一摇功能。这就需要前端能够直接获取到相关数据&#xff0c;而不是通过 js 调用客户端代码来实现。 权限 还是需要在模块的module.json5文件中添加相关权限 {"name" : &qu…...

【匹配】Hirschberg

Hirschberg 文章目录 Hirschberg1. 算法介绍2. 公式及原理3. 伪代码 1. 算法介绍 背景与目标 Hirschberg 算法由 Dan Hirschberg 于1975年提出&#xff0c;是对 Needleman–Wunsch 全局比对的内存优化&#xff0c;通过分治策略将空间复杂度从 O ( m n ) O(mn) O(mn) 降到 O (…...

如何在 Windows 上安装类似 Synaptic 的 Chocolatey GUI 包管理器

如果你正在寻找类似 Linux 中 APT 的 Windows 包管理器&#xff0c;那么没有什么比 Chocolatey 更好的了。它是 Windows 10 上可用的最佳包管理器之一&#xff0c;可以通过命令行界面安装所有流行的软件和工具。然而&#xff0c;这并不意味着如果你不喜欢命令行&#xff0c;你就…...

激活函数全解析:定义、分类与 17 种常用函数详解

一、激活函数的定义与作用 定义&#xff1a; 激活函数是添加到人工神经网络中的函数&#xff0c;用于帮助网络学习数据中的复杂模式&#xff0c;决定神经元的输出。 核心作用&#xff1a; 为神经网络引入非线性&#xff0c;增强模型表达能力。需可微分&#xff08;或近似可微&…...

1-10 目录树

在ZIP归档文件中&#xff0c;保留着所有压缩文件和目录的相对路径和名称。当使用WinZIP等GUI软件打开ZIP归档文件时&#xff0c;可以从这些信息中重建目录的树状结构。请编写程序实现目录的树状结构的重建工作。 输入格式: 输入首先给出正整数N&#xff08;≤104&#xff09;…...

Python OOP核心技巧:如何正确选择实例方法、类方法和静态方法

Python方法类型全解析&#xff1a;实例方法、类方法与静态方法的使用场景 一、三种方法的基本区别二、访问能力对比表三、何时使用实例方法使用实例方法的核心场景&#xff1a;具体应用场景&#xff1a;1. 操作实例属性2. 对象间交互3. 实现特定实例的行为 四、何时使用类方法使…...

RK3588 ADB使用

安卓adb操作介绍 adb&#xff08;Android Debug Bridge&#xff09;是一个用于与安卓设备进行通信和控制的工具。adb可以通过USB或无线网络连接安卓设备&#xff0c;执行各种命令&#xff0c;如安装和卸载应用&#xff0c;传输文件&#xff0c;查看日志&#xff0c;运行shell命…...

ubuntu环境下 基于Python 打包的 批量命令行可视化操作工具 GUI

文章目录 一.需求&#xff1a;二.原理支撑&#xff1a;三.简单Demo四.封装成GUI1.依赖库2.代码 五.打包成可执行文件六.命令行的配置七.运行效果 一.需求&#xff1a; 作为测试工程师&#xff0c;为了到现场高效的调试&#xff0c;部署工作&#xff0c;需要一个可视化的工具&a…...

大语言模型 10 - 从0开始训练GPT 0.25B参数量 补充知识之模型架构 MoE、ReLU、FFN、MixFFN

写在前面 GPT&#xff08;Generative Pre-trained Transformer&#xff09;是目前最广泛应用的大语言模型架构之一&#xff0c;其强大的自然语言理解与生成能力背后&#xff0c;是一个庞大而精细的训练流程。本文将从宏观到微观&#xff0c;系统讲解GPT的训练过程&#xff0c;…...

SkyWalking的工作原理和搭建过程

SkyWalking 是一个开源的 应用性能监控系统&#xff08;APM&#xff09;&#xff0c;专为云原生、微服务架构设计。其核心原理基于 分布式追踪&#xff08;Distributed Tracing&#xff09;、指标收集&#xff08;Metrics Collection&#xff09; 和 日志关联&#xff08;Log C…...

CMS(plone / joomla 搭建测试)

开源选择 wordpress 用得最多 也是最容易有漏洞被攻击 被挂木马的 joomla &#xff08;JMS多站点&#xff1a;商业扩展&#xff09; — 多站点需付费 Drupal ProcessWire Plone因其内置的强大安全特性和较少的用户基础&#xff08;相比 WordPress 和 Joomla&#xff09;&#…...

基于 Flink 的实时推荐系统:从协同过滤到多模态语义理解

基于 Flink 的实时推荐系统&#xff1a;从协同过滤到多模态语义理解 嘿&#xff0c;各位技术小伙伴们&#xff01;在这个信息爆炸的时代&#xff0c;你是不是常常惊叹于各大平台仿佛能 “读懂你的心”&#xff0c;精准推送你感兴趣的内容呢&#xff1f;今天&#xff0c;小编就…...

Flink SQL、Hudi 、Doris在数据上的组合应用

Flink SQL、Hudi 和 Doris 是大数据领域中不同定位的技术组件&#xff0c;各自解决不同的问题&#xff0c;以下从核心定位、关键特性和典型场景三个维度展开说明&#xff1a; 1. Flink SQL&#xff1a;流批统一的实时计算引擎 核心定位&#xff1a;Flink 是 Apache 顶级的流批…...

Flink运维要点

一、Flink 运维核心策略 1. 集群部署与监控 资源规划 按业务优先级分配资源&#xff1a;核心作业优先保障内存和 CPU&#xff0c;避免资源竞争。示例&#xff1a;为实时风控作业分配专用 TaskManager&#xff0c;配置 taskmanager.memory.process.size8g。 监控体系 集成 Prom…...

VSCode + Cline AI辅助编程完全指南

VSCode Cline AI辅助编程完全指南 在当今AI快速发展的时代&#xff0c;程序员可以通过AI工具极大地提高工作效率。本教程将详细介绍如何使用VSCode结合Cline&#xff08;Claude AI助手&#xff09;进行AI辅助编程&#xff0c;帮助你提高开发效率&#xff0c;解决复杂问题。 …...

【源码级开发】Qwen3接入MCP,企业级智能体开发实战!

Qwen3接入MCP智能体开发实战&#xff08;上&#xff09; 一、MCP技术与Qwen3原生MCP能力介绍 1.智能体开发核心技术—MCP 1.1 Function calling技术回顾 如何快速开发一款智能体应用&#xff0c;最关键的技术难点就在于如何让大模型高效稳定的接入一些外部工具。而在MCP技术…...

回调函数应用示例

回调函数是一种通过函数指针&#xff08;或引用&#xff09;调用的函数&#xff0c;它在特定事件或条件发生时被另一个函数调用。回调函数的核心思想是将函数作为参数传递&#xff0c;以便在适当的时候执行自定义逻辑&#xff0c;常用于异步编程、事件驱动架构等场景。 业务场景…...

R语言如何解决导出pdf中文不显示的问题

前言 以前绘图都默认英文&#xff0c;突然要求都改成中文&#xff0c;呆住。。。。。。。。。 标题代码实现 ### 导入工具包 ### library(readr) library(dplyr) library(corrplot)df <- read_csv("./clinical.csv") df <- df %>% select(-id, -label)##…...

国产linux系统(银河麒麟,统信uos)使用 PageOffice自定义Word模版中的数据区域

​ PageOffice 国产版 &#xff1a;支持信创系统&#xff0c;支持银河麒麟V10和统信UOS&#xff0c;支持X86&#xff08;intel、兆芯、海光等&#xff09;、ARM&#xff08;飞腾、鲲鹏、麒麟等&#xff09;、龙芯&#xff08;Mips、LoogArch&#xff09;芯片架构。 在实际的Wor…...

llamafactory SFT 从断点恢复训练

背景 我使用llamafactory sft 微调模型的时候。gpu停止运行了。日志文件没有任何的报错信息。 显存还是占用状态。 查看llamafactory的进程是下述信息&#xff1a; 151312 151306 91 17:42 ? 03:58:10 [llamafactory-cl] 既然如此&#xff0c;那就只能从断点恢复训练了。 …...

C#里使用Prism.Core的例子

由于使用WPF来开发应用程序, 那么就会使用一些框架程序来加速开发,一般会使用Prism.Core来加速。 这个应用最后运行的显示如下: 第一步需要安装下面的包: <?xml version="1.0" encoding="utf-8"?> <packages><package id="Mi…...