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

html js 原生实现web组件、web公共组件、template模版插槽

news 来源：原创 2025/6/28 23:51:24

在现代浏览器中，通过 class 继承 HTMLElement 可以轻松创建原生 Web Components（自定义元素），并能享受与普通 HTML 元素同等的语义和性能优势。下面将从核心概念、生命周期方法、Shadow DOM、表单关联、自定义属性、以及与 Vue 3 的集成等方面，详细说明如何使用

概览

继承 HTMLElement 起点于 ECMAScript 的 extends 关键字，它用于在类声明或表达式中创建子类。自定义元素本质上是一个继承自 HTMLElement（或某个内置元素接口）的类，注册后即可像普通标签一样使用，同时可在内部封装状态、事件和样式

JavaScript 中的 extends 与 HTMLElement 接口

extends 关键字

extends 用于创建子类，保证子类实例具有父类的属性和方法；必须在子类构造函数中首先调用 super()

HTMLElement 接口

HTMLElement 是所有 HTML 元素的基础接口，提供访问 DOM 属性、事件和方法，如 id、innerHTML、click() 等

定义自定义元素

自主式（Autonomous） vs. 内置扩展（Customized built-in）,自主式元素：直接继承 HTMLElement，需从零实现行为,内置扩展元素：继承特定接口（如 HTMLParagraphElement），在保留原有行为基础上添加新功能；但 Safari 尚不支持此模式
最小示例

class MyPopup extends HTMLElement {constructor() {super(); // 必须调用// 初始状态或事件绑定}connectedCallback() {this.textContent = 'Hello Web Component';}
}
customElements.define('my-popup', MyPopup);

浏览器解析到时，会实例化该类并调用相应生命周期方法

生命周期回调

自定义元素提供多种回调，可在不同阶段执行逻辑

connectedCallback()：元素插入文档时触发，推荐在此完成 DOM 渲染和事件绑定
disconnectedCallback()：元素从文档移除时触发，用于清理资源。
adoptedCallback()：元素被移动到新文档时触发。
attributeChangedCallback(name, oldV, newV)：监听属性变化，需通过静态 observedAttributes 指定监控列表

Shadow DOM 与样式封装

通过 this.attachShadow({ mode: ‘open’ }) 创建 Shadow 根，实现样式和 DOM 的隔离

constructor() {super();const shadow = this.attachShadow({ mode: 'open' });shadow.innerHTML = `<style>p { color: red; }</style><p><slot></slot></p>`;
}

插槽支持内容投影。
Shadow DOM 规范详情可参阅 MDN «Using shadow DOM»

表单关联（Form-associated）

class MyCheckbox extends HTMLElement {static formAssociated = true;  // 启用表单关联constructor() {super();this._internals = this.attachInternals(); // 获取 ElementInternals}// ...实现 name、value、checked 等属性
}
customElements.define('my-checkbox', MyCheckbox);

attachInternals() 返回 ElementInternals，用于控制表单行为和 ARIA 信息

TypeScript 中扩展 HTMLElement

declare global {interface HTMLElementTagNameMap {'my-element': MyElement;}
}
class MyElement extends HTMLElement {foo!: string; // 自定义属性
}
customElements.define('my-element', MyElement);

在 Vue 3 中定义原生 Custom Elements

import { defineCustomElement } from 'vue';
import MyVueComp from './MyVueComp.ce.vue';const MyVueElement = defineCustomElement({...MyVueComp,styles: ['/* inlined CSS */']
});
customElements.define('my-vue-element', MyVueElement);

综合示例

<!DOCTYPE html>
<html>
<head><script type="module" src="my-element.js"></script>
</head>
<body><my-popup></my-popup><my-vue-element some-prop="value"></my-vue-element>
</body>
</html>JS----
// my-element.js
class MyPopup extends HTMLElement {constructor() {super();
//    mode: 'open' 允许外部脚本访问 element.shadowRootthis.attachShadow({ mode: 'open' });}connectedCallback() {this.shadowRoot.innerHTML = `<p>自定义弹窗内容</p>`;}
}
customElements.define('my-popup', MyPopup);

生命周期

class MyEl extends HTMLElement {static get observedAttributes() { return ['foo']; }constructor() {super(); // 必须调用// 请勿在此访问 DOM}connectedCallback() {// 渲染 UI、绑定事件}attributeChangedCallback(name, oldVal, newVal) {// 响应属性变化}disconnectedCallback() {// 清理事件、定时器}
}
customElements.define('my-el', MyEl);

Shadow DOM是什么？

Shadow DOM是Web Components标准的一部分，它允许开发者将一个隐藏的、独立的DOM树附加到一个元素上。这就像是在一个主文档的DOM中创建了一个“影子”DOM，这个“影子”DOM有自己的结构和样式，与主文档的DOM相互隔离

隔离性

样式隔离：Shadow DOM中的样式不会泄漏到主文档中，主文档中的样式也不会影响Shadow DOM内部的元素。例如，如果在主文档中有一个全局的p标签样式（如p { color: blue; }），在Shadow DOM内部的p标签不会受到这个样式的影响，除非在Shadow DOM内部显式地引用了外部样式。
结构隔离：Shadow DOM内部的元素结构对于外部是隐藏的。这意味着外部JavaScript代码不能直接访问Shadow DOM内部的元素，就像它们被封装在一个黑盒中一样。例如，在一个自定义元素的Shadow DOM中，有一个元素，外部脚本不能直接通过document.querySelector(‘input’)来获取这个输入元素，因为它被封装在Shadow DOM中

class MyShadowDOMElement extends HTMLElement {constructor() {super();// 创建影子DOMconst shadow = this.attachShadow({mode: 'open'});// 创建内部的HTML元素const div = document.createElement('div');div.textContent = 'Content inside Shadow DOM';// 创建样式const style = document.createElement('style');style.textContent = 'div { color: blue; }';// 将样式和元素添加到影子DOM中shadow.appendChild(style);shadow.appendChild(div);}
}
customElements.define('my - shadow - dom - element', MyShadowDOMElement);

template 模版、插槽

模版<template id="card-tpl"><style>.card { border:1px solid #ccc; padding:1em; border-radius:4px; }::slotted(h2) { margin-top:0; }</style><div class="card"><header><slot name="header">默认标题2</slot></header><section><slot></slot></section><footer><slot name="footer">默认页脚</slot></footer></div></template>
js----
class MyCard extends HTMLElement {constructor() {super();const tpl = document.getElementById('card-tpl').content;this.attachShadow({mode:'open'}).appendChild(tpl.cloneNode(true));}}customElements.define('my-card', MyCard);
使用---
<my-card><h2 slot="header">卡片标题</h2><p>这里是卡片主体内容。</p><small slot="footer">© 2025</small></my-card>

html js 原生实现web组件、web公共组件、template模版插槽

在现代浏览器中，通过 class 继承 HTMLElement 可以轻松创建原生 Web Components（自定义元素），并能享受与普通 HTML 元素同等的语义和性能优势。下面将从核心概念、生命周期方法、Shadow DOM、表单关联、自定义属性、以及与 Vue 3 …...

编程日记 2025/6/28 23:51:24

【爬虫】DrissionPage-2

之前的三个对象是4.0版本，看到的是网上大佬们网上的文章，因为看到官网更新了4.1，我觉得有必要了解一下：文档地址：💥 4.1 功能介绍 | DrissionPage官网点击链接看官网就行，下面一样的。 4.1 的…...

编程日记 2025/6/28 23:31:54

鸿蒙OSUniApp 制作个人信息编辑界面与头像上传功能#三方框架 #Uniapp

UniApp 制作个人信息编辑界面与头像上传功能前言最近在做一个社交类小程序时，遇到了需要实现用户资料编辑和头像上传的需求。这个功能看似简单，但要做好用户体验和兼容多端，还是有不少细节需要处理。经过一番摸索，总结出了一套…...

编程日记 2025/6/28 22:53:07

系统漏洞扫描服务：维护网络安全的关键与服务原理？

系统漏洞扫描服务是维护网络安全的关键措施，能够迅速发现系统中的潜在风险，有效预防可能的风险和损失。面对网络攻击手段的日益复杂化，这一服务的重要性日益显著。服务原理系统漏洞扫描服务犹如一名恪尽职守的安全守护者。它运用各类扫描…...

编程日记 2025/6/28 23:48:41

[原创](现代C++ Builder 12指南): 在界面开发中, 如何利用C++高级特性“折叠表达式“?.

[序言] 在现代C++编程中, 现代C++引入的折叠表达式(Fold Expressions)是一项极具价值的特性, 它为模板编程带来了更高的灵活性和简洁性. 折叠表达式允许在参数包上执行简洁的折叠操作, 从而减少冗余代码, 提升代码的可读性与维护性. 在界面开发领域, 特别是使用C++ Builder 12进…...

编程日记 2025/6/29 0:41:56

KUKA机器人中断编程3—暂停功能的编程

在KUKA机器人的使用过程中，对于调试一个项目，当遇到特殊情况时需要暂停机器人，等异常情况处理完成后再继续机器人的程序运行。wait for指令是等待一个输入信号指令，没有输入信号，机器人一直等待。在一定程度上程序也不…...

编程日记 2025/6/28 23:33:36

【LeetCode 热题 100】反转链表 / 回文链表 / 有序链表转换二叉搜索树 / LRU 缓存

⭐️个人主页：小羊 ⭐️所属专栏：LeetCode 热题 100 很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录相交链表反转链表回文链表环形链表环形链表 II合并两个有序链表两数相加删除链表的倒数第 N 个结点两两交换链表中的…...

编程日记 2025/6/29 10:19:01

Seata源码—1.Seata分布式事务的模式简介

大纲 1.Seata分布式事务框架简介 2.Seata AT模式实现分布式事务的机制 3.Seata AT模式下的写隔离机制 4.Seata AT模式下的读隔离机制 5.官网示例说明Seata AT模式的工作机制 6.Seata TCC模式的介绍以及与AT模式区别 7.Seata Saga模式的介绍 8.单服务多个库的分布式事务…...

编程日记 2025/6/28 22:53:09

牛客——签到题

分析我拿到题就去看了示例，可以发现，并非是让难度最小，或者难度系数出现次数最多的成为签到题的难度。那我就有点懵了。。。。。。但仔细观察题目本身的特定条件和目标，即在满足选择 m 道题的前提下，尽可能多地选择…...

编程日记 2025/6/29 0:53:08

【idea】调试篇 idea调试技巧合集

前言：之前博主写过一篇idea技巧合集的文章，由于技巧过于多了，文章很庞大，所以特地将调试相关的技巧单独成章, 调试和我们日常开发是息息相关的，用好调试可以事半功倍文章目录 1. idea调试异步线程2. idea调试stream流…...

编程日记 2025/6/28 23:30:56

k8s监控方案实践补充（一）：部署Metrics Server实现kubectl top和HPA支持

k8s监控方案实践补充（一）：部署Metrics Server实现kubectl top和HPA支持文章目录 k8s监控方案实践补充（一）：部署Metrics Server实现kubectl top和HPA支持一、Metrics Server简介二、Metrics Server实战部署…...

编程日记 2025/6/28 23:46:44

直流电机风速仪

在处理直流电机风速仪的 ADC 读取问题时，下面为你详细介绍实现方法。硬件连接风速仪的输出通常是模拟信号，所以需要把它连接到微控制器的 ADC 输入引脚。比如，在 Arduino 上可以连接到 A0 - A5 这类模拟输入引脚。 ADC 读取原理风速仪…...

编程日记 2025/6/28 22:53:10

dify 连接不上ollama An error occurred during credentials validation:

三大报错 An error occurred during credentials validation: HTTPConnectionPool(hosthost.docker.internal, port11434): Max retries exceeded with url: /api/chat (Caused by NameResolutionError("<urllib3.connection.HTTPConnection object at 0x7f26fc3c00b0&…...

编程日记 2025/6/29 0:38:11

19、云端工业物联网生态组件 - 工厂能效与预测维护 - /数据与物联网组件/cloud-iiot-factory-analysis

76个工业组件库示例汇总云端工业物联网生态组件 - 工厂能效与预测维护 (模拟) 概述这是一个交互式的 Web 组件，旨在模拟一个云端工业物联网 (IIoT) 平台的核心界面，专注于工厂层面的能效分析和基于传感器数据的预测性维护概念。用户可以监控模拟的设…...

编程日记 2025/6/28 22:54:06

python打卡day25

python的异常处理机制知识点回顾： 异常处理机制debug过程中的各类报错try-except机制try-except-else-finally机制在即将进入深度学习专题学习前，我们最后差缺补漏，把一些常见且重要的知识点给他们补上，加深对代码和流程的理解。…...

编程日记 2025/6/29 0:36:08

Jmeter变量传递介绍

文章目录一、Jmeter变量类型及作用域二、变量传递方式1. 用户定义变量（User Defined Variables）2. CSV 数据文件（CSV Data Set Config）3.正则表达式提取器4.后置处理器（Post Processor)4.1BeanShell/JSR223 后置处理器…...

编程日记 2025/6/28 22:53:18

机器学习 Day16 聚类算法，数据降维

聚类算法 1.简介 1.1 聚类概念无监督学习：聚类是一种无监督学习算法，不需要预先标记的训练数据相似性分组：根据样本之间的相似性自动将样本归到不同类别相似度度量：常用欧式距离作为相似度计算方法 1.2 聚类vs分类聚类&…...

编程日记 2025/6/28 23:10:42

白日梦：一个方便快捷的将故事制作成视频的工具

我有故事，但我想把它制作成视频，有没有什么好用的工具可以使用呢？如果你也被类似的问题困扰，那么今天分享的这个工具将会解决这个问题。从需求来看，我们希望的是纯文本的故事输入，完整的故事视频输出&#…...

编程日记 2025/6/28 23:20:04

ultralytics中tasks.py---parse_model函数解析

一、根据scale获取对应的深度、宽度和最大通道数具体例如yaml文件内容如下： depth=0.33,那么重复的模块例如C2f原本重复次数是3，6，6，3，那么T对应的模型重复次数就是三分之一即1，1，2，1次。这个在后面定义的： width=0.25，max_channels=1024 原本c2=64,但经过make_div…...

编程日记 2025/6/28 23:12:56

Codeforces Round 1003 (Div. 4)

A. Skibidus and Amog’u 题目大意给你一个字符串，把末尾的us换成i 解题思路删掉最后两个加上“i”即可代码实现 #include <bits/stdc.h>using i64 long long;int main() {std::ios::sync_with_stdio(false);std::cin.tie(0);std::cout.tie(0);int …...

编程日记 2025/6/28 23:47:56

基于RFSOC ZU28DR+DSP 6U VPX处理板

板卡概述基于RFSOC ZU28DRDSP 6U VPX处理板，是一款基于6U VPX总线架构的高速信号处理平台，数模混合信号处理卡，采用 Xilinx ZYNQ UltraScale RFSoC ZU28DR和TI DSP TMS320C6678组合设计，两者之间通过4x 5G SRIO互联。本板卡可实…...

编程日记 2025/6/28 23:43:07

C# 通过脚本实现接口

以前C#脚本用的委托注入模式，今天在AI提示下，尝试用脚本直接实现接口，然后C#可以动态或指定新类型创建接口实现对象。从代码角度看，稍显复杂，但脚本方面显得更简洁和有条理。引用包需要Microsoft.CodeAnalysis、Micro…...

编程日记 2025/6/29 0:03:21

代码随想录算法训练营Day58

力扣695.岛屿的最大面积【medium】力扣827.最大人工岛【hard】一、力扣695.岛屿的最大面积【medium】题目链接：力扣695.岛屿的最大面积视频链接：代码随想录 1、思路和岛屿数量那道题很像，只是递归这边要多一个怎么计算面积&#xff0c…...

编程日记 2025/6/29 0:19:23

若依框架页面

1.页面地址若依管理系统 2.账号和密码管理员账号admin 密码admin123 运维账号yuwei 密码123456 自己搭建的地址方便大家学习，不要攻击哦，谢谢啊...

编程日记 2025/6/29 0:20:45

redis 缓存穿透，缓存击穿，缓存雪崩

一：什么是缓存 （1）计算机：cpu、内存、磁盘，cpu任何需要的数据都要从内容中读入数据放入cpu,从cup内部添加一个缓存 （2）web开发的每个阶段都可以添加缓存 （3）缓存优缺点&a…...

编程日记 2025/6/29 0:20:39

ORACLE查看归档是否打开

一、使用V$DATABASE视图 SELECT log_mode FROM v$database; 结果说明： ARCHIVELOG - 数据库处于归档模式 NOARCHIVELOG - 数据库处于非归档模式二、使用v$instance视图 SELECT archiver FROM v$instance; 结果说明： STARTED - 归档进程已启动(归档模…...

编程日记 2025/6/28 22:53:11

Python环境管理工具深度指南：pip、Poetry、uv、Conda

Python环境管理工具深度指南：pip、Poetry、uv、Conda Python开发中，环境管理和依赖管理是不可避开的重要话题。合理地管理项目的Python环境（尤其是虚拟环境）有助于隔离不同项目的依赖，避免版本冲突，并确保…...

编程日记 2025/6/28 22:53:13

高等数学第七章---微分方程（§7.4-§7.5可降阶的高阶微分方程、二阶线性微分方程）

7.4 可降阶的高阶微分方程某些类型的高阶微分方程可以通过适当的变量代换，将其阶数降低，从而化为阶数较低的方程进行求解。一、 y ( n ) f ( x ) y^{(n)}f(x) y(n)f(x) 型方程特征：方程的左端是 y y y 的 n n n 阶导数，右…...

编程日记 2025/6/29 9:55:55

Jmeter对服务端进行压测快速上手

安装下载安装jmeter的之前必须先装有JDK 官网下载地址：https://archive.apache.org/dist/jmeter/binaries/ jmeter3.0的对应jdk1.7，jmeter4.0对应jdk1.8以上，否者启用jmeter也会报错配置配置环境变量在系统变量PATH上加上: %JMET…...

编程日记 2025/6/28 22:54:15

【嵌入模型与向量数据库】

目录一、什么是向量？ 二、为什么需要向量数据库？ 三、向量数据库的特点四、常见的向量数据库产品 FAISS 支持的索引类型 vs 相似度五、常见向量相似度方法对比六、应该用哪种七、向量数据库的核心逻辑 🔍 示例任务：…...

编程日记 2025/6/28 22:53:12

鸿蒙OSUniApp 开发实时聊天页面的最佳实践与实现#三方框架 #Uniapp

使用 UniApp 开发实时聊天页面的最佳实践与实现在移动应用开发领域，实时聊天功能已经成为许多应用不可或缺的组成部分。本文将深入探讨如何使用 UniApp 框架开发一个功能完善的实时聊天页面，从布局设计到核心逻辑实现，带领大家一步步打造专…...

编程日记 2025/6/29 0:03:57

React构建组件

React构建组件 React 组件构建方式详解 React 组件的构建方式随着版本迭代不断演进，目前主要有函数组件和类组件两种核心模式，并衍生出多种高级组件设计模式。以下是完整的构建方式指南： 文章目录 React构建组件React 组件构建方式详解…...

编程日记 2025/6/29 0:23:47

auto.js面试题及答案

以下是常见的 Auto.js 面试题及参考答案，涵盖基础知识、脚本编写、运行机制、权限、安全等方面，适合开发岗位的技术面试准备： 一、基础类问题什么是 Auto.js？它的主要用途是什么？ 答案： Auto.js 是一个…...

编程日记 2025/6/28 22:53:14

OPC UA + ABP vNext 企业级实战：高可用数据采集框架指南

🚀📊 OPC UA ABP vNext 企业级实战：高可用数据采集框架指南 🚀 📑 目录 🚀📊 OPC UA ABP vNext 企业级实战：高可用数据采集框架指南 🚀一、前言 🎯二、系统…...

编程日记 2025/6/28 22:54:44

【springcloud学习(dalston.sr1)】Ribbon负载均衡（七）

该系列项目整体介绍及源代码请参照前面写的一篇文章【springcloud学习(dalston.sr1)】项目整体介绍（含源代码）（一） （一）Ribbon 负载均衡的理解 ribbon是一种客户端的负载均衡。类似于比如我们在火车站窗口…...

编程日记 2025/6/28 22:53:15

编程题 03-树1 树的同构【PAT】

文章目录题目输入格式输出格式输入样例1（对应图一）输出样例1输入样例2（对应图二）输出样例2 题解解题思路完整代码编程练习题目集目录题目给定两棵树 T 1 T_1 T1 和 T 2 T_2 T2 。如果 T 1 T_1 T1 可以通过若干次左右…...

编程日记 2025/6/29 0:56:02

团结引擎开源车模 Sample 发布：光照渲染优化动态交互全面体验升级

光照、材质与交互效果的精细控制，通常意味着复杂的技术挑战，但借助 Shader Graph 14.1.0(已内置在团结引擎官方 1.5.0 版本中)，这一切都变得简单易用。通过最新团结引擎官方车模 Sample，开发者能切身感受到全新光照优化与编辑功能…...

编程日记 2025/6/28 23:06:54

Chrome安装最新vue-devtool插件

本vue-devtool版本是官方的 v7.6.8版本，兼容性好、功能齐全且稳定。操作步骤： 方法一： 打开谷歌浏览器 --> 右上角三个点 --> 扩展程序 --> 管理扩展程序 --> 加载已解压的扩展程序， 然后选择解压后的文件夹即可。…...

编程日记 2025/6/29 1:20:25

鸿蒙OSUniApp打造多功能图表展示组件 #三方框架 #Uniapp

使用UniApp打造多功能图表展示组件在当前移动应用开发领域，数据可视化已成为不可或缺的一部分。无论是展示销售数据、用户增长趋势还是其他业务指标，一个优秀的图表组件都能有效提升用户体验。UniApp作为一款跨平台开发框架，如何在其中实现…...

编程日记 2025/6/29 1:06:46

海量数据Top k 与查重问题

海量数据求top k 问题： - 求最大的前k个元素、求最小的前k个元素 - 求最大的第k个元素、求最小的第k个元素解法： - 大根堆、小跟堆 -》优先级队列（priority_queue） - 快速分割函数 priority_queue<int,vector<int>…...

编程日记 2025/6/29 1:20:33

Beats

Beats是一个开放源代码的数据发送器。我们可以把Beats作为一种代理安装在我们的服务器上，这样就可以比较方便地将数据发送到Elasticsearch或者Logstash 中。Elastic Stack提供了多种类型的Beats组件。 Beats可以直接将数据发送到Elasticsearch或者发送到Logstash&a…...

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

微型PCB打样厂家选型指南

智能手机、可穿戴设备、医疗电子等高精尖领域，微型PCB（印制电路板）如同设备的“神经中枢”，承载着信号传输、电源分配、元件互联等核心功能。其设计精度与制造质量直接决定了产品的性能上限与可靠性。而打样环节，则是从…...

编程日记 2025/6/29 0:19:08

ISP有感自发

一、黑电平由于传感器，即便在无光的情况下，依然会产生微小的暗电流，这些暗电流可能是噪点会影响后期的调试。因此，我们便将这些电流处理为0，成为纯黑的颜色。可以在源头消除这些误差。如何矫正黑电平： …...

编程日记 2025/6/29 1:10:42

编程技能：字符串函数04，直接使用 strcpy，解决报错

专栏导航本节文章分别属于《Win32 学习笔记》和《MFC 学习笔记》两个专栏，故划分为两个专栏导航。读者可以自行选择前往哪个专栏。 （一）WIn32 专栏导航上一篇：编程技能：字符串函数03，strncpy 回到目录…...

编程日记 2025/6/28 23:36:14

网络编程超时检测，unix域套接字，粘包

刷题： # 超时检测核心要点## 1. 基本类型### 阻塞模式- 永久等待数据，无超时机制- 典型函数：recv()阻塞调用### 非阻塞模式- 立即返回结果（成功/错误）- 设置方式：fcntl(fd, F_SETFL, O_NONBLOCK)### 超时检…...

编程日记 2025/6/29 0:14:16

springboot AOP 接口限流（基于IP的接口限流和黑白名单）

使用 Spring Boot 自定义注解和AOP实现基于IP的接口限流和黑白名单在我们日常开发的项目中为了保证系统的稳定性，很多时候我们需要对系统做限流处理，它可以有效防止恶意请求对系统造成过载。常见的限流方案主要有： 网关限流： NG…...

编程日记 2025/6/28 22:54:16

Python uv包管理器使用指南：从入门到精通

Python uv包管理器使用指南：从入门到精通作为一名Python开发者，你是否曾经为虚拟环境管理和依赖包安装而头疼？今天我要向大家介绍一个强大的工具——uv包管理器，它将彻底改变你的Python开发体验。什么是uv包管理器&#xff1f…...

编程日记 2025/6/28 22:53:20

【计算机网络】TLS中的对称加密和非对称加密的应用，应对第三方抓包的双向https认证

TLS工作流程简化版证书验证流程客户端通过CA的公钥验证服务器数字证书的签名，确保服务器身份可信，防止中间人攻击。预主密钥加密传输客户端生成预主密钥，用服务器证书中的公钥加密后发送给服务器，只有服务器（持有…...

编程日记 2025/6/29 0:38:48

Stable Diffusion WebUI 插件大全：功能详解与下载地址

Stable Diffusion WebUI 的强大之处在于其丰富的插件生态，这些插件可以大幅提升 AI 绘画的效率和质量。本文将详细介绍 21 个常用插件，包括它们的功能、效果说明以及下载地址，帮助你更好地使用 Stable Diffusion WebUI。插件的安装方式直…...

编程日记 2025/6/28 22:53:27

【行为型之策略模式】游戏开发实战——Unity灵活算法架构的核心实现策略

文章目录 🎮 策略模式（Strategy Pattern）深度解析一、模式本质与核心价值二、经典UML结构三、Unity实战代码（动态伤害计算系统）1. 定义策略接口与上下文2. 实现具体策略3. 客户端使用四、模式进阶技巧1. 策略组合2. 策…...

编程日记 2025/6/28 23:19:57

概览