- 博客(43)
- 收藏
- 关注
RSS订阅原创 Connection reset by 20.205.243.166 port 22 fatal: Could not read from remote repository.错误解决
摘要： 推送代码遇到SSH连接被重置问题，原因是防火墙可能阻断了SSH端口。官方解决方案是通过HTTPS的443端口建立SSH连接，绕过防火墙限制。具体操作是在~/.ssh/config中添加GitHub的SSH配置（指定Hostname为ssh.github.com，端口443），测试连接成功后即可正常推送。详细说明参考GitHub官方文档。
2025-05-29 17:22:24
185
原创 vue3组件--无限滚动效果
本文分享了一个基于Vue3实现的文字无限滚动组件。该组件通过transform动画和定时器实现平滑的向上滚动效果，主要特性包括：1）支持自定义容器尺寸和滚动速度；2）采用数组轮换机制确保内容循环展示；3）动态计算项目高度实现自适应布局；4）完善的过渡动画管理（启用/禁用过渡效果）。组件内部通过currentOffset控制滚动位置，利用transitionend事件监听动画完成时机，在数据更新时自动重置状态并重新计算布局参数。代码结构清晰，包含完整的生命周期管理和响应式数据监听，可直接用于新闻公告、跑马灯等
2025-05-25 14:02:34
605
1
原创 declare 关键字
TypeScript 中的 declare 关键字用于在编译阶段声明类型信息，而不生成运行时代码。它主要用于描述已存在的变量、模块或全局类型，确保类型安全且不影响运行时行为。常见使用场景包括声明全局类型、创建类型定义文件（.d.ts）、声明已存在的变量以及覆盖模块类型。declare 还支持声明合并和条件类型声明等进阶用法。使用时需注意优先使用 @types 包、合理组织声明文件，并区分类型声明与具体实现。常见问题包括声明不生效、declare 与 any 的区别，以及何时需要 .d.ts 文件。
2025-05-18 09:47:36
442
原创 什么是CacheStorage？
CacheStorage API是现代Web开发中用于性能优化和构建离线可用应用的关键技术。它允许开发者通过JavaScript管理缓存资源，通常与Service Worker结合使用，支持异步操作、多缓存隔离、网络请求级缓存和跨域资源。基本使用包括打开/创建缓存、添加资源、匹配请求和删除缓存。常见应用场景包括离线优先策略、关键资源预缓存和动态内容缓存。使用CacheStorage时需注意版本控制、缓存策略选择、存储限制和缓存清理策略，以确保应用的高效性和可靠性。
2025-05-11 13:25:10
464
原创 SSE技术的基本理解以及在项目中的使用
`Server-Sent Events` (SSE) 是一种基于 HTTP 的服务器到客户端的 单向实时通信技术 ，允许服务器主动向客户端单向推送数据的技术。在 MDN 中介绍到：EventSource 接口是 web 内容与服务器发送事件通信的接口。一个 EventSource 实例会对 HTTP 服务器开启一个持久化的连接，以 text/event-stream 格式发送事件，此连接会一直保持开启直到通过调用 EventSource.close() 关闭。
2025-05-04 13:57:42
1234
原创 async 和 await 详解
在传统异步编程中，处理多个异步操作时容易出现“回调地狱”（Callback Hell），代码嵌套层级深，难以维护。Promise 提供了 .then() 链式调用，但依然需要回调函数。async/await 的引入让异步代码的流程更清晰，语法更简洁。
2025-04-26 11:15:39
1972
原创 理解 React 的 useEffect
useEffect 是 React Hooks 中最重要的 API 之一，用于处理组件中的副作用（Side Effects），例如数据请求、DOM 操作、订阅事件等。本文将从基础用法、核心原理、常见问题到最佳实践，全面解析 useEffect 的使用技巧。
2025-04-20 13:41:40
1360
原创 Vue3项目中的前缀和
前缀和（Prefix Sum）是一种预处理数组的技术，通过构建辅助数组快速计算原数组任意区间的和。本文介绍了前缀和算法在项目中的应用场景
2025-04-13 15:18:42
895
原创 深入浅出 TypeScript 泛型：类型安全的艺术与实践
在 JavaScript 中，我们常常需要编写处理多种数据类型的通用函数。比如一个获取数组首元素的函数 getFirst(arr)，它应该对数字数组返回数字，对字符串数组返回字符串。但在原生 JS 中，我们无法在类型层面表达这种关系。 TypeScript 的泛型正是为解决这类问题而生。 泛型就像给类型系统插上翅膀，让我们在保持类型安全的同时，编写高度灵活的通用代码 。它通过将类型参数化，建立了输入类型与输出类型之间的精确映射关系。
2025-04-05 09:25:05
852
原创 TypeScript 与 JavaScript 的区别
TypeScript 作为 JavaScript 的超集，在保持 JavaScript 灵活性的基础上引入了强大的类型系统。本文将从 8 个关键维度深入剖析两者的差异，并通过实际案例揭示 TypeScript 的核心价值。
2025-03-30 14:19:48
941
原创 nodejs中的path模块
Node.js 的 path 模块是处理文件路径的核心工具，它提供了一系列方法用于操作和解析文件路径，同时兼容不同操作系统（Windows 和 POSIX）的路径格式。
2025-03-16 10:41:59
871
原创 虚拟DOM以及手写简单的Vue2虚拟DOM的核心代码!
虚拟 DOM（Virtual DOM）是一种编程概念，它是将真实的 DOM 树映射到一个 JavaScript 对象上，这个对象包含了真实 DOM 树中所有节点的相关信息，包括标签名、属性、文本内容等。你可以简单理解为 虚拟 DOM 是一个轻量级的 JavaScript 对象， 用于描述真实 DOM 的结构
2025-03-16 10:12:59
810
原创 Vue3——Fragment
Vue 3 的Fragment特性通过支持多根组件，解决了 Vue 2 的单根限制问题，使代码更简洁、结构更灵活。需要严格 HTML 语义的结构（如表格、列表）。减少冗余 DOM 层级以优化性能。动态布局和条件渲染多元素。使用时需注意属性继承、过渡动画等细节，结合 Vue 3 的其他特性（如 v-bind=“$attrs”、provide/inject）可充分发挥其优势。
2025-03-09 09:06:46
1400
原创 vue3中ref和reactive的区别
在 Vue3 的响应式系统中，ref 和 reactive 是最核心的两个 API，它们的区别是开发者必须掌握的底层原理。
2025-03-08 09:43:42
3224
原创 Vue3的Hook指南
Hook是包含响应式状态和逻辑组合的函数。使用创建响应式状态包含等响应式操作可以调用生命周期钩子返回可复用的状态和方法集合注意： Vue官方文档中并没有直接称为“hook”，而是使用“组合式函数”（Composable）这个术语。组合式函数的作用是封装和复用有状态的逻辑，类似于React Hooks，但实现方式不同。Hook模式将前端开发带入逻辑即服务原子化：每个Hook都是独立的功能单元可组合：通过函数组合实现复杂功能可测试：脱离 UI 实现纯逻辑验证类型化。
2025-03-07 19:41:47
1958
原创 Vue3生命周期以及与Vue2的区别
Vue3 的生命周期设计在兼容 Vue2 的同时，通过组合式 API 和更精确的钩子命名，提供了更灵活的代码组织方式。无论是选项式还是组合式，合理利用生命周期钩子能显著提升组件性能和可维护性。升级到 Vue3 时，建议优先采用组合式 API 以发挥其最大优势.
2025-03-02 14:32:31
1533
1
原创 vue2 生命周期
Vue 2 的生命周期钩子函数为开发者提供了丰富的控制能力，通过在不同的生命周期阶段执行相应的代码逻辑，可以更好地管理组件的状态、操作 DOM 元素、处理异步请求和进行资源清理等工作。理解这些生命周期钩子的触发时机和用途，有助于编写更高效、稳定的 Vue 应用。
2025-02-14 14:52:46
3233
原创 vue2 中 computed 计算属性 和 watch 监听属性的区别
在 Vue 2 中，watch 监听属性和 computed 计算属性都用于处理数据的变化，但它们在使用场景、实现方式和性能等方面存在明显的区别。本文主要从定义与语法、使用场景、性能、响应式触发方式、数据流向、依赖追踪、代码复杂性和可维护性几个方面介绍两者的区别
2025-02-14 10:45:15
887
原创 vue2 中 watch 监听属性
watch 是 Vue 2 中的一个重要选项，用于定义观察者（watcher），监视指定的数据属性的变化。当被监视的属性发生变化时，相应的处理函数会被调用，从而允许你对变化做出反应。这在需要根据数据变化执行异步操作或开销较大的计算时非常有用。
2025-02-14 10:00:32
5112
原创 vue2中 computed 计算属性
在 Vue 2 中，computed 计算属性是组件中非常重要的一部分，它允许我们基于现有数据派生出新的数据，并且具有缓存机制，能够提高应用的性能和响应速度。本文将详细介绍 computed 计算属性的用法、特点以及实际应用案例。
2025-02-13 21:43:58
2276
原创 Vue2中常用指令
在前端开发领域，Vue.js 以其简洁、灵活和高效的特点备受开发者青睐。Vue 2 作为其重要版本，提供了一系列功能强大的指令，帮助开发者轻松实现各种页面交互和数据绑定功能。本文将详细介绍 Vue 2 中的常用指令，包括它们的用法、示例和适用场景，帮助你更好地掌握 Vue 2 的开发技巧。
2025-02-13 21:17:38
1338
原创 JavaScript中的防抖与节流：提升性能的关键技巧
防抖和节流是 JavaScript 开发中极为实用的性能优化技巧。合理运用这两种技术，能够显著减少不必要的计算和请求，从而有效提升页面的性能以及用户体验。在实际的开发过程中，我们需要依据具体的业务场景和需求，精准地选择合适的技术来优化代码，以实现更加高效、流畅的应用程序。如果你还想了解它们在特定框架（如 Vue、React）中的应用，或者想进一步优化代码示例，都可以随时告诉我，我会继续完善这篇博客。
2025-02-09 16:00:32
1312
原创 入门 Canvas：Web 绘图的强大工具
canvas>是 HTML5 引入的一个极为关键的标签，它犹如网页上一块洁净的空白画布，等待着开发者用 JavaScript 这把神奇的画笔，在上面挥洒创意，绘制出各式各样的图形、图像，并实现精彩纷呈的动画效果。与传统的基于矢量图形的<svg>相比，Canvas 基于位图工作，这意味着它是通过对像素的精确控制来处理图形的。这种特性使得 Canvas 在创建高度动态和交互性的图形内容方面表现出色，尤其适合需要频繁更新图形状态的场景，比如实时游戏画面、动态图表展示等。
2025-01-25 20:26:55
1509
原创 网络Web存储之LocalStorage
是HTML5提供的一种客户端存储机制，属于Web存储API的一部分。它允许网页在用户的浏览器中存储键值对数据，这些数据会以持久化的方式保存，除非用户手动清除浏览器缓存，或者通过JavaScript代码进行删除操作，否则数据将一直存储在用户的本地浏览器中。从技术角度来看，是window对象的一个属性，是一个存储对象，它提供了一些简单的方法来操作存储的数据，如setItemgetItemremoveItem和clear等，以实现数据的存储、读取、删除和清除所有数据的功能。
2025-01-19 21:18:51
1902
原创 同源策略（Same-Origin Policy）
同源策略是Web浏览器的一种安全机制，用于限制来自不同源的文档或脚本如何与另一个源的资源进行交互。这种策略有助于防止恶意网站读取另一个网站的敏感数据，例如用户的登录凭据或私人信息。通过确保只有来自相同源的脚本才能访问和操作DOM、发送AJAX请求或读取Cookie等，同源策略为Web应用程序提供了基本的安全保障。Web内容的源由用于访问它的URL的方案（协议）、主机名（域名）和端口定义。即源由协议、域名和端口组成。在页面中通过 about:blank 或 javascript:；
2024-12-14 19:50:29
2727
原创 网络请求与远程资源之XMLHttpRequest Level 1和2（一）
本文主要讲述了XMLHttpRequest Level 1的基本信息和XMLHttpRequest Level 2的详细信息XMLHttpRequest Level 2(XHR Level 2)是XHR Level 1的增强版，它引入了一系列新特性和功能，以改善Web开发中异步请求的处理。
2024-12-14 08:08:25
1137
原创 input与伪元素不兼容
由于元素的内容模型为空、不是容器元素、具有替换元素的特性，并且受到HTML和CSS规范的限制，因此它不能使用:after伪元素。如果需要在元素附近添加额外的内容或样式，通常需要使用其他HTML元素（如等）来包围它，并对这些元素应用CSS样式。同理，像::before等伪元素应该有与::after相同的问题。
2024-12-08 08:57:22
792
原创 ES6之解构
解构是JavaScript（ES6及以后版本）中一种非常强大的语法特性，它允许我们按照一定模式从数组或对象中提取值，并将这些值赋给声明的变量。它使得从数组和对象中提取数据变得更加简洁和方便。在实际开发中，合理利用解构可以提高代码的可读性和维护性。
2024-11-29 15:21:53
1024
原创 module模块化
模块化是指将一个大的JavaScript文件拆分成多个小的文件，每个文件都是一个独立的模块，拥有自己的作用域，并通过export和import语句来导出和导入模块中的成员（如变量、函数、类等）。这种方式有助于减少全局命名空间的污染，提高代码的可维护性和可重用性。
2024-11-24 08:40:13
320
1
原创 js实现八码数问题
本实验使用JavaScript实现了广度优先搜索（BFS）算法来解决八码数问题。通过定义适当的数据结构和辅助函数，以及实现BFS算法和路径构造函数，成功找 到了从初始状态到目标状态的解路径。实验结果表明，BFS算法能够正确解决八码数问题，但存在效率较低的问题。未来可以考虑引入启发式搜索算法来优化搜索过程。
2024-11-22 11:30:31
789
原创 js网络请求与远程资源之ajax（二）
基本概念 AJAX（Asynchronous JavaScript and XML）是一种用于在客户端（通常是浏览器）与服务器之间进行异步通信的技术。工作原理 Ajax通过XmlHttpRequest对象（XHR）来向服务器发送异步请求，从服务器获得数据后，再用JavaScript来操作DOM（文档对象模型）从而更新页面内容。这种方式使得网页可以在不重新加载整个页面的情况下，实现部分内容的更新，提高了用户体验和网页的交互性。同步。
2024-11-16 11:35:15
863
原创 js动画和css动画的区别
CSS动画：适用于简单、易于实现的动画；JS动画：适用于更复杂的、需要精细控制和更丰富的交互体验的动画。两种动画各有其优势和使用场景。在选择使用哪种动画方式时，开发者应根据具体需求和场景来进行权衡和选择。
2024-11-11 17:56:03
401
原创 超详细的flex布局！！！
CSS Flexible Box Module Level 1(简称flexbox，弹性盒，https://www.w3.org/TR/css-flexbox-1/)，它把以往艰巨的布局任务变得极为简单，例如很多类型的页面、小组件、应用和图库。弹性盒是一种简单而强大的布局方式，我们通过弹性盒指明空间的分布方式、内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中。本文通过主要通过CSS权威指南的只是进行阐述flex布局的强大之处和各种属性及其属性值的运用。
2024-11-10 10:49:05
7307
原创 屏幕分辨率和浏览器页面显示宽度的关系
在写页面的过程中，明明我的笔记本的分辨率是2560*1600的，但是当我给一个页面的body设置一个1240px远小于2560px的宽度，为什么会出现水平滚动条？此外，如果你的显示器一般在24寸-30寸的，应该不会出现这样的问题，因为这样的显示器足够大，缩放和文本缩放默认设置一般都为100%，这样的问题大概率会出现在笔记本上。自己测试的页面body变成了设置的1240px，不在出现滚动条，如果不设置width的话，会发现虽然变宽了，但是仍没到达屏幕应该有的分辨率2560px；为什么会出现这样的问题呢？
2024-11-01 10:34:21
1383
原创 Grid布局
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
2024-10-26 08:30:35
9606
1
原创 一篇带你认识BFC！！
BFC的全称为Block formatting Context，意思是块级格式化上下文。是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。可以理解为是一个元素的属性，当开启这个属性后，这个元素就可以看作是被隔离的独立容器，容器里面的元素不会影响到外面的元素。
2024-10-19 15:20:50
1326
原创 var、let 和 const 的区别
var、let和const在作用域、变量提升、重复声明、修改变量值、初始值设置、全局对象属性以及执行速度和内存占用等方面存在显著差异。在实际编程中，应根据具体需求选择合适的关键字来声明变量。
2023-08-13 16:22:47
271
1
原创 js中数组的常用方法
在JavaScript中，数组是一种非常重要的数据结构，它提供了一系列丰富的方法来操作和处理数组元素。以下是一些常用的数组方法
2023-08-06 10:16:19
120
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人