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

Vue.js组件化开发实战：从工程化到安全纵深设计

news 来源：原创 2025/9/19 11:41:55

文章目录

  1. 开篇：现代前端组件化演进之路

  2. 组件设计核心：高内聚低耦合实践

  3. 工程化基石：从Webpack到Monorepo

  4. 安全纵深设计：RASP在组件层的实现

  5. 实战：动态表单组件的三次进化

  6. 进阶篇：组件工厂模式与策略模式应用

  7. 质量保障：组件测试金字塔实践

  8. 部署运维：容器化与持续交付

  9. 下篇预告：可视化排课组件的性能优化

1. 开篇：现代前端组件化演进之路

组件化开发的三重境界

// 现代化组件库架构示例
class ComponentFactory {constructor(strategy) {this.cache = new WeakMap()this.strategy = strategy}
​createComponent(config) {const signature = this.strategy.generateSignature(config)if (!this.cache.has(signature)) {const component = this.strategy.build(config)this.applySecurityPolicy(component)this.cache.set(signature, component)}return this.cache.get(signature)}
​applySecurityPolicy(component) {const originalRender = component.rendercomponent.render = function() {return this.$rasp.sanitize(originalRender.call(this))}}
}
技术演进关键节点：

  1. 2014年Web Components标准发布

    • Custom Elements的生命周期管理

    • Shadow DOM的样式隔离革命

    • HTML Templates的预编译机制

  2. 2016年Vue2响应式系统突破

    • Object.defineProperty的响应式实现

    • 虚拟DOM的差异化更新算法

    • 单文件组件(SFC)的工程化实践

  3. 2020年Vue3组合式API革新

    • 基于Proxy的响应式系统

    • Composition API的逻辑复用模式

    • 按需编译的Tree-shaking优化

2. 组件设计核心：高内聚低耦合实践

组件工厂模式实践

// 安全组件工厂实现
interface SecurityPolicy {sanitize(config: ComponentConfig): ComponentConfig;validate(config: ComponentConfig): boolean;
}
​
class FormComponentFactory {private static instance: FormComponentFactory;private securityPolicies: SecurityPolicy[] = [];private constructor() {this.registerSecurityPolicy(new XSSPolicy());this.registerSecurityPolicy(new CSRFPolicy());}
​public static getInstance(): FormComponentFactory {if (!FormComponentFactory.instance) {FormComponentFactory.instance = new FormComponentFactory();}return FormComponentFactory.instance;}
​public createInput(config: InputConfig): SecurityEnhancedInput {const sanitizedConfig = this.applySecurityPolicies(config);return new SecurityEnhancedInput(sanitizedConfig);}
​private applySecurityPolicies(config: InputConfig): InputConfig {return this.securityPolicies.reduce((cfg, policy) => {return policy.sanitize(cfg);}, config);}
}
设计模式扩展：

  1. 策略模式在验证模块的应用

    • 动态切换加密算法（AES vs RSA）

    • 多因素认证策略选择器

    • 输入验证规则链

  2. 观察者模式实现跨组件通信

    class EventBus {constructor() {this.events = new Map();}
​$on(event, callback) {if (!this.events.has(event)) {this.events.set(event, []);}this.events.get(event).push(callback);}
​$emit(event, ...args) {const callbacks = this.events.get(event) || [];callbacks.forEach(cb => {cb(...args);this.logSecurityEvent(event, args); // 安全日志记录});}
}

3. 工程化基石：从Webpack到Monorepo

微前端架构深度实践

// 模块联邦配置示例（Webpack 5+）
module.exports = {name: 'hostApp',remotes: {componentLib: `componentLib@${getRemoteEntryUrl('component-lib')}`,},shared: {vue: { singleton: true, eager: true },vuex: { singleton: true },'vue-router': { singleton: true }},plugins: [new SecurityPlugin({allowedImports: ['@safe-components/*'],integrityCheck: true})]
};
​
// 安全加载远程组件
const loadSecureComponent = async (name) => {const { verifyIntegrity } = await import('./security-utils');const component = await import(`@component-lib/${name}`);if (await verifyIntegrity(component)) {return component;}throw new Error('组件完整性校验失败');
};
进阶工程化能力：

  1. 构建性能优化矩阵

    优化策略构建时间(秒)包体积(KB)缓存命中率
    基础配置58.334200%
    并行压缩41.7 ↓29%2985 ↓13%35%
    持久化缓存22.4 ↓62%2850 ↓17%89% ↑
    按需编译16.8 ↓71%1670 ↓51%92%

  2. Monorepo安全管控方案

    • 统一依赖版本管理（pnpm workspace）

    • 跨包访问权限控制

    • 提交代码的自动化安全扫描

4. 安全纵深设计：RASP在组件层的实现

运行时防护体系构建

// 增强型安全指令实现
Vue.directive('safe-render', {beforeMount(el, binding) {const originalHTML = el.innerHTML;const observer = new MutationObserver((mutations) => {mutations.forEach(mutation => {if (mutation.type === 'childList') {const sanitized = this.sanitize(mutation.target.innerHTML);if (sanitized !== mutation.target.innerHTML) {this.recordAttackAttempt({type: 'DOM篡改',payload: mutation.target.innerHTML});}}});});observer.observe(el, { childList: true,subtree: true,characterData: true});}
});
​
// CSP非侵入式集成方案
const applyCSP = () => {const meta = document.createElement('meta');meta.httpEquiv = 'Content-Security-Policy';meta.content = `default-src 'self';script-src 'self' 'unsafe-eval' *.trusted-cdn.com;style-src 'self' 'unsafe-inline';report-uri /csp-violation-report;`;document.head.appendChild(meta);
};
安全防护进阶：

  1. 行为分析引擎

    • 用户操作基线分析

    • 异常表单提交检测

    • 敏感数据访问监控

  2. 动态令牌系统

    class DynamicToken {constructor() {this.tokens = new Map();}
​generate(component) {const token = crypto.randomUUID();const expireAt = Date.now() + 300000; // 5分钟有效期this.tokens.set(token, { component, expireAt });return token;}
​validate(token) {const record = this.tokens.get(token);if (!record) return false;if (Date.now() > record.expireAt) {this.tokens.delete(token);return false;}return true;}
}

5. 实战：动态表单组件的三次进化

第四阶段：智能化表单引擎

// 基于机器学习的数据校验
class SmartValidator {constructor(model) {this.model = model;this.validator = new MLValidator({trainingData: 'form-validate-dataset',modelType: 'randomForest'});}
​async validate(field, value) {const context = {userRole: this.currentUser.role,deviceType: navigator.userAgent,location: this.geoInfo};return this.validator.predict({field,value,context});}
}
​
// 在Vue组件中的集成
export default {methods: {async handleInput(field, value) {const validation = await this.smartValidator.validate(field, value);if (!validation.valid) {this.showRiskWarning(validation.reason);}}}
}

6. 进阶篇：组件工厂模式与策略模式应用

可配置化组件体系

// 组件主题策略实现
interface ThemeStrategy {apply(component: Component): void;
}
​
class DarkTheme implements ThemeStrategy {apply(component) {component.styles = {...component.styles,backgroundColor: '#1a1a1a',textColor: '#ffffff'};}
}
​
class ComponentThemeManager {constructor(strategy: ThemeStrategy) {this.strategy = strategy;}
​applyTheme(component) {this.strategy.apply(component);this.logThemeChange(component); // 审计日志记录}
}
​
// 在表单组件中的应用
const formComponent = new SecurityForm();
const themeManager = new ComponentThemeManager(new DarkTheme());
themeManager.applyTheme(formComponent);

7. 质量保障：组件测试金字塔实践

全链路测试策略

// 组件单元测试增强方案
describe('SecurityForm组件', () => {it('应拦截XSS攻击输入', async () => {const wrapper = mount(SecurityForm, {props: { sanitize: true }});await wrapper.find('input').setValue('<script>alert(1)</script>');expect(wrapper.emitted('attack')).toBeTruthy();expect(wrapper.html()).not.toContain('<script>');});
​it('应处理百万级数据渲染', async () => {const bigData = generateTestData(1000000);const wrapper = mount(VirtualList, {props: { items: bigData }});await flushPromises();expect(wrapper.findAll('.item').length).toBeLessThan(100);});
});
自动化测试矩阵：
测试类型工具链覆盖率要求执行频率
单元测试Jest + Vue Test Utils≥80%每次提交
集成测试Cypress Component Test≥70%每日构建
E2E测试Playwright≥60%发布前验证
性能测试Lighthouse90+评分每周监控
安全测试OWASP ZAP0漏洞迭代周期验收

8. 部署运维：容器化与持续交付

组件独立部署方案

# 多阶段构建Dockerfile
FROM node:18 as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
RUN npm run build
​
FROM nginx:1.23-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY security-headers.conf /etc/nginx/conf.d/
RUN apk add --no-cache modsecurity
​
# 安全增强配置
CMD ["nginx", "-g", "daemon off; error_log /var/log/nginx/error.log debug;"]
部署流水线设计：

  1. 代码扫描阶段

    • SAST静态应用安全测试

    • 依赖漏洞扫描

    • 许可证合规检查

  2. 构建阶段

    • 多环境配置注入

    • 数字签名打包

    • 安全镜像扫描

  3. 部署阶段

    • 蓝绿部署策略

    • 运行时防护注入

    • 自动回滚机制

9. 下篇预告：可视化排课组件的性能优化

深度优化路线图

  1. 时间复杂度优化

    • 冲突检测算法从O(n²)优化到O(n log n)

    • 空间换时间策略实践

  2. WebAssembly加速

// 冲突检测核心算法（Rust实现）#[wasm_bindgen]pub fn find_conflicts(schedules: &JsValue) -> JsValue {let schedules: Vec<Schedule> = schedules.into_serde().unwrap();let mut conflicts = Vec::new();// 优化后的检测逻辑JsValue::from_serde(&conflicts).unwrap()}

  1. 内存泄漏排查实战

    • 堆内存分析工具使用

    • 事件监听器泄漏定位

    • WeakMap的应用实践

  2. Canvas渲染优化

    • 离屏渲染技术

    • 动态细节分级渲染

    • GPU加速策略

结语：构建企业级组件生态

在"代码铸盾，安全为矛"的理念指导下，我们完成了：

  1. 全链路安全体系：从代码开发到线上运行的多层防护

  2. 工程化深度整合：构建效率提升300%的标准化流程

  3. 智能化演进：AI辅助开发与自动化运维的结合

  4. 开放生态建设：通过微前端架构实现跨团队协作

下篇终极剧透：《可视化排课组件性能优化全解》将包含：

  • WebAssembly性能对比实测数据

  • Chrome Performance工具深度教学

  • 内存泄漏的六种武器定位法

  • 可视化安全监控大屏设计

相关文章：

Vue.js组件化开发实战：从工程化到安全纵深设计

文章目录 开篇&#xff1a;现代前端组件化演进之路 组件设计核心&#xff1a;高内聚低耦合实践 工程化基石&#xff1a;从Webpack到Monorepo 安全纵深设计&#xff1a;RASP在组件层的实现 实战&#xff1a;动态表单组件的三次进化 进阶篇&#xff1a;组件工厂模式与策略模…...

编程日记 2025/9/19 11:41:55

【深度解析】SkyWalking 10.2.0版本安全优化与性能提升实战指南

前言 Apache SkyWalking 作为云原生可观测性领域的佼佼者&#xff0c;在微服务架构监控中扮演着至关重要的角色。然而&#xff0c;官方版本在安全性、镜像体积和功能扩展方面仍有优化空间。本文将分享一套完整的 SkyWalking 10.2.0 版本优化方案&#xff0c;从安全漏洞修复到镜…...

编程日记 2025/9/19 11:35:44

NOIP2011提高组.玛雅游戏

目录 题目算法标签: 模拟, 搜索, d f s dfs dfs, 剪枝优化思路*详细注释版代码精简注释版代码 题目 185. 玛雅游戏 算法标签: 模拟, 搜索, d f s dfs dfs, 剪枝优化 思路 可行性剪枝 如果某个颜色的格子数量少于 3 3 3一定无解因为要求字典序最小, 因此当一个格子左边有…...

编程日记 2025/9/18 22:05:03

常微分方程求解全解析：从基础到矩阵方法深度实践

常微分方程求解全解析：从基础到矩阵方法深度实践 一、常微分方程基础与解法体系 1．微分方程基本概念解析 常微分方程的阶数指方程中未知函数导数的最高阶数。通解是包含任意常数且常数个数与方程阶数相同的解，特解则是通解中任意常数取特定值得到的解。以自由落体运动为例…...

编程日记 2025/9/19 11:40:19

Go 微服务框架 | 中间件

文章目录 定义中间件前置中间件后置中间件路由级别中间件 定义中间件 中间件的作用是给应用添加一些额外的功能&#xff0c;但是不会影响原有应用的编码方式&#xff0c;想用的时候直接添加&#xff0c;不想用的时候也可以轻松去除&#xff0c;实现所谓的可插拔。中间件的实现…...

编程日记 2025/9/18 19:55:27

【HarmonyOS Next之旅】DevEco Studio使用指南(十二)

目录 1 -> Code Linter代码检查 2 -> 配置代码检查规则 3 -> 查看/处理代码检查结果 1 -> Code Linter代码检查 Code Linter针对ArkTS/TS代码进行最佳实践/编程规范方面的检查。 可根据扫描结果中告警提示手工修复代码缺陷&#xff0c;或者执行一键式自动修复…...

编程日记 2025/9/19 11:35:35

Java设计模式之桥接模式：从入门到架构级实践

1. 什么是桥接模式&#xff1f; 桥接模式&#xff08;Bridge Pattern&#xff09; 是一种结构型设计模式&#xff0c;其核心目标是将抽象部分与实现部分分离&#xff0c;使它们能够独立变化。通过这种方式&#xff0c;桥接模式解决了多层继承带来的复杂性&#xff0c;并增强了…...

编程日记 2025/9/19 11:35:32

Jupyter Lab 无法启动 Kernel 问题排查与解决总结

&#x1f4c4; Jupyter Lab 无法启动 Kernel 问题排查与解决总结 一、问题概述 &#x1f6a8; 现象描述&#xff1a; 用户通过浏览器访问远程服务器的 Jupyter Lab 页面&#xff08;http://xx.xx.xx.xx:8891/lab&#xff09;后&#xff0c;.ipynb 文件可以打开&#xff0c;但无…...

编程日记 2025/9/19 11:35:33

【LeetCode 热题100】73：矩阵置零（详细解析）（Go语言版）

&#x1f680; 力扣热题 73&#xff1a;矩阵置零&#xff08;详解 多种解法&#xff09; &#x1f4cc; 题目描述 给定一个 m x n 的整数矩阵 matrix&#xff0c;如果一个元素为 0&#xff0c;则将其所在行和列的所有元素都设为 0。请你 原地 使用常量空间解决。 &#x1f3a…...

编程日记 2025/9/19 11:38:21

OminiAdapt：学习跨任务不变性，实现稳健且环境-觉察的机器人操作

25年3月来自中科大、北理工和中科院自动化所的论文“OminiAdapt: Learning Cross-Task Invariance for Robust and Environment-Aware Robotic Manipulation”。 随着具身智能的快速发展&#xff0c;利用大规模人体数据对人形机器人进行高水平的模仿学习&#xff0c;成为学术界…...

编程日记 2025/9/19 11:41:10

Vue3中父组件将一个ref定义的对象类型传递给子组件的解包机制

在Vue3中&#xff0c;当父组件将一个ref定义的对象类型传递给子组件时&#xff0c;子组件接收到的不是原始的Ref类型&#xff0c;而是该ref的.value值&#xff0c;即被解包后的响应式对象。具体行为如下&#xff1a; 关键点解析&#xff1a; 自动解包机制&#xff1a; Vue3在模…...

编程日记 2025/9/15 3:18:57

批量将 SVG 转换为 jpg/png/Word/PDF/ppt 等其它格式

SVG&#xff08;可缩放矢量图形&#xff09;是一种广泛使用的图像格式&#xff0c;因其矢量特性在不同分辨率下都能保持清晰&#xff0c;但在某些情况下&#xff0c;用户可能需要将 SVG 格式的图片转换为更常见的位图格式&#xff0c;如 JPG、PNG 等&#xff0c;以适应不同平台…...

编程日记 2025/9/19 11:38:20

微服务篇——SpringCloud

服务注册 Spring Cloud5大组件有哪些&#xff1f; 服务注册和发现是什么意思&#xff1f;Spring Cloud如何实现服务注册发现&#xff1f; nacos与eureka的区别 负载均衡 如何实现负载均衡&#xff1f; Ribbon负载均衡的策略有哪些&#xff1f; 如何自定义负载均衡的策略&…...

编程日记 2025/9/19 11:41:11

Windows 11 家庭中文版 安装docker desktop 无法开启自启动问题处理

前言 我在某台Windows 11家庭中文版的电脑上安装Docker Desktop后&#xff0c;老是无法开机启动&#xff0c;已经按照Docker Desktop 设置调整的方式设置了开机启动&#xff0c;但是重启后发现还是无法自启动&#xff0c;需要手动点击启动。然后使用任务计划程序新建一个开机启…...

编程日记 2025/9/19 11:35:34

蓝桥杯备考

先浅学一遍数据结构&#xff0c;不会拉倒&#xff0c;找点简单题练练语法基础 然后边学边刷二分查找和双指针 递归和暴力&#xff0c;边学边刷 学习贪心&#xff0c;练个几十道 再去过下数据结构 开始算法:搜索&#xff0c;动态规划&#xff0c; 搜索很重要&#xff0c;深…...

编程日记 2025/9/10 1:28:31

Elasticsearch 系列专题 - 第一篇：Elasticsearch 入门

Elasticsearch 是一个功能强大的开源分布式搜索和分析引擎，广泛应用于日志分析、实时搜索、数据可视化等领域。本篇将带你了解 Elasticsearch 的基本概念、安装方法以及简单操作，帮助你快速上手。 1. 什么是 Elasticsearch？ 1.1 Elasticsearch 的定义与核心概念 Elasticse…...

编程日记 2025/9/18 15:03:46

【LeetCode 题解】数据库：1321.餐馆营业额变化增长

一、问题描述 本题给定了一个名为 Customer 的表&#xff0c;记录了餐馆顾客的交易数据&#xff0c;包括顾客 ID、姓名、访问日期和消费金额。作为餐馆老板&#xff0c;我们的任务是分析营业额的变化增长情况&#xff0c;具体来说&#xff0c;就是计算以 7 天&#xff08;某日…...

编程日记 2025/9/19 11:38:07

Apache Nifi安装与尝试

Apache NIFI中文文档 地址&#xff1a;https://nifichina.github.io/ 下载安装配置 1、环境准备 Nifi的运行需要依赖于java环境&#xff0c;所以本机上需要安装java环境&#xff0c;并配置环境变量。 1.1查看本机是否已经存在java环境 请先执行以下命令找出系统中真实可用…...

编程日记 2025/9/18 20:22:37

【Git 常用操作指令指南】

一、初始化与配置 1. 设置全局账户信息 git config --global user.name "用户名" # 设置全局用户名 git config --global user.email "邮箱" # 设置全局邮箱 --global 表示全局生效&#xff0c;若需针对单个仓库配置&#xff0c;可省略该参数 2.…...

编程日记 2025/9/17 19:52:45

Django 生成PDF文件

在这里&#xff0c;我们将学习如何使用Django视图设计和生成PDF文件。我们将使用ReportLab Python PDF库生成PDF&#xff0c;该库可以创建定制的动态PDF文件。 这是一个开源库&#xff0c;可以通过在Ubuntu中使用以下命令轻松下载。 $ pip install reportlab Python Copy …...

编程日记 2025/9/19 11:41:54

多账户使用Github的场景，设置 SSH 多账号使用特定 key

遇到多账户使用Github的场景&#xff0c;常难以管理ssh文件 解决方案&#xff1a; 你可以通过配置 ~/.ssh/config 文件&#xff0c;生成多个SSH key 让 Git 识别不同 key 来对应不同 GitHub 账号。 ✅ 正确的 key 类型有这些常见选项&#xff1a; rsa&#xff1a;老牌算法&a…...

编程日记 2025/9/18 23:18:07

js中this指向问题

在js中&#xff0c;this关键字的指向是一个比较重要的概念&#xff0c;它的值取决于函数的调用方式。 全局状态下 //全局状态下 this指向windowsconsole.log("this", this);console.log("thiswindows", this window); 在函数中 // 在函数中 this指向win…...

编程日记 2025/9/19 11:38:21

BabelDOC ，开源的 AI PDF 翻译工具

BabelDOC 是一款开源智能 PDF 翻译工具&#xff0c;专门为科学论文的翻译而设计。它能够在原文旁边生成翻译文本&#xff0c;实现双语对照&#xff0c;用户无需频繁切换窗口&#xff0c;极大提升了阅读的便利性。此外&#xff0c;BabelDOC 能够完整保留数学公式、表格和图形&am…...

编程日记 2025/9/17 22:19:49

Dify 生成提示词的 Prompt

Dify 生成提示词的 Prompt **第1次提示词****第2次提示词****第3次提示词**总结 Dify 生成提示词是&#xff0c;会和LLM进行3次交互&#xff0c;下面是和LLM进行交互是的Prompt。 以下是每次提示词的概要、目标总结以及原始Prompt&#xff1a; 第1次提示词 概要&#xff1a; …...

编程日记 2025/9/18 0:30:51

在nvim的snippet补全片段中增加函数注释的功能

一、补全片段路径 如果使用nvim,应当在nvim的snippet的插件中增加对应补全的片段&#xff0c;目前我所用的补全的片段路径如下&#xff1a; /home/zhaoky/.local/share/nvim/site/pack/packer/start/vim-snippets.git/snippets我当前补全的是c语言所以使用的片段是c.snippets…...

编程日记 2025/9/14 11:26:59

阿里云负载均衡为何费用高昂？——深度解析技术架构与市场定价策略

本文深度解析阿里云负载均衡&#xff08;SLB&#xff09;产品的定价体系&#xff0c;从技术架构、安全防护、合规成本三个维度揭示费用构成逻辑。通过2023年某跨国企业遭受的混合型DDoS攻击案例&#xff0c;结合Gartner最新安全支出报告&#xff0c;给出企业级负载均衡成本优化…...

编程日记 2025/9/17 8:41:23

大数据（7）Kafka核心原理揭秘：从入门到企业级实战应用

目录 一、大数据时代的技术革命1.1 消息中间件演进史1.2 Kafka核心设计哲学 二、架构深度解构2.1 核心组件拓扑2.1.1 副本同步机制&#xff08;ISR&#xff09; 2.2 生产者黑科技2.3 消费者演进路线 三、企业级应用实战3.1 金融行业实时风控3.2 物联网数据管道 四、生产环境优化…...

编程日记 2025/9/18 22:29:47

01背包 Java

① 记忆化搜索解法&#xff1a; import java.util.*; import java.io.*;public class Main {static int n, m;static int[] v, w;static int[][] memory; // 记忆化数组public static void main(String[] args) throws Exception {BufferedReader br new BufferedReader(new …...

编程日记 2025/9/16 13:17:45

【Kafka基础】消费者命令行完全指南：从基础到高级消费

Kafka消费者是消息系统的关键组成部分&#xff0c;掌握/export/home/kafka_zk/kafka_2.13-2.7.1/bin/kafka-console-consumer.sh工具的使用对于调试、测试和监控都至关重要。本文将全面介绍该工具的各种用法&#xff0c;帮助您高效地从Kafka消费消息。 1 基础消费模式 1.1 从最…...

编程日记 2025/9/19 4:33:03

Seq2Seq - 编码器（Encoder）和解码器（Decoder）

本节实现一个简单的 Seq2Seq&#xff08;Sequence to Sequence&#xff09;模型 的编码器&#xff08;Encoder&#xff09;和解码器&#xff08;Decoder&#xff09;部分。 重点把握Seq2Seq 模型的整体工作流程 理解编码器&#xff08;Encoder&#xff09;和解码器&#xff08…...

编程日记 2025/9/14 4:00:09

@SchedulerLock 防止分布式环境下定时任务并发执行

背景 在一个有多个服务实例的分布式系统中&#xff0c;如果你用 Scheduled 来定义定时任务&#xff0c;所有实例都会执行这个任务。ShedLock 的目标是只让一个实例在某一时刻执行这个定时任务。 使用步骤 引入依赖 当前以redisTemplate为例子&#xff0c;MongoDB、Zookeeper…...

编程日记 2025/9/10 9:38:04

【力扣hot100题】（077）跳跃游戏

我最开始的想法还是太单纯了&#xff0c;最开始想着用回溯法&#xff0c;然后想到上一题的经验又想到了动态规划&#xff0c;虽然知道贪心题不太可能会这么复杂但实在想不出别的办法……果然我的智商做贪心题的极限就只能达到找零问题那种水平…… 最开始的方法&#xff0c;击…...

编程日记 2025/9/16 12:04:58

多光谱相机：林业监测应用（病虫害、外来物种、森林防火识别）

随着气候变暖和人类活动的增加&#xff0c;森林火灾发生的频率和强度都有所上升&#xff0c;而我国森林防火基础设施薄弱&#xff0c;监测预警体系不够完善&#xff0c;扑救能力和应急响应能力有待提高。气候变化导致气温升高、降水分布不均等&#xff0c;影响了树木的生长和发…...

编程日记 2025/9/18 18:15:46

Dynamic Programming（LeetCode 740）

740. 删除并获得点数 相关企业提示给你一个整数数组 nums &#xff0c;你可以对它进行一些操作。 每次操作中&#xff0c;选择任意一个 nums[i] &#xff0c;删除它并获得 nums[i] 的点数。之后&#xff0c;你必须删除 所有 等于 nums[i] - 1 和 nums[i] 1 的元素。 开始你…...

编程日记 2025/9/10 1:05:42

虚拟列表react-virtualized使用（npm install react-virtualized）

1. 虚拟化列表 (List) // 1. 虚拟化列表 (List)import { List } from react-virtualized; import react-virtualized/styles.css; // 只导入一次样式// 示例数据 const list Array(1000).fill().map((_, index) > ({id: index,name: Item ${index},description: This is i…...

编程日记 2025/9/18 22:44:17

[特殊字符] 手机连接车机热点并使用 `iperf3` 测试网络性能

好的&#xff0c;以下是根据你的描述整理出来的步骤及解释&#xff1a; &#x1f4f6; 手机连接车机热点并使用 iperf3 测试网络性能 本文将通过 iperf3 来测试手机和车机之间的网络连接性能。我们会让车机作为服务端&#xff0c;手机作为客户端&#xff0c;进行 UDP 流量传输…...

编程日记 2025/9/16 7:42:14

C#,VB.NET正则表达式法替换代码

如何设置必须是MGBOX开头, msgbox这种注释自动跳过 在 Visual Studio 中使用 Ctrl H 进行替换操作时&#xff0c;若要确保仅替换以 MsgBox 开头的代码&#xff0c;同时跳过注释里的 MsgBox&#xff0c;可以利用正则表达式来实现。以下为你详细介绍操作步骤&#xff1a; 1. 打…...

编程日记 2025/9/17 23:52:14

从MySQL快速上手大数据Hive

从MySQL快速上手大数据Hive Hive简介 ​ hive是基于Hadoop构建的一套数据仓库分析系统&#xff0c;它提供了丰富的SQL查询方式&#xff08;DML&#xff09;来分析存储在Hadoop分布式文件系统中的数据: 可以将结构化的数据文件映射为一张数据库表&#xff0c;并提供完整的SQL查…...

编程日记 2025/9/9 21:54:47

基于华为云kubernetes的应用多活的示例

1 概述 为避免地域级别的故障&#xff0c;需要将单机房架构变成双地域架构&#xff08;两个机房物理距离越远&#xff0c;网络延时越大&#xff0c;网延时是业务研发首先关注的&#xff09;。单边写的多机房架构&#xff0c;是落地性比较大的一个方案&#xff0c;相对于单元化…...

编程日记 2025/9/17 22:12:08

Linux动态库 vs 静态库：创建步骤与优缺点对比

Linux系列 文章目录 Linux系列前言一、动静态库的概念引入1.1 库的基本概念1.2 静态库&#xff08;Static Library&#xff09;1.3 动态库&#xff08;Dynamic Library&#xff09;1.4 动静态库的核心区别 二、动静态库的实现2.1 静态库的创建及使用2.2 动态库的创建和使用三、…...

编程日记 2025/9/17 14:20:19

分析下HashMap容量和负载系数，它是怎么扩容的？

很好&#xff0c;我们继续深入分析 HashMap 中 容量&#xff08;capacity&#xff09; 和 负载因子&#xff08;load factor&#xff09;&#xff0c;以及它是如何进行 扩容&#xff08;resize&#xff09; 的。 &#x1f9f1; 一、容量&#xff08;capacity&#xff09;与负载…...

编程日记 2025/9/18 11:05:33

Linux权限管理：从入门到实践

目录 引言 ​编辑一、Linux用户类型 二、文件访问者分类 三、文件类型和访问权限 &#xff08;一&#xff09;文件类型 &#xff08;二&#xff09;基本权限 四、文件访问权限设置方法 &#xff08;一&#xff09;chmod命令 &#xff08;二&#xff09;chown命令 &…...

编程日记 2025/9/18 12:47:36

计算机网络(1)

名称解析 名称解析&#xff1a;将名称解析成对应地址&#xff0c;名字-->IP 名称解析优点&#xff1a;便以记忆、解耦&#xff08;断开直接的练习&#xff09; 容器 mini的虚拟机&#xff0c;该容器地址是动态的、生命周期短暂&#xff1b;可实现登录功能 如果用户想要登录该…...

编程日记 2025/9/16 17:21:21

第十一天 - MySQL/SQLite操作 - 数据库备份脚本 - 练习：监控数据存储系统

数据库实战入门&#xff1a;从零构建监控数据存储系统 前言 在物联网和系统监控领域&#xff0c;数据存储是核心基础环节。本文将通过MySQL/SQLite操作、数据库备份脚本和监控数据存储实战三个模块&#xff0c;带领初学者快速掌握数据库在真实场景中的应用。文章包含25个代码…...

编程日记 2025/9/9 0:15:33

编写文生视频提示词，制作抖音爆款视频

编写文生视频提示词&#xff0c;制作抖音爆款视频 一、理解文生视频提示词1.1 定义提示词1.1.1 提示词与创作工具的关系1.1.2 文生视频的功能 1.2 提示词的组成1.2.1 主体&#xff08;Subject&#xff09;1.2.2 动作&#xff08;Action&#xff09;1.2.3 场景&#xff08;Scene…...

编程日记 2025/9/17 10:39:20

Linux: 线程控制

目录 一 前言 二 线程控制 1. POSIX线程库(原生线程库) 2. 创建线程 2.1 pthread_create 2.2pthread_self()获取线程id 3.线程终止 3.1.return 方式 3.2 pthread_exit 4 线程等待 三 理解线程tid 一 前言 在上一篇文章中我们已经学习了线程的概念&#xff0c;线程的创…...

编程日记 2025/9/19 1:37:57

为什么 npm list -g 没显示 node_modules？✨

揭秘&#xff1a;为什么 npm list -g 没显示 node_modules&#xff1f;&#x1f575;️‍♂️✨ 嗨&#xff0c;各位代码探险家&#xff01;&#x1f44b; 今天我们要破解一个 npm 小谜团&#xff1a;运行 npm list -g --depth0 时&#xff0c;为什么输出的路径里看不到 node_…...

编程日记 2025/9/19 6:25:40

华为数字芯片机考2025合集4已校正

单选 1. 题目内容 影响芯片成本的主要因素是 Die Size 和封装&#xff0c;但电源、时钟等因素&#xff0c;特别是功耗对解决方案的成本影响较大&#xff0c;因此低成本设计需要兼顾低功耗设计&#xff1a;&#xff08;&#xff09; 1. 解题步骤 1.1 分析题目 Die Size&…...

编程日记 2025/9/15 13:34:42

达摩院Paraformer-ONNX模型：一站式高精度中文语音识别工业级解决方案

文章目录 核心技术创新三大部署方案对比1. Docker极简部署&#xff08;推荐&#xff09;2. Python API直连调用3. 客户端实时测试工具 高阶调优技巧典型应用场景高频问题解决方案参考 阿里达摩院推出的speech_paraformer-large-vad-punc_asr_nat-zh-cn-16k-common-vocab8404-on…...

编程日记 2025/9/18 0:07:46

Llama 4的争议

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2025/9/18 1:20:15