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

HTMLElement、customElements及元素拓展

news 来源：原创 2025/5/11 7:27:35

文章目录

- HTMLElement 与 customElements
- customElements.define() 方法说明
- HTML 元素方法拓展

HTMLElement 与 customElements

HTMLElement
- 概述
  - HTMLElement是一个接口，它表示所有HTML元素。几乎所有的HTML标签（如<div>、<p>、<a>等）在DOM（文档对象模型）中都是HTMLElement接口的实例。它继承自Element接口，提供了一系列用于操作HTML元素的属性和方法。
- 属性示例
  - id：用于获取或设置元素的唯一标识符。例如，在HTML中有<div id="myDiv"></div>，可以通过JavaScript访问document.getElementById('myDiv').id来获取或修改这个id属性。
  - classList：这是一个只读属性，返回一个DOMTokenList，包含了元素的类名。可以使用add()、remove()和toggle()等方法来操作类名。比如，document.querySelector('p').classList.add('highlight')会给选中的<p>元素添加一个名为highlight的类。
  - style：用于获取或设置元素的内联样式。例如，document.getElementById('myDiv').style.backgroundColor = 'blue';会将id为myDiv的元素的背景色设置为蓝色。
- 方法示例
  - getAttribute()和setAttribute()：用于获取和设置元素的属性。例如，对于<img src="image.jpg" alt="An image">，可以通过document.querySelector('img').getAttribute('alt')获取alt属性的值，也可以通过document.querySelector('img').setAttribute('title', 'This is an image')来添加一个title属性。
  - appendChild()：用于将一个节点添加到当前元素的子节点列表的末尾。例如，创建一个新的<span>元素并添加到<div>元素中：
```
let div = document.createElement('div');
let span = document.createElement('span');
div.appendChild(span);
```
customElements
- 概述
  - customElements是一个用于定义自定义HTML元素的API。它允许开发者创建自己的HTML标签，这些自定义元素可以像原生HTML元素一样在HTML文档中使用，并且可以有自己的行为、样式和属性。
- 自定义元素定义方法
  - 使用customElements.define()方法来定义一个自定义元素。这个方法接受两个参数：元素的名称（必须包含一个连字符，以区别于原生HTML元素）和一个类，这个类用于定义元素的行为。例如：
```
class MyCustomElement extends HTMLElement {constructor() {super();this.textContent = 'This is my custom element';}
}
customElements.define('my-custom-element', MyCustomElement);
```
  - 在HTML中就可以像使用其他元素一样使用<my - custom - element></my - custom - element>，它会显示文本This is my custom element。
- 相关方法扩展及元素定义示例 - 生命周期回调方法
  - connectedCallback：当自定义元素被添加到文档DOM时调用。例如，可以在这个方法中设置元素的初始样式或添加事件监听器。
```
class MyCustomElement extends HTMLElement {constructor() {super();}connectedCallback() {this.style.backgroundColor = 'yellow';this.addEventListener('click', () => {console.log('Element clicked');});}
}
customElements.define('my-custom-element', MyCustomElement);
```
  - disconnectedCallback：当自定义元素从文档DOM中移除时调用。可以用于清理资源，如移除事件监听器。
```
class MyCustomElement extends HTMLElement {constructor() {super();}connectedCallback() {this.addEventListener('click', this.clickHandler.bind(this));}clickHandler() {console.log('Clicked');}disconnectedCallback() {this.removeEventListener('click', this.clickHandler.bind(this));}
}
customElements.define('my - custom - element', MyCustomElement);
```
  - attributeChangedCallback：当自定义元素的属性发生变化时调用。需要先定义一个observedAttributes静态方法来指定要观察的属性。例如：
```
class MyCustomElement extends HTMLElement {static get observedAttributes() {return ['data-value'];}constructor() {super();}attributeChangedCallback(name, oldValue, newValue) {if (name === 'data-value') {console.log(`Attribute data-value changed from ${oldValue} to ${newValue}`);}}
}
customElements.define('my-custom-element', MyCustomElement);
```
    当在HTML中改变<my -custom-element data-value="1"></my-custom-element>的data-value属性时，attributeChangedCallback方法就会被触发。

customElements.define() 方法说明

语法
- customElements.define(name, constructor, options)。这是一个静态方法，用于在全局customElements对象上定义一个新的自定义HTML元素。
参数
- name参数
  - 类型：字符串。
  - 描述：这是自定义元素的名称。它必须包含一个连字符（-），这是为了与原生HTML元素名称区分开来。例如，my - custom - element是一个有效的自定义元素名称，而mycustomelement（没有连字符）是不符合规范的。这是一种命名约定，有助于避免与未来可能添加的原生HTML元素名称冲突。
  - 示例：
```
customElements.define('my-special-button', MyButtonElement);
```
- constructor参数
  - 类型：一个继承自HTMLElement的类（构造函数）。
  - 描述：这个类定义了自定义元素的行为和结构。在这个类中，可以通过定义构造函数（constructor）方法来初始化元素的内容，通过connectedCallback方法来定义元素插入到DOM后的行为，通过disconnectedCallback方法来定义元素从DOM中移除后的行为，以及通过attributeChangedCallback方法来响应元素属性的变化。
  - 示例：
```
class MyButtonElement extends HTMLElement {constructor() {super();const button = document.createElement('button');button.textContent = 'Click me';this.appendChild(button);}
}
customElements.define('my - button', MyButtonElement);
```
    在这个示例中，MyButtonElement类是自定义元素my - button的构造函数。当这个自定义元素在HTML中被使用时，它会包含一个带有文本Click me的<button>子元素。
- options参数（可选）
  - 类型：一个对象。
  - 描述：这个参数用于扩展自定义元素的定义。目前，它主要包含一个属性extends，用于创建继承自现有HTML元素的自定义元素。如果使用extends属性，自定义元素将继承指定原生HTML元素的所有属性和方法，并且可以在此基础上添加自己的功能。
  - 示例：
```
class MyStyledInput extends HTMLInputElement {constructor() {super();this.style.border = '1px solid red';}
}
customElements.define('my-styled-input', MyStyledInput, {extends: 'input'});
```
    在这个示例中，my-styled-input是一个自定义元素，它继承自原生的<input>元素。当在HTML中使用<my-styled-input>时，它会表现得像一个普通的<input>元素，但同时具有一个红色边框的样式。这种继承方式使得可以在原生HTML元素的基础上进行定制，而不是从头开始构建一个全新的元素。

HTML 元素方法拓展

原型链扩展
- 概述
  - 可以通过修改HTMLElement.prototype来为所有HTML元素添加新的方法或属性。不过这种方式需要谨慎使用，因为它会影响到所有的HTML元素。
- 示例
  - 为所有HTML元素添加一个highlight方法，用于改变元素的背景颜色为黄色。
```
HTMLElement.prototype.highlight = function() {this.style.backgroundColor = 'yellow';
};
// 在HTML中有一个 <div id="myDiv"></div>
let myDiv = document.getElementById('myDiv');
myDiv.highlight();
```

使用Object.defineProperty()或Object.defineProperties()

概述
- 这些方法可以在单个元素或一组元素上定义新的属性。可以精确地控制属性的可枚举性、可写性和可配置性等特性。

示例 - 定义单个属性

为一个特定的<p>元素定义一个data-custom-attribute属性。

let pElement = document.querySelector('p');
Object.defineProperty(pElement, 'data-custom-attribute', {value: 'This is a custom property',writable: true,enumerable: true,configurable: true
});
console.log(pElement['data-custom-attribute']);

示例 - 定义多个属性

为一个<span>元素同时定义两个属性。

let spanElement = document.querySelector('span');
Object.defineProperties(spanElement, {'data-property-1': {value: 'Value 1',writable: true,enumerable: true,configurable: true},'data - property - 2': {value: 'Value 2',writable: true,enumerable: true,configurable: true}
});
console.log(spanElement['data-property-1']);
console.log(spanElement['data-property-2']);

创建自定义指令（在框架中，如Vue.js或Angular）
- 概述
  - 在前端框架中，自定义指令是一种强大的方式来扩展HTML元素的行为。以Vue.js为例，自定义指令可以用来操作DOM元素，实现诸如自动聚焦、防抖、节流等功能。
- 示例（Vue.js）
  - 创建一个自动聚焦的自定义指令。
```
Vue.directive('autofocus', {inserted: function (el) {el.focus();}
});
// 在Vue组件模板中使用
<template><input v - autofocus>
</template>
```
  - 当这个<input>元素被渲染到DOM中时，它会自动获得焦点。在Angular中也有类似的机制，通过创建自定义指令来扩展HTML元素的功能，只是语法和具体实现细节有所不同。
使用CSS自定义属性（变量）和@apply规则（在CSS中）结合JavaScript操作来间接扩展元素行为
- 概述
  - 虽然CSS自定义属性本身主要是用于样式方面，但可以与JavaScript结合来实现一些元素行为的扩展。可以通过JavaScript动态地改变CSS自定义属性的值，从而影响元素的外观和一些相关的行为（例如，改变主题颜色、布局等）。
- 示例
  - 首先在CSS中定义一个自定义属性和一个使用该属性的规则。
```
 :root {--primary - color: blue;}
.my - element {background - color: var(--primary - color);}
```
- 然后通过JavaScript来改变这个自定义属性的值。

	let root = document.documentElement;root.style.setProperty('--primary-color', 'red');

这样，所有具有my-element类的元素的背景颜色就会从蓝色变为红色，从而间接改变了元素的外观相关的行为。

HTMLElement、customElements及元素拓展

文章目录 HTMLElement 与 customElementscustomElements.define() 方法说明HTML 元素方法拓展 HTMLElement 与 customElements HTMLElement 概述 HTMLElement是一个接口，它表示所有HTML元素。几乎所有的HTML标签（如<div>、<p>、<a>等…...

编程日记 2025/5/11 7:27:35

字玩FontPlayer开发笔记3 性能优化大量canvas渲染卡顿问题

字玩FontPlayer开发笔记3 性能优化大量canvas渲染卡顿问题字玩FontPlayer是笔者开源的一款字体设计工具，使用Vue3 ElementUI开发，源代码： github: https://github.com/HiToysMaker/fontplayer gitee: https://gitee.com/toysmaker/fontpl…...

编程日记 2025/5/6 17:53:02

PyTorch 中 coalesce() 函数详解与应用示例

PyTorch 中 coalesce() 函数详解与应用示例 coalesce： 美 [ˌkoʊəˈlɛs] 合并；凝聚；联结，注意发音引言在 PyTorch 中，稀疏张量（Sparse Tensor）是一种高效存储和操作稀疏数据的方式。稀疏…...

编程日记 2025/5/11 6:37:31

计算机网络（第8版）第3章课后习题--透明传输

【3-11】试分别讨论以下各种情况在什么条件下是透明传输，在什么条件下不是透明传输。(提示：请弄清什么是“透明传输”,然后考虑能否满足其条件。) (1)普通的电话通信。 (2)互联网提供的电子邮件服务。解答 ： 透明传输是指在数据传输…...

编程日记 2025/5/11 4:37:48

JavaScript 日期格式

在 JavaScript 中，日期格式可以通过 Date 对象进行操作和格式化。下面是一些常见的 JavaScript 日期格式及其示例： 1. ISO 8601 格式 ISO 8601 是一种标准的日期和时间表示方法，格式为 YYYY-MM-DDTHH:mm:ss.sssZ，例如： let date = new Date(); console.log(date.toISOS…...

编程日记 2025/5/11 6:44:47

云打印之拼多多打印组件交互协议

拼多多打印组件交互协议相关介绍如下： 1、打印组件下载地址 http://meta.pinduoduo.com/api/one/app/v1/lateststable?appIdcom.xunmeng.pddprint&platformwindows&subTypemain 2、socket连接端口如果是http的话，端口是5000 socket new …...

编程日记 2025/5/11 7:09:18

Oracle数据库如何找到 Top Hard Parsing SQL 语句？

有一个数据库应用程序存在过多的解析问题，因此需要找到产生大量硬解析的主要语句。什么是硬解析 Oracle数据库中的硬解析（Hard Parse）是指在执行SQL语句时，数据库需要重新解析该SQL语句，并创建新的执行计划的过程。这…...

编程日记 2025/5/11 6:35:11

浅谈棋牌游戏开发流程二：后端技术选型与基础环境搭建

一、前言：客户端只是台前，后端才是幕后“指挥中心” 在上一篇“客户端技术”中，我们聊到玩家看到的一切动作、动画、界面逻辑，都靠客户端去渲染和交互。但若没有后端的支撑，玩家点了“出牌”可能就像一拳打在空气里—…...

编程日记 2025/5/11 6:19:26

使用qiankun搭建微前端应用及踩坑

线上演示地址：React App 源码地址：https://github.com/Jiang-K-J/micro-app?tabreadme-ov-file （帮忙点个小星星） 主应用：react 18 子应用：vite vue3 子应用：react 18 安装主应用 $ y…...

编程日记 2025/5/7 5:39:33

Windows 环境配置 HTTPS 服务实战

一、环境准备 win10以上操作系统安装 Certbot申请阿里云\腾讯云域名安装 nginx 1.3以上版本二、Certbot 安装及 SSL 证书生成 Certbot 是一个免费、开源工具，用于自动化在Web服务器上获取和更新SSL/TLS证书。它可以通过Let’s Encrypt服务获取免费的SSL/TLS证书…...

编程日记 2025/5/3 19:55:56

小程序租赁系统开发的优势与应用前景分析

内容概要小程序租赁系统是一种新兴的数字化解决方案，旨在为用户提供更加便捷与高效的租赁服务。它通常包括一系列功能，如在线浏览、即时预定、支付功能以及用户反馈机制。这些系统在使用上极为友好，让用户能够轻松选择所需的商品或服务&…...

编程日记 2025/5/8 13:56:38

Redis（基础篇 + 实践篇）

01 | 基本架构：一个键值数据库包含什么？ Redis 作为一个内存数据存储系统，它的架构设计非常简洁，但功能非常强大。理解其核心架构对高效使用 Redis 至关重要。客户端与服务器架构： 客户端通过 TCP 协议连接到 Redis …...

编程日记 2025/5/10 20:17:44

单片机-独立按键矩阵按键实验

1、按键介绍按键管脚两端距离长的表示默认是导通状态，距离短的默认是断开状态， 如果按键按下，初始导通状态变为断开，初始断开状态变为导通我们开发板是采用软件消抖，一般来说一个简单的按键消抖就是先读取按键的状…...

编程日记 2025/5/5 20:21:29

我用AI学Android Jetpack Compose之入门篇（1）

这篇我们先来跑通第一个Android Jetpack Compose工程，现在新版本的Android Studio，新建工程选择Empty Activity默认就会开启Jetpack Compose的支持，再次声明，答案来自通义千问Ai 文章目录 1.用Android Jetpack Compose需要安装什…...

编程日记 2025/5/7 0:32:21

简单的生产数据库重连策略优化

简单的druid生产数据库重连策略优化 1. 需求我们生产环境有一次在大量请求拥堵后，好多数据库操作都超时了，在此之后数据库的连接池不能正常的获取数据库连接了，我们确认了数据库服务是没有问题的，那么就是连接池的配置有问题&a…...

编程日记 2025/5/9 6:12:03

STM32-笔记37-吸烟室管控系统项目

一、项目需求 1. 使用 mq-2 获取环境烟雾值，并显示在 LCD1602 上； 2. 按键修改阈值，并显示在 LCD1602 上； 3. 烟雾值超过阈值时，蜂鸣器长响，风扇打开；烟雾值小于阈值时，蜂鸣器不响…...

编程日记 2025/5/11 7:10:29

2025-01-04 Unity插件 YodaSheet1 —— 插件介绍

文章目录 1 介绍2 工作原理2.1 ScriptableObject -> YadeSheetData2.2 YadeDatabase 存储多个 YadeSheetData 3 用途4 缺点5 推荐 1 介绍 Yade 提供类似于 Excel 或者 Google Sheets 的表格编辑器，可以轻松地在 Unity 编辑器中编辑，搜索&#xf…...

编程日记 2025/5/8 2:26:13

电子电气架构 --- 安全相关内容汇总

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：所谓鸡汤，要么蛊惑你认命，要么怂恿你拼命，但都是回避问题的根源，以现象替代逻辑，以情绪代替思考，把消极接受现实的懦弱，伪装成乐观面对不幸的…...

编程日记 2025/5/7 13:55:14

科研绘图系列：R语言单细胞数据常见的可视化图形

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍加载R包数据下载导入数据数据预处理图1图2图3图4图5图6系统信息参考介绍单细胞数据常见的可视化图形因为本教程是单细胞数据，因此运行本画图脚本需要电脑的内存最少32Gb 加载…...

编程日记 2025/5/11 7:08:06

【顶刊TPAMI 2025】多头编码（MHE）之极限分类 Part 2：基础知识

目录 1 预热1.1 记号1.2 分类器计算过载问题 2 多头编码（MHE）2.1 标签分解2.2 多头组合（Multi-Head Combination） 论文：Multi-Head Encoding for Extreme Label Classification 作者：Daojun Liang, Haixia …...

编程日记 2025/5/10 13:01:27

Window下启动支持下载或复制老版本的放在bin目录下即可； flink.bat echo off setlocalSET bin%~dp0 SET FLINK_HOME%bin%.. SET FLINK_LIB_DIR%FLINK_HOME%\lib SET FLINK_PLUGINS_DIR%FLINK_HOME%\pluginsSET JVM_ARGS-Xmx512mSET FLINK_JM_CLASSPATH%FLINK_LI…...

编程日记 2025/5/11 6:57:33

一种可复用的AI提效方案：AI点灯

在当今飞速发展的时代，AI技术正不断渗透到我们生活的各个层面，深刻改变着传统的工作方式和生活模式。面对这一重大变革，我们不能被动观望或抗拒，而应积极拥抱AI，将其作为成长的助力。只有与AI协同发展，才能…...

编程日记 2025/5/1 5:36:14

Django 模型

Django 模型 Django 模型是 Django 框架的核心组件之一，它用于定义应用程序的数据结构。在 Django 中，模型是 Python 类，通常继承自 django.db.models.Model。每个模型类代表数据库中的一个表，模型类的属性对应表中的字段。 1. 创建模型创建 Django 模型非常简单。首先…...

编程日记 2025/5/11 7:12:45

【MySQL 探索者日志】第二弹 —— 数据库基础

MySQL系列学习笔记： MySQL探索者日志__Zwy的博客-CSDN博客各位于晏，亦菲们，请点赞关注！ 我的个人主页： _Zwy-CSDN博客目录 1、MySQL服务器，数据库，表关系 2、MySQL登录连接服务器 3、MyS…...

编程日记 2025/5/9 13:30:58

【51单片机-零基础chapter1】

安装软件(配套的有,不多赘述) 1.管理员身份运行keil和破解软件kegen 将CID代码复制粘贴到一定要管理员方式,不然会error 插入板子我的电脑,管理 1.如果是拯救者,查看端口,如果没有则显示隐藏 2.苹果不知道,好像不可以 3.其他电脑在"其他设备找" (注:本人在校已…...

编程日记 2025/5/11 6:45:52

stm32的掉电检测机制——PVD

有时在一些应用中，我们需要检测系统是否掉电了，或者要在掉电的瞬间需要做一些处理。 STM32内部自带PVD功能，用于对MCU供电电压VDD进行监控。 STM32就有这样的掉电检测机制——PVD(Programmable Voltage Detecter)，即可编程电压检…...

编程日记 2025/5/11 6:44:47

电脑steam api dll缺失了怎么办？

电脑故障解析与自救指南：Steam API DLL缺失问题的全面解析在软件开发与电脑维护的广阔天地里，我们时常会遇到各种各样的系统报错与文件问题，其中“Steam API DLL缺失”便是让不少游戏爱好者和游戏开发者头疼的难题之一。作为一名深耕软件开…...

编程日记 2025/5/11 6:15:51

Kotlin 协程基础知识总结七 —— Flow 与 Jetpack Paging3

专题分为五大块： Paging3 的结构组成Flow 与 Paging3下拉刷新上拉刷新离奇 Bug上游数据缓存 Demo 会还原开发迭代的过程，不会直接一步到位。 1、Paging3 加载数据流程 （P105）Paging3 的简介详情可参考官方文档 Paging 库概览&…...

编程日记 2025/5/11 6:48:16

使用JMeter玩转tidb压测

作者： du拉松原文来源： https://tidb.net/blog/3f1ada39 一、前言 tidb是mysql协议的，所以在使用过程中使用tidb的相关工具连接即可。因为jmeter是java开发的相关工具，直接使用mysql的jdbc驱动包即可。二、linux下安装jmet…...

编程日记 2025/5/7 22:27:45

音视频入门基础：MPEG2-PS专题（3）——MPEG2-PS格式简介

一、引言本文对MPEG2-PS格式进行简介。进行简介之前，请各位先下载MPEG2-PS的官方文档。ITU-T和ISO/IEC都分别提供MPEG2-PS的官方文档。但是ITU提供的文档是免费的，ISO/IEC是付费的，所以我们主要阅读ITU提供的官方文档，比如较新…...

编程日记 2025/5/10 17:26:42

ETCD渗透利用指南

目录未指定使用put操作报错未指定操作版本使用get报错首先etcd分为两个版本v2和v3，不同的API结果无论是访问URL还是使用etcdctl进行通信，都会导致问题，例如使用etcdctl和v3进行通信，如果没有实名ETCDCTL_API3指定API版本会直接…...

编程日记 2025/5/11 6:50:27

Python安装（新手详细版）

前言第一次接触Python，可能是爬虫或者是信息AI开发的小朋友，都说Python 语言简单，那么多学一些总是有好处的，下面从一个完全不懂的Python 的小白来安装Python 等一系列工作的记录，并且遇到的问题也会写出&#xff0c…...

编程日记 2025/5/10 17:48:45

SQL 中复杂 CASE WHEN 嵌套逻辑优化

目标：优化复杂的 CASE WHEN 逻辑，提升 SQL 语句的可读性与执行效率，减少多层嵌套带来的复杂性。 1. CASE WHEN 的常见问题嵌套过深：多个条件判断嵌套，难以阅读和维护。重复逻辑：相似逻辑在多个分支中重复…...

编程日记 2025/5/11 6:33:05

【专题】2024年出口跨境电商促销趋势白皮书报告汇总PDF洞察（附原数据表）

原文链接：https://tecdat.cn/?p38722 在当今全球化加速演进、数字经济蓬勃发展的大背景下，跨境电商行业正以前所未有的态势重塑国际贸易格局，成为各方瞩目的焦点领域。根据亚马逊发布的《2024年出口跨境电商促销趋势白皮书》，…...

编程日记 2025/5/11 6:52:40

C# 设计模式（结构型模式）：代理模式

C# 设计模式（结构型模式）：代理模式在软件开发中，有时我们需要通过某种方式间接地访问一个对象，这时就可以使用代理模式（Proxy Pattern）。代理模式通过引入一个代理对象来控制对目标对象的访问…...

编程日记 2025/5/11 6:36:15

单片机复位电路基本理解教程文章·含上拉电阻理解电容开路理解！！！

目录常见复位电路种类复位电路电阻上拉理解电容储能断路理解编写不易，仅供学习，请勿搬运，感谢理解常见元器件驱动电路文章专栏连接 LM7805系列降压芯片驱动电路降压芯片驱动电路详解-…...

编程日记 2025/5/6 17:30:12

深入浅出：事件监听中的适配器模式

1. 为什么需要适配器模式？ 在Java的事件监听器设计中，许多接口有多个抽象方法。例如，MouseListener 接口有 5 个方法，KeyListener 接口有 3 个方法。如果我们只关心其中的一个方法（例如，鼠标点击事件&…...

编程日记 2025/5/10 17:49:00

常用LabVIEW算法及应用

在LabVIEW项目中，算法的应用是提高系统性能、实现特定功能、完成复杂任务的核心。LabVIEW作为一种图形化编程语言，允许用户通过直观的图形编程来实现各种复杂的算法。这些算法广泛应用于控制系统、数据采集、信号处理、图像处理、机器学习等领域。了解常…...

编程日记 2025/5/10 2:53:47

VTK知识学习（28）-区域提取

1、感兴趣区域(Volume ofInterest，VOI) 它是图像内部的一块子区域。在VTK中，vtkExtractVOI 类可根据用户指定的区域范围提取子图像。该Filter 的输入和输出都是一个vtkImageData,因此其结果可以直接作为图像保存。代码： private void Test…...

编程日记 2025/5/7 5:18:35

基于Spring Boot + Vue3实现的在线汽车保养维修预约管理系统源码+文档

前言基于Spring Boot Vue3实现的在线汽车保养维修预约管理系统是一种前后端分离架构的应用，它结合了Java后端开发框架Spring Boot和现代JavaScript前端框架Vue.js 3.0的优势。这样的系统可以为汽车服务站提供一个高效的平台来管理客户的预约请求技术选型系统…...

编程日记 2025/5/7 20:55:16

CAN201 Introduction to Networking（计算机网络）Pt.4 链路层

文章目录 5. Link Layer（链路层）5.1 Services of link layer（链路层的服务）5.2 Error detection and correction（错误检测和纠正）5.2.1 Partity Checks（奇偶检验）5.2.2 Checksum&…...

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

Python视频处理：噪声矩阵与并行计算的完美融合

噪声级别对视频质量有显著的影响，主要体现在以下几个方面： 1. 视觉质量低噪声级别：当噪声级别较低时，视频的视觉质量较好。噪声对图像细节的干扰较小，画面看起来较为清晰和自然。观众可以更容易地识别图像中的细节和…...

编程日记 2025/5/6 10:07:41

wordpress开发之实现使用第三方库qrcode-generator生成二维码并上传和展示

文章目录一、需求二、技术实现 - 利用qrcode-generator库三、代码实现一、需求客户的需求是能将特定的url生成二维码，以便将二维码分享或贴到合同纸上给他的客户扫描查看信息。这个url包含的内容类似于如下格式： https://www.example.com/contrac…...

编程日记 2025/5/6 3:11:37

计算机网络——物理层

一、通信基础 1.相关术语： • 数据(data)——运送消息的实体。 • 信号(signal)——数据的电气的或电磁的表现。 • “模拟的”(analogous)——代表消息的参数的取值是连续的。 • “数字的”(digital)——代表消息的参数的取值是离散的。 • 码元(code)——在…...

编程日记 2025/5/9 19:04:12

网络IP协议

IP（Internet Protocol，网际协议）是TCP/IP协议族中重要的协议，主要负责将数据包发送给目标主机。IP相当于OSI（图1）的第三层网络层。网络层的主要作用是失陷终端节点之间的通信。这种终端节点之间的通信也叫点…...

编程日记 2025/5/10 18:24:54

Unity UGUI使用技巧与经验总结（不定期更新）

Text自动缩放参考连接： Unity -UGUI中Text文本框的自动调整，字体大小的自适应调节_unity添加的字体大小锁定-CSDN博客 Toggle按钮选择时，显示对应的UI界面： 为Toggle组件的On Value Change事件添加对需要显示的对象的SetActive…...

编程日记 2025/5/1 4:55:10

Tailwind CSS 使用简介

参考网站安装 - Tailwind CSS 中文网号称是开始使用 Tailwind CSS 通过 npm 安装 tailwindcss，并创建你的 tailwind.config.js 文件。 npm install -D tailwindcss npx tailwindcss init 在 tailwind.config.js 文件中添加所有模板文件的路径。 /** type {im…...

编程日记 2025/5/3 20:55:28