- 博客(971)
- 收藏
- 关注
RSS订阅转载 FFmpeg
FFmpeg 是一个强大的开源多媒体框架，能够处理音频、视频和其他多媒体文件的录制、转换和流式传输。它支持几乎所有的音频和视频格式，并提供了强大的命令行工具和库。基本使用以下是 FFmpeg 的一些基本使用示例：1、查看媒体文件信息：ffmpeg -i input.mp42、转换视频格式：将 MP4 文件转换为 AVI 格式：ffmpeg -i input.mp4 output.avi3、提...
2024-08-31 20:47:29
5
转载 MVC 模式的应用程序
MVC（Model-View-Controller）是一种强调分离软件的业务逻辑和显示的软件设计模式。这种“分离”提供了更好的分工和改进的维护。一些其他的模式也是基于 MVC 来设计的，如 MVVM（Model-View-Viewmodel）、MVP（Model-View-Presenter）和 MVW（Model-View-Whatever）。对 MVC 软件设计模式的三个部分可以被描述如下：1...
2024-08-20 09:28:19
31
转载 Proxy可以监听基本数据类型吗？
Proxy无法直接监听基本数据类型（如字符串、数字、布尔值等），因为它们是不可变的。Proxy只能在对象级别上进行操作，而不是基本数据类型。当我们尝试使用Proxy包装基本数据类型时，会得到一个TypeError错误，因为基本数据类型不具有属性和方法。const value = 'Hello';const handler = { set(target, property, value) ...
2024-08-19 08:00:09
29
转载 TCP 握手 TLS 协商
导航是加载 web 页面的第一步。它发生在以下情形：用户通过在地址栏输入一个 URL、点击一个链接、提交表单或者是其他的行为。Web 性能优化的目标之一就是缩短导航完成所花费的时间，在理想情况下，它通常不会花费太多的时间，但是网络延迟和带宽会让它变久。DNS 查询对于一个 web 页面来说导航的第一步是要去寻找页面资源的位置。如果导航到 https://example.com，HTML 页面被定位...
2024-08-18 08:00:55
31
转载 CSS 究竟是怎么工作的？
当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。1、浏览器载入 HTML 文件（比如从网络上获取）。2、将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中...
2024-08-17 16:32:58
23
转载 class 类的私有属性
私有属性是常规的类的公有属性（包括类字段、类方法等）的对应。私有属性通过添加 # 前缀来创建，在类的外部无法合法地引用。这些类属性的私有封装由 JavaScript 本身强制执行。在这种语法出现之前，JavaScript 语言本身并没有原生支持私有属性。在原型继承中，可以通过使用 WeakMap 对象或者闭包的方式来模拟私有属性的行为，但就易用性而言，它们无法与 # 语法相提并论。class Cl...
2024-08-11 10:51:07
31
转载 算法复杂度解释
算法是一个封装完备的指令序列，用于执行特定的功能。换句话说，算法就是由人或机器可重复的解决问题的方法。计算机科学家们使用算法的复杂度（又称大 O 表示法）来表示算法的效率。例如：1.一道菜谱就是供人使用的算法。2.一种编程中常用的排序算法就是用来描述计算机如何给数据排序的。常用的算法有寻找最优路径算法，例如“旅行商问题”、“树的遍历算法”等。还有很多机器学习算法例如“线性回归”、“逻辑回归”、“决...
2024-08-07 08:37:31
22
转载 贝塞尔曲线
缓动函数有三种类型：1. 线性，2. 三次贝塞尔，3. 阶跃贝塞尔曲线贝塞尔曲线（读作 [bezje]）是一种使用数学方法描述的曲线，被广泛用于计算机图形学和动画中。在矢量图中，贝塞尔曲线用于定义可无限放大的光滑曲线。贝塞尔曲线由至少两个控制点进行描述。Web 技术中使用的是三次贝塞尔曲线，即使用四个控制点 P0、P1、P2 和 P3 描述的曲线。在绘制二次贝塞尔曲线的过程中，需要先作两条辅助线：...
2024-08-06 09:24:28
26
转载 UUID 通用唯一标识符
UUID 通用唯一标识符（UUID）是用于在所有其他同类资源中唯一标识资源的标签。计算机系统在本地使用非常大的随机数生成 UUID。理论上，这些 ID 可能不是全局唯一的，但重复的概率非常小。如果系统确实需要绝对唯一的 ID，则这些 ID 可能由中央机构分配。UUID 是 128 位值，通常表示为 36 个字符的字符串，格式为 123e4567-e89b-12d3-a456-42661417400...
2024-08-05 08:01:12
38
转载 计算图片占据的内存大小
Q1：一张 png 格式的图片，图片文件大小为 55.8KB，那么它加载进内存时所占的大小是多少？图片的分辨率是 1080*452，而我们在电脑上看到的这张 png 图片大小仅有 55.8KB，那么问题来了：我们看到的一张大小为 55.8KB 的 png 图片，它在内存中占有的大小也是 55.8KB 吗？理清这点蛮重要的，因为碰到过有人说，我一张图片就几 KB，虽然界面上显示了上百张，但为什么内存...
2024-08-04 08:00:33
47
转载 使用 IndexedDB
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。关键概念和用法IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBM...
2024-08-03 20:49:43
19
转载 JavaScript 调试参考文档
使用断点暂停代码，设置断点，以便您可以在代码执行过程中暂停代码。暂停时检查值执行暂停时，调试程序会评估当前函数中的所有变量、常量和对象，直到达到某个断点。调试程序会在相应声明旁边显示内嵌的当前值。您可以使用控制台查询已求值的变量、常量和对象。要点：执行暂停时，您还可以重启当前函数，甚至对其进行实时修改。悬停时预览类/函数属性执行暂停时，将鼠标悬停在类或函数名称上可预览其属性。单步调试代码代码暂停后...
2024-07-30 19:00:49
35
转载 用浏览器就能mock请求了
打开开发者工具，前往网络面板，右键点击要替换的请求，然后从下拉菜单中选择替换响应头或替换内容。如果您尚未设置本地替换，则开发者工具会在顶部的操作栏中提示您执行以下操作：选择一个文件夹以存储替换文件。点击 Allow（允许）以授予开发者工具访问权限。如果您已设置本地替换项但已停用，则开发者工具会自动启用它们。您可以修改来源中的文件，开发者工具会保存修改后的文件，在来源 > 替换中列出它们，并会...
2024-07-29 20:06:54
57
转载 从对象中删除一个属性
要从 JavaScript 对象中删除属性，你可以使用delete关键字。以下是一个简单的示例，演示如何删除对象中的属性：// 创建一个包含属性的对象let obj = { name: 'Alice', age: 30, city: 'New York'};console.log(obj); // 输出: { name: 'Alice', age: 30, c...
2024-07-27 16:02:15
46
转载 ArrayBuffer 和 Base64
ArrayBuffer是JavaScript中的一种内置对象，用于表示通用的、固定长度的原始二进制数据缓冲区。它提供了一种在内存中存储二进制数据的方式，可以用来存储各种类型的数据，如整数数组、浮点数数组、字节数据等。以下是一些关于ArrayBuffer的重要特点：1、固定长度：ArrayBuffer的长度在创建时就已经确定，并且不能动态改变。2、无法直接访问和操作：ArrayBuffer本身不...
2024-07-26 17:00:38
81
转载 了解 Fabric.js 库
Fabric.js是一个用于创建交互式的Canvas元素的JavaScript库。它提供了一种简单而强大的方式来处理Canvas元素上的图形对象，使得在Canvas上绘制、编辑和操作图形变得更加容易。基本使用Fabric.js的步骤如下：1、引入Fabric.js库：首先，在HTML文件中引入Fabric.js库文件，可以通过CDN或本地文件引入。<script src="https://...
2024-07-21 16:15:58
50
转载 Top N 的算法题如何解决
解决Top N（前N大或前N小）的算法问题通常涉及到对数据进行排序、筛选或堆的操作。以下是一些常见的解决方法：1、排序法：对整个数据集进行排序，然后取出前N个元素作为结果。时间复杂度为O(nlogn)，适用于数据量不大的情况。2、部分排序法：可以使用部分排序算法，比如堆排序中的堆，只维护前N个最大或最小元素。时间复杂度为O(nlogN)，适用于大数据集合。3、计数法：对数据进行计数，并选择出...
2024-07-15 21:07:36
36
转载 数据结构和算法在实际项目中的应用和实践
数据结构和算法在实际项目中的应用和实践是非常重要的，因为它们直接影响到程序的性能、可维护性和扩展性。以下是一些常见的数据结构和算法在实际项目中的应用和实践示例：数据结构的应用1、数组和链表•应用场景：用于存储和管理有序集合的数据，如列表、队列、栈等。•实践：在实现动态数组或链表时，需要考虑内存分配和释放、边界条件处理等。2、哈希表•应用场景：用于快速查找、插入和删除操作，如缓存、符号表、集合等...
2024-07-14 10:40:27
75
转载 将 SVG 图像转换为 Base64 格式
要在 HTML 中使用 SVG 图像，可以通过<img>标签或直接在 HTML 中嵌入 SVG 代码的方式来实现。以下是使用<img>标签的方法：<!-- 使用 <img> 标签引入外部 SVG 文件 --><img src="image.svg" alt="SVG Image"><!-- 直接在 <img&g...
2024-07-07 21:27:28
651
转载 EventSource 接口
EventSource是一个用于接收服务器发送的事件流的接口，通常用于实现服务器端推送（Server-Sent Events，SSE）。通过EventSource，客户端可以与服务器建立持久的连接，服务器可以随时向客户端发送事件数据，而客户端则可以通过监听这些事件来实时获取数据更新。以下是EventSource的基本用法：1.创建EventSource实例：const eventSou...
2024-07-06 20:57:42
52
转载 编写一个 Vue 插件
插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例：import { createApp } from 'vue'const app = createApp({})app.use(myPlugin, { /* 可选的选项 */})一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安...
2024-06-25 10:25:58
44
转载 Vue 单文件组件 SFC
Vue 单文件组件 (Single File Components, SFC) 是 Vue.js 提供的一种组件格式，允许开发者在一个文件中编写组件的模板、脚本和样式。SFC 通常以.vue文件为扩展名。以下是 SFC 的工作原理和其各个部分的详细解释：SFC 文件结构一个典型的 Vue SFC 文件包含三个部分：1.模板 (<template>)：定义组件的 HTML 结构。2....
2024-06-24 10:08:40
68
转载 CSS 沙箱环境
CSS 沙箱环境是一种隔离和限制样式影响范围的技术，通常用于确保特定组件或页面部分的样式不会与其他部分冲突。以下是一些常见的 CSS 沙箱环境实现方法：1、Shadow DOM：•描述：Shadow DOM 是 Web 组件技术的一部分，它允许你将样式和 DOM 隔离在一个封闭的“影子”树中，从而避免样式泄漏或冲突。•示例：<div id="shadow-host"></div...
2024-06-23 11:21:06
51
转载 实现虚拟 DOM
虚拟 DOM 是一种抽象，用于简化修改 UI 的行为。// VirtualNode// = { tag : string// , properties : { property: string }// , children : [VirtualNode]// }// | { text : string }//// Diff// = {...
2024-06-22 21:42:47
35
转载 Countdown.js 创建倒计时功能
Countdown.js 是一个 JavaScript 库，用于创建倒计时功能的定时器。它提供了简单易用的 API，可以帮助开发者在网页中实现各种倒计时功能，比如倒计时活动结束时间、倒计时页面跳转等。一般来说，Countdown.js 允许你指定一个目标时间，然后自动计算当前时间与目标时间之间的时间差，并实时更新显示剩余时间。这个库通常提供了一些配置选项，比如自定义显示格式、倒计时结束时的回调函数...
2024-06-20 20:25:49
91
转载 使用防盗链策略
通过在云存储服务中配置基于请求标头Referer的访问规则，可以阻止某些Referer访问您的云存储服务文件，从而防止其他网站盗用您的文件，并避免由此引起的不必要的流量费用增加。使用场景1.禁止未经授权的使用：保护图片、视频、音频等敏感或有版权的文件不被未经授权的网站下载或访问。2.节省带宽和资源消耗：通过防止盗链，避免其他网站直接链接到自己的资源文件，减少了非法访问带来的带宽消耗和服务器资源压力...
2024-06-14 08:27:07
91
转载 理解 Vue 3.4 中的 defineModel() 宏
v-model 可以在组件上使用以实现双向绑定。从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏：<!-- Child.vue --><script setup>const model = defineModel()function update() { model.value++}</script><...
2024-06-13 10:27:16
111
转载 理解Vue3.4中的watch侦听器
计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。侦听数据源类型watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：const x = ref(0)const y = ref(0)/...
2024-06-12 21:20:11
39
转载 Radash 轻量级的函数工具集
Radash 是一个现代的 JavaScript 实用程序库，旨在提供高效、轻量级的函数工具集，类似于 Lodash，但更加现代化和模块化。Radash 通过提供一系列常用的工具函数，帮助开发者更轻松地处理数组、对象、函数等操作。以下是一些 Radash 中常用的工具函数及其用法示例：1._.try安全地执行一个可能会抛出错误的函数，并返回一个包含错误和结果的元组。import { try as...
2024-06-12 09:28:54
63
转载 代码整洁之道
《代码整洁之道》（The Clean Code）是由Robert C. Martin（也称为“Uncle Bob”）撰写的一本经典编程书籍，主要讨论了如何编写高质量、可维护的代码。以下是我对这本书的一些感想：1. 代码整洁的重要性书中反复强调了代码整洁的重要性。整洁的代码不仅仅是美观的问题，更是可读性和可维护性的关键。整洁的代码让团队中的其他开发人员能够更容易地理解和修改代码，从而提高开发效率和减...
2024-06-11 09:28:33
25
转载 Promise.allSettled()
Promise.allSettled()是 JavaScript 中的一个方法，用于处理多个 Promise，并且在所有 Promise 都已被处理（无论是成功还是失败）之后返回一个 Promise 对象。与Promise.all()不同，Promise.allSettled()不会在某个 Promise 被拒绝时立即失败，而是等待所有 Promise 都完成。语法Promise.allS...
2024-06-10 08:00:33
55
转载 Promise.any
Promise.any()是 JavaScript 中的一个静态方法，用于处理多个 Promise，并返回第一个成功解决（fulfilled）的 Promise 的结果。它在 ES2021（ES12）中引入，是Promise类的一部分。语法Promise.any(iterable);•iterable: 一个可迭代对象（如数组），其中包含多个 Promise。返回值•返回一个新的 Promi...
2024-06-10 08:00:33
212
转载 使用 passive 改善的滚屏性能
EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。语法addEventListener(type, listener);addEventListener(type, listener, options);addEventListener(type, listener, useC...
2024-06-09 10:18:15
45
转载 对页面采样判断检测白屏
一、为什么需要检测白屏白屏是最严重的生产事故之一，如果大量发生，将直接导致业务瘫痪。页面白屏，绝对是让前端开发者最为胆寒的事情，特别是随着 SPA 项目的盛行，前端白屏的情况变得更为复杂且棘手起来。复现难度高，面对这样的问题，内心很虚，因为导致白屏出现的原因非常多，这不是一个明确的错误，如果没有好用的监控工具，真不知道该从何入手。二、分析有哪些情况下会产生白屏想要检测白屏就需要先分析会产生白屏的场...
2024-06-07 19:56:42
54
转载 接口防止重复请求实现方案
在前端开发中，防止重复请求是一个常见的需求，可以通过以下几种方式来实现：1、请求队列：维护一个请求队列，每次发送请求前检查队列中是否已经存在相同的请求。如果存在相同请求，则不再发送，直接使用队列中的请求结果。这种方法可以确保相同请求只发送一次。2、请求取消：在发送请求前，记录当前正在进行的请求，并在发送新请求时先取消之前的请求。可以使用 Axios 等库提供的取消请求功能来实现。3、防抖（D...
2024-06-04 19:26:20
112
转载 插槽选择器和全局选择器
之前我们已经了解了深度选择器，处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：<style scoped>.a :deep(.b) { /* ... */}</style>上面的代码会被编译成：.a[data-v-f3f3eg9] .b { /* ... */}插槽选择器默认情况下，作用域...
2024-05-31 19:22:14
44
转载 关于Vue中Scoped CSS的理解
当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换：<style scoped>.example { color: red;}</style><template> <...
2024-05-30 15:26:02
43
转载 给页面元素添加水印
给某个元素上添加水印，通常用于防止内容被未经授权的复制。它通过在目标区域上绘制半透明的文本或图像来实现这一功能。关键步骤1.初始化和配置：•组件接受一系列配置参数，如水印文本、字体、颜色、旋转角度等。•这些参数用于控制水印的外观和位置。1.Canvas绘图：•创建一个隐藏的<canvas>元素。•使用Canvas API绘制水印图案，根据配置参数设置文本内容、字体样式、颜色、透明度和旋...
2024-05-26 19:48:44
34
转载 禁止页面滚动的几种方法
overflow:hidden您可以使用 CSS 的 overflow:hidden 属性来防止页面在弹出浮层时滚动。具体来说，可以通过以下步骤实现：在HTML的 标签上添加一个类名，例如 no-scroll。使用 CSS 将该类名与 overflow:hidden 属性关联，这将防止页面滚动，同时也会隐藏滚动条，例如：.no-scroll { overflow: hidden;}当弹出浮层...
2024-05-25 21:30:40
587
转载 Jotai 是一个用于 React 的轻量级状态管理库
Jotai 是一个用于 React 的轻量级状态管理库，旨在通过最小化状态管理的复杂性来简化开发过程。以下是对 Jotai 状态管理的详细介绍，包括其核心概念和用法。官方文档：https://jotai.org/docs/core/atom核心概念1、Atom（原子）：•原子是 Jotai 的基本单位，类似于其他状态管理库中的状态片段。它们是独立的状态单元，存储特定的数据。•通过atom函数...
2024-05-18 17:34:13
141
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人