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

JavaScript系列（76）--浏览器API深入

news 来源：原创 2025/9/20 19:56:00

JavaScript浏览器API深入 🌐

浏览器提供了丰富的API，使JavaScript能够与浏览器环境进行交互。本文将深入探讨常用的浏览器API、最佳实践和性能优化技巧。

核心浏览器API 🌟

💡 小知识：浏览器API是连接JavaScript与浏览器功能的桥梁，它们提供了操作DOM、处理事件、网络请求等能力。现代浏览器不断推出新的API，为开发者提供更强大的功能。

1. DOM操作API

class DOMOperations {static demonstrateModernDOM() {// 现代选择器const element = document.querySelector('.my-class');const elements = document.querySelectorAll('.items');// 元素遍历const children = Array.from(element.children);const siblings = element.nextElementSibling;// DOM操作const newElement = document.createElement('div');element.append(newElement);element.remove();// 属性操作element.setAttribute('data-id', '123');element.classList.add('active');element.style.setProperty('--custom-color', 'red');}static handleTemplates() {// 模板操作const template = document.createElement('template');template.innerHTML = `<div class="card"><h2></h2><p></p></div>`;const clone = template.content.cloneNode(true);document.body.appendChild(clone);}
}

2. BOM操作API

class BOMOperations {static demonstrateBOMFeatures() {// 窗口操作const width = window.innerWidth;const height = window.innerHeight;// 视口信息const viewportWidth = document.documentElement.clientWidth;const viewportHeight = document.documentElement.clientHeight;// 滚动操作window.scrollTo({top: 100,behavior: 'smooth'});// 历史记录操作window.history.pushState({ page: 1 }, 'title', '/new-url');window.addEventListener('popstate', (event) => {console.log('返回到:', event.state);});}static handleLocation() {// URL操作const url = new URL(window.location.href);url.searchParams.set('page', '2');history.pushState(null, '', url.toString());}
}

3. 网络请求API

class NetworkOperations {static async demonstrateFetch() {// 基本GET请求const response = await fetch('/api/data');const data = await response.json();// POST请求const result = await fetch('/api/create', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ name: '张三' })});// 请求中断const controller = new AbortController();setTimeout(() => controller.abort(), 5000);try {const response = await fetch('/api/data', {signal: controller.signal});} catch (error) {if (error.name === 'AbortError') {console.log('请求被取消');}}}static async handleFormData() {const formData = new FormData();formData.append('file', fileInput.files[0]);const response = await fetch('/api/upload', {method: 'POST',body: formData});}
}

现代浏览器API 📱

1. 观察者API

class ObserverAPIs {static setupIntersectionObserver() {const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {entry.target.classList.add('visible');}});}, {threshold: 0.5});document.querySelectorAll('.lazy-load').forEach(el => observer.observe(el));}static setupMutationObserver() {const observer = new MutationObserver((mutations) => {mutations.forEach(mutation => {if (mutation.type === 'childList') {console.log('子元素变化');}});});observer.observe(document.body, {childList: true,subtree: true});}static setupResizeObserver() {const observer = new ResizeObserver(entries => {entries.forEach(entry => {const { width, height } = entry.contentRect;console.log(`新尺寸: ${width} x ${height}`);});});observer.observe(document.querySelector('.responsive'));}
}

2. 性能监控API

class PerformanceAPIs {static measurePerformance() {// 性能标记performance.mark('start');// 执行一些操作...performance.mark('end');performance.measure('操作耗时', 'start', 'end');// 获取性能指标const metrics = performance.getEntriesByType('measure');console.log(metrics);}static monitorResources() {// 资源加载性能const resources = performance.getEntriesByType('resource');resources.forEach(resource => {console.log(`${resource.name}: ${resource.duration}ms`);});}
}

3. 媒体API

class MediaAPIs {static async setupMediaRecorder() {const stream = await navigator.mediaDevices.getUserMedia({video: true,audio: true});const recorder = new MediaRecorder(stream);const chunks = [];recorder.ondataavailable = (e) => chunks.push(e.data);recorder.onstop = () => {const blob = new Blob(chunks, { type: 'video/webm' });const url = URL.createObjectURL(blob);// 处理录制的视频...};recorder.start();}static setupAudioContext() {const audioContext = new AudioContext();const oscillator = audioContext.createOscillator();const gainNode = audioContext.createGain();oscillator.connect(gainNode);gainNode.connect(audioContext.destination);oscillator.type = 'sine';oscillator.frequency.setValueAtTime(440, audioContext.currentTime);oscillator.start();}
}

存储API 💾

1. 本地存储

class StorageAPIs {static handleLocalStorage() {// 基本操作localStorage.setItem('user', JSON.stringify({ name: '张三' }));const user = JSON.parse(localStorage.getItem('user'));// 存储事件监听window.addEventListener('storage', (e) => {console.log('存储变化:', e.key, e.newValue);});}static async handleIndexedDB() {const request = indexedDB.open('MyDB', 1);request.onupgradeneeded = (event) => {const db = event.target.result;const store = db.createObjectStore('users', { keyPath: 'id' });store.createIndex('name', 'name', { unique: false });};request.onsuccess = (event) => {const db = event.target.result;const transaction = db.transaction(['users'], 'readwrite');const store = transaction.objectStore('users');store.add({ id: 1, name: '张三' });};}
}

2. Cache API

class CacheAPIs {static async handleCacheStorage() {// 缓存资源const cache = await caches.open('v1');await cache.add('/styles.css');// 从缓存获取const response = await cache.match('/styles.css');// 缓存策略async function fetchWithCache(request) {const cache = await caches.open('v1');const cached = await cache.match(request);if (cached) {return cached;}const response = await fetch(request);await cache.put(request, response.clone());return response;}}
}

安全API 🔒

1. 权限API

class SecurityAPIs {static async checkPermissions() {// 检查权限const result = await navigator.permissions.query({name: 'geolocation'});switch (result.state) {case 'granted':console.log('已授权');break;case 'prompt':console.log('需要请求权限');break;case 'denied':console.log('已拒绝');break;}}static async handleCredentials() {// 凭证管理const credential = await navigator.credentials.create({password: {id: 'user@example.com',password: 'secretpassword'}});// 存储凭证await navigator.credentials.store(credential);}
}

2. 内容安全

class ContentSecurity {static setupCSP() {// 在服务器端设置CSP头// Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'// 报告违规document.addEventListener('securitypolicyviolation', (e) => {console.log('CSP违规:', e.violatedDirective);});}static handleCORS() {// 跨域请求fetch('https://api.example.com/data', {credentials: 'include',headers: {'Content-Type': 'application/json'}});}
}

最佳实践 ⭐

性能优化

class BrowserAPIBestPractices {static optimizeDOM() {// 使用文档片段const fragment = document.createDocumentFragment();for (let i = 0; i < 1000; i++) {const div = document.createElement('div');fragment.appendChild(div);}document.body.appendChild(fragment);// 使用requestAnimationFramefunction animate() {requestAnimationFrame(() => {// 执行动画animate();});}}static optimizeStorage() {// 批量操作IndexedDBfunction batchAdd(items) {const transaction = db.transaction(['store'], 'readwrite');const store = transaction.objectStore('store');items.forEach(item => store.add(item));return transaction.complete;}}
}

错误处理

class ErrorHandling {static async safeAPICall() {try {const result = await fetch('/api/data');if (!result.ok) {throw new Error(`HTTP error! status: ${result.status}`);}return await result.json();} catch (error) {console.error('API调用失败:', error);// 优雅降级处理return null;}}
}

特性检测

class FeatureDetection {static checkAPISupport() {if ('IntersectionObserver' in window) {// 使用IntersectionObserver} else {// 降级处理}if ('serviceWorker' in navigator) {// 注册Service Worker}}
}

性能考虑 ⚡

避免频繁DOM操作

// 不推荐
for (let i = 0; i < 1000; i++) {document.body.appendChild(document.createElement('div'));
}// 推荐
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {fragment.appendChild(document.createElement('div'));
}
document.body.appendChild(fragment);

合理使用事件委托

document.querySelector('.list').addEventListener('click', (e) => {if (e.target.matches('.item')) {// 处理列表项点击}
});

使用节流和防抖

function debounce(fn, delay) {let timer = null;return function (...args) {clearTimeout(timer);timer = setTimeout(() => fn.apply(this, args), delay);};
}const handleResize = debounce(() => {// 处理窗口调整
}, 200);window.addEventListener('resize', handleResize);

总结 📝

浏览器API提供了：

强大的DOM操作能力
丰富的网络请求功能
多样的存储选项
现代化的观察者接口
完善的安全机制

💡 学习建议：

深入理解核心API的工作原理
掌握现代浏览器新特性
注意性能优化
做好兼容性处理
重视安全性考虑

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻

JavaScript系列（76）--浏览器API深入

JavaScript浏览器API深入 🌐 浏览器提供了丰富的API，使JavaScript能够与浏览器环境进行交互。本文将深入探讨常用的浏览器API、最佳实践和性能优化技巧。核心浏览器API 🌟 💡 小知识：浏览器API是连接JavaScript与浏…...

编程日记 2025/9/20 19:56:00

计算机网络（3）TCP格式/连接

1、TCP三大特点：面向连接、可靠、基于字节流 2、如何唯一确定一个TCP连接？TCP四元组：源地址、源端口、目的地址、目的端口源地址和目标地址的字段(32 位)是在 IP 头部中，作用是通过 IP 协议发送报文给对方主机源端口和目标端口…...

编程日记 2025/9/19 22:20:44

下载安装运行测试开源vision-language-action（VLA）模型OpenVLA

1. 安装项目官网OpenVLA 首先按照官网提示的以下代码，执行创建环境->安装最小依赖->git克隆项目等 # Create and activate conda environment conda create -n openvla python3.10 -y conda activate openvla# Install PyTorch. Below is a sample comma…...

编程日记 2025/9/17 20:25:01

3D与2D机器视觉机械臂引导的区别

3D与2D机器视觉在机械臂引导中的主要区别如下： 数据维度 2D视觉：仅处理平面图像，提供X、Y坐标信息，无法获取深度（Z轴）数据。 3D视觉：处理三维空间数据，提供X、Y、Z坐标及物体的姿态…...

编程日记 2025/9/19 20:29:00

网站搭建基本流程

需求分析： 实现网站搭建的过程：首先进行网站的需求性分析网站可分为前台系统和后台系统，由不同的功能拆分为不同的模块如下是一个电商网站可以拆分出的模块： 在编写代码前，我们要先对网站进行架构，通过…...

编程日记 2025/9/20 2:36:13

SpringBoot启动时报错：cannot use an unresolved DNS server address: I:53

报错如下： 2025-02-17 13:59:41.374 [main] ERROR org.springframework.boot.SpringApplication:835 - Application run failed org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name mySwaggerResourceProvider def…...

编程日记 2025/9/16 0:57:04

Ollama命令使用指南

Ollama 命令使用指南 Ollama 命令使用指南1. Ollama 命令概览2. Ollama 命令详解2.1 启动 Ollama2.2 创建模型2.3 查看模型信息2.4 运行模型2.5 停止运行的模型2.6 从注册表拉取模型2.7 推送模型到注册表2.8 列出本地模型2.9 查看正在运行的模型2.10 复制模型2.11 删除模型 3. …...

编程日记 2025/9/18 8:34:34

每日一题——将数字字符串转化为IP地址

将数字字符串转化为IP地址题目描述解题思路回溯法步骤分解代码实现全局变量有效性验证函数回溯函数主函数完整代码复杂度分析关键点说明总结这题难度还挺大的，整体上实现并不容易。建议参考视频和https://programmercarl.com/0093.%E5%A4%8D%E5%8E%9FIP%E5%9C%…...

编程日记 2025/9/20 11:37:23

2013年下半年软件设计师上午题考察知识点及其详细解释（附真题及答案解析）

以下是2013年下半年软件设计师上午题的所有题目（从第1题到第75题）的总结，按顺序列出每道题目的考察知识点及其详细解释，供考生背诵记忆： 1. Cache与主存的地址映像知识点：存储管理解释：Cache与…...

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

实现可拖拽的 Ant Design Modal 并保持下层 HTML 可操作性

前言在开发复杂的前端界面时，我们常常需要一个可拖拽的弹窗（Modal），同时又希望用户能够在弹窗打开的情况下操作下层的内容。Ant Design 的 Modal 组件提供了强大的功能，但默认情况下，弹窗会覆盖整个页面&…...

编程日记 2025/9/19 7:35:31

unity学习43：子状态机 sub-state machine

目录 1sub-state machine子状态机 1.1 创建 sub-state machine 1.2 sub-state machine 内容 1.3 子状态机的应用 2 子状态机不同于blend tree的嵌套 3 应用例子：若角色拿不同武器的动画设计，可以使用2种方法 3.1 在1个图层layer里，使用…...

编程日记 2025/9/20 17:49:50

HTML之JavaScript DOM（document）编程处理事件

HTML之JavaScript DOM（document）编程处理事件 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…...

编程日记 2025/9/20 12:29:24

线性模型 - Logistic 回归

Logistic 回归(Logistic Regression，LR)是一种常用的处理二分类问题的线性模型。 Logistic 回归是一种用于二分类问题的统计模型，它通过将输入特征的线性组合映射到一个概率值来进行分类决策。 Logistic回归是机器学习中最经典的分类算法之一&#xf…...

编程日记 2025/9/20 19:52:44

分割学习笔记cvpr2024

目录 LiteMedSam 模型37m LightM-Unet 500 str 依赖项： MLWnet 73 star memsam 340M 126 star LiteMedSam 模型37m https://github.com/bowang-lab/MedSAM/blob/LiteMedSAM/README.md LightM-Unet 500 str https://github.com/MrBlankness/LightM-UNet/blob model = Li…...

编程日记 2025/9/20 13:37:49

ShenNiusModularity项目源码学习（9：项目结构）

ShenNiusModularity源码主要有11个project（其实还有officialweb、test两个文件夹，大致有4、5个project，但看着跟主要项目代码没太大关系，暂时不管），这11个project的依赖关系如下图所示，其中最下…...

编程日记 2025/9/20 19:10:03

【复现DeepSeek-R1之Open R1实战】系列6：GRPO源码逐行深度解析（上）

目录 4 GRPO源码分析4.1 数据类 GRPOScriptArguments4.2 系统提示字符串 SYSTEM_PROMPT4.3 奖励函数4.3.1 accuracy_reward函数4.3.2 verify函数4.3.3 format_reward函数 4.4 将数据集格式化为对话形式4.5 初始化GRPO Trainer 【复现DeepSeek-R1之Open R1实战】系列3&#xff1…...

编程日记 2025/9/20 12:28:31

【LangChain实践开发】如何对大模型I/O封装？

LangChain 的核心组件模型 I/O 封装 LLMs：大语言模型Chat Models：一般基于 LLMs，但按对话结构重新封装PromptTemple：提示词模板OutputParser：解析输出数据连接封装 Document Loaders：各种格式文件的加载…...

编程日记 2025/9/18 23:34:58

LangChain4j

LangChain4j 是一个基于 Java 的框架，旨在简化与大型语言模型（LLMs）的集成和应用开发。它类似于 Python 的 LangChain 框架，但专为 Java 开发者设计，提供了构建基于 LLM 的应用程序所需的工具和组件。主要功能 LLM …...

编程日记 2025/9/20 18:28:04

如何系统成为高级Qt工程师？

要系统性地成为高级Qt工程师，需要从基础到进阶逐步构建知识体系，并结合实战经验、源码分析和架构设计能力的提升。以下是分阶段的系统性学习路径和建议：一、夯实基础阶段 C++深度掌握精通C++11/14/17特性（智能指针、lambda、移动语义等）理解面向对象设计、设计模式（如观…...

编程日记 2025/9/10 3:37:46

LLM 架构

LLM 分类 : 自编码模型 (encoder) : 代表模型 : BERT自回归模型 (decoder) : 代表模型 : GPT序列到序列模型 (encoder-decoder) : 代表模型 : T5 自编码模型 (AutoEncoder model , AE) 代表模型 : BERT (Bidirectional Encoder Representation from Transformers)特点 : Enc…...

编程日记 2025/9/20 5:06:01

MVTEC数据集笔记

前言网上的博客只有从论文里摘出的介绍，没有数据集文件详细的样子，下载数据集之后，对数据集具体的构成做一个补充的笔记。下载链接：https://ai-studio-online.bj.bcebos.com/v1/7d4a3cf558254bbaaf4778ea336cb14ed8bbb96a7f2a…...

编程日记 2025/9/19 5:43:25

[算法学习笔记]1. 枚举与暴力

一、枚举算法定义枚举是基于已有知识来猜测答案的问题求解策略。即在已知可能答案的范围内，通过逐一尝试寻找符合条件的解。 2. 核心思想穷举验证：对可能答案集合中的每一个元素进行尝试终止条件：找到满足条件的解，或遍历完…...

编程日记 2025/9/19 19:17:55

javacv将mp4视频切分为m3u8视频并播放

学习链接 ffmpeg-demo 当前对应的 gitee代码 Spring boot视频播放(解决MP4大文件无法播放)，整合ffmpeg,用m3u8切片播放。 springboot 通过javaCV 实现mp4转m3u8 上传oss 如何保护会员或付费视频？优酷是怎么做的？ - HLS 流媒体加密 ffmpe…...

编程日记 2025/9/10 18:26:15

docker 进阶命令(基于Ubuntu)

数据卷 Volume: 目录映射, 目录挂载匿名绑定: 匿名绑定的 volume 在容器删除的时候, 数据卷也会被删除, 匿名绑定是不能做到持久化的, 地址一般是 /var/lib/docker/volumes/xxxxx/_data 绑定卷时修改宿主机的目录或文件, 容器内的数据也会同步修改, 反之亦然 # 查看所有 vo…...

编程日记 2025/9/11 0:49:13

鸿蒙（HarmonyOS）开发学习路线指南：从零到实战

随着鸿蒙生态的快速发展，HarmonyOS 已成为物联网时代的重要开发平台。其分布式架构和“一次开发、多端部署”的理念吸引了大量开发者。本文将从零开始梳理鸿蒙开发的学习路径，帮助开发者高效掌握核心技能。一、学习路线概览总目标：掌握鸿蒙…...

编程日记 2025/9/19 15:10:54

小白win10安装并配置yt-dlp

需要yt-dlp和ffmpeg 注意存放路径最好都是全英文 win10安装并配置yt-dlp 一、下载1.下载yt-dlp2. fffmpeg下载二、配置环境三、cmd操作四、yt-dlp下视频操作一、下载 1.下载yt-dlp yt-dlp地址找到win的压缩包点下载，并解压 2. fffmpeg下载 ffmpeg官方下载 …...

编程日记 2025/9/19 17:46:29

CUBEAI详细使用教程（STM32运行神经网络）---以手写识别为例

系列文章目录文章目录系列文章目录前言一、CUBEMX配置步骤二、模型结构及模型存储方式三、常用API函数1.ai_(name)_create()2.ai_(name)_init3.ai_(name)_create_and_init()3.ai_(name)_run()官方提供的示例代码四、如何获取官方开发文档五、手写识别案例前言实验效果&am…...

编程日记 2025/9/10 6:38:34

[NOIP 1998 提高组] 拼数

https://www.luogu.com.cn/problem/P1012 将每个数用字符串的形式读进来，对于任意两个数 x x x, y y y，如果 x y > y x xy>yx xy>yx，对最后的答案来说， x x x一定排在 y y y的前面。简单证明：假设最后的…...

编程日记 2025/9/19 9:55:26

PHP Web 开发基础

PHP 学习资料 PHP 学习资料 PHP 学习资料在 PHP Web 开发领域，掌握一些基础概念和技术是构建功能强大、用户体验良好的 Web 应用的基石。接下来，我们将深入探讨 HTTP 协议、表单处理、Cookie 和 Session 的管理、URL 处理等关键内容。一、HTTP 协议…...

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

MME-CoT：专为评估大型多模态模型CoT推理能力的基准测试。涵盖了数学、科学、OCR、逻辑、时空和一般场景6个领域。

2025-02-09 ，由CUHK MMLab、CUHK MulLab、字节跳动、、东北大学等机构联合发布MME-CoT数据集，该数据集目的评估大型多模态模型（LMMs）中的思维链（CoT）推理能力，涵盖数学、科学、OCR、逻辑、时空和…...

编程日记 2025/9/20 19:25:54

HDFS应用-后端存储cephfs-java-API

HDFS（Hadoop Distribute FileSystem）是一个适合运行在通用硬件之上，具备高度容错特性，支持高吞吐量数据访问的分布式文件系统，非常适合大规模数据集应用。 HDFS适用于如下场景： • 处理海量数据（TB或PB级别以上） • 需要很高的吞吐量 • 需要高可靠性 • 需要很好的可扩…...

编程日记 2025/9/19 9:32:09

A与B组件自动对齐与组装，无映射直接补偿。

网上针对组装的从视觉到控制动作，要不就是收费，要不就是简单介绍。这么详细的比较难找～手下留情，不喜勿喷！ Show time～分步解决方案：标定阶段（Calibration） 9点张氏标定（每个位置A1、A2、B1、B2）：使用机械手在相机视野内沿Z字形路径移动，覆盖9个点（XY方…...

编程日记 2025/9/19 18:41:13

SQL知识体系

SQL复习 MySQL SQL介绍 SQL SQL的全拼是什么？ SQL全拼：Structured Query Language，也叫结构化查询语言。 SQL92和SQL99有什么区别呢？ SQL92和SQL99分别代表了92年和99年颁布的SQL标准。在 SQL92 中采用（&#xff…...

编程日记 2025/9/12 0:28:34

编译安装php

前置准备这里的可能不全，每个人安装的模块不一致，依赖也不不相同，按实际情况调整 yum install libxml2 -y yum install libxml2-devel -y yum install openssl-devel -y yum install sqlite-devel -y yum install libcurl-devel -yyum ins…...

编程日记 2025/9/19 22:18:33

【分果果——DP（困难）】

题目分析分果果题解参考，下面是补充https://blog.csdn.net/AC__dream/article/details/129431299 关于状态设f[i][j][k]表示第i个人取到的最后一个糖果编号是j，第i-1个人取到的最后一个糖果编号小于等于k时的最大重量的最小值关于转移方程关于 j …...

编程日记 2025/9/20 20:35:48

利用ffplay播放udp组播视频流

ffplay -fs -fflags nobuffer -flags low_delay -analyzeduration 0 -probesize 32 -framedrop -sync ext -strict experimental udp://224.1.1.1:5001 -fs : 全屏显示 -fflags nobuffer ： 禁用输入缓冲（减少100-200ms缓冲延迟） -an…...

编程日记 2025/9/11 3:36:41

C++中变量与容器的默认初始化：0的奥秘

在C编程的世界里，初始化是一个至关重要的概念。它决定了变量或容器在程序开始执行时的初始状态。然而，对于不同的数据类型和容器，C标准对于默认初始化的行为有着不同的规定。本文将深入探讨C中变量与容器的默认初始化规则，特别是关…...

编程日记 2025/9/20 16:55:22

VScode内接入deepseek包过程（本地部署版包会）

目录 1. 首先得有vscode软件 2. 在我们的电脑本地已经部署了ollama，我将以qwen作为实验例子 3. 在vscode上的扩展商店下载continue 4. 下载完成后，依次点击添加模型 5. 在这里可以添加，各种各样的模型，选择我们的ollama 6. 选…...

编程日记 2025/9/20 7:34:58

spark

阶段性阶段一： 单机时代阶段二: 大数据时代-分布式处理阶段三: 实时大数据时代 hadoop慢因为她的计算结果保存在磁盘处理在spark中可解决属于内存 Hadoop特点： 高可靠性高拓展性高效性高容错性...

编程日记 2025/9/17 22:16:27

蓝桥杯---排序数组（leetcode第912题）

文章目录 1.题目重述2.思路分析3.代码解释 1.题目重述题目的要求是不使用库函数或者是其他的内置的函数（就是已经实现好的函数），也就是这个排序的逻辑需要我们自己进行实现； 2.思路分析其实这个例子也是很容易理解的&#xff…...

编程日记 2025/9/20 19:05:08

【Javascript Day18】

目录标签事件绑定的属性参数阻止默认行为 dialog的实现及组织冒泡（捕获）传递基于冒泡的事件委托键盘事件的事件源对象信息 JS的自动触发操作标签事件绑定的属性参数 <!-- 标签上的事件绑定，事件源对象通过关键字event传递 --…...

编程日记 2025/9/20 19:59:25

轻量级C通用库Klib解读 —— kalloc

前言 Klib是一个独立的轻量级c通用库，里面大多数组件除了C标准库外不包含外部库，想用对应组件直接拷贝对应文件即可使用。该库致力于高效和较小的内存占用，其中部分组件（如khash、kbtree、ksort、kvec），无…...

编程日记 2025/9/13 9:41:55

认识HTML的标签结构

一、HTML的基本概念 1.什么是HTML？ ①HTML是描述网页的一种标记语言，也被称为超文本标记语言【并不是一种编程语言】 ②HTML包含了HTML标签和文本内容 ③HTML文档也称为web页面 2.HTML的标签 HTML的标签通常成对出现，HTML文档由标签和受…...

编程日记 2025/9/15 1:58:21

C语言实现一个比较两个整型的函数 / qsort的使用 /qsort排序结构体

一、qsort的一般使用方法 int cmp_int(const void* e1, const void* e2) {return *(int*)e1 - *(int*)e2; } // //使用qsort对数组进行排序，升序 void test1() {int arr[] { 9,8,7,6,5,4,3,2,1,0 };int sz sizeof(arr) / sizeof(arr[0]);//bubble_sort(arr, sz);…...

编程日记 2025/9/20 12:54:55

Arcmap python环境安装sklearn

Arcmap自带的环境为Python2.7，默认安装目录为C:\Python27\ArcGIS10.7 直接安装sklearn会发生兼容性问题，且默认环境不包括pip，因此需要先安装pip 下载 get-pip.py 访问 https://bootstrap.pypa.io/pip/2.7/get-pip.py 并下载 get-pip.py。运…...

编程日记 2025/9/12 0:28:12

FastAdmin后端列表导入表格数据

后台添加数据的时候增加通过表格导入功能如下图index.html页面增加导入和模板下载按钮代码如下 <div class"panel panel-default panel-intro">{:build_heading()}<div class"panel-body"><div id"myTabContent" class"ta…...

编程日记 2025/9/19 15:46:16