- 博客(43)
- 收藏
- 关注
RSS订阅原创 【前端】前端浏览器性能优化的小方法
本文全面介绍了前端浏览器性能优化的关键策略，涵盖资源加载、JavaScript、CSS、渲染、网络等多方面优化方案。重点包括：1）资源加载优化（雪碧图、WebP图片、Service Worker缓存）；2）JavaScript优化（代码分割、防抖节流、事件委托）；3）CSS选择器优化与关键CSS内联；4）渲染优化（虚拟列表、Web Workers）；5）网络优化（预加载、CDN）；6）性能监控（Performance API）。通过系统性地实施这些优化措施，可显著提升页面加载速度和用户体验。
2025-10-24 10:51:05
347
原创 【浏览器】浅析“三次握手”与“四次挥手”
摘要： TCP连接通过三次握手建立（SYN→SYN-ACK→ACK），确保双方收发能力和序列号同步，避免历史连接干扰。四次挥手关闭连接（FIN→ACK→FIN→ACK），因全双工特性需双向独立关闭，客户端最后等待2MSL确保可靠性。三次握手可合并步骤，而四次挥手因中间可能传输数据无法合并。该机制保障了HTTP/HTTPS通信的可靠性和有序性。
2025-10-24 10:48:35
690
原创 【浏览器】前端页面禁用浏览器复制的方案
本文介绍了5种网页禁用复制的方法：1)禁用文本选择和右键菜单；2)使用CSS的user-select属性；3)阻止复制/剪切/粘贴事件；4)通过透明层覆盖内容；5)禁用键盘快捷键。作者指出这些方案仅能"防君子不防小人"，完全禁止复制还需结合禁用F12等更多措施。提供的方法实现简单，但无法彻底防止内容被复制。
2025-10-23 14:57:34
159
原创 【JS】什么是单例模式
本文介绍了JavaScript中的单例模式，这是一种确保类只有一个实例并提供全局访问点的设计模式。文章通过比喻说明了单例的概念，分析了其优缺点，并提供了四种实现方式：对象字面量、闭包、Class和模块模式。每种实现都配有代码示例，展示了如何创建全局唯一的实例。文章还列举了单例模式的适用场景，如全局配置、缓存系统和状态管理等，并给出了全局状态管理和缓存管理器的具体应用示例。通过本文，读者可以全面理解单例模式的原理和实际应用方法。
2025-10-02 22:14:25
852
1
原创 【CSS】flex布局
Flex 布局摘要 Flexbox 是一种一维 CSS 布局模型，通过弹性容器和项目实现灵活的空间分配与对齐。核心特性包括： 容器属性：控制排列方向（flex-direction）、换行（flex-wrap）、主轴对齐（justify-content）和交叉轴对齐（align-items）； 项目属性：调整顺序（order）、伸缩比例（flex-grow/flex-shrink）及个体对齐（align-self）； 简写：flex-flow（方向+换行）、flex（伸缩基准）。适用于响应式布局，简化传统难题
2025-09-28 15:43:44
1042
原创 【VUE】移动端项目如何做适配
移动端适配是前端开发的重要环节，主要解决不同屏幕尺寸、分辨率和交互方式的兼容问题。常见适配方案包括：1）Viewport设置，通过meta标签控制缩放；2）REM方案，基于根元素字体大小动态调整布局；3）VW/VH方案，使用视窗单位实现响应式设计；4）Flexible方案（淘宝方案），结合rem和viewport实现适配。这些方案通常配合PostCSS等工具自动转换单位，确保在不同移动设备上保持一致的显示效果和用户体验。开发者可根据项目需求选择合适的适配方案。
2025-09-28 09:00:45
1069
原创 【企微】转发页面OAuth2.0登录的重定向问题
本文介绍了在企业微信VUE项目中实现自定义转发内容时遇到的授权登录问题及解决方案。由于转发后的链接缺少企微登录必需的code参数，导致页面无法正常加载。文章详细阐述了通过构造OAuth2.0授权链接重新获取code的流程，包括静默授权和手动授权的区别、链接构造规则及参数说明。开发过程中遇到的两个关键问题：code重复获取导致混淆和页面白屏问题，分别通过自定义转发路径处理code参数、路由拦截和监听路由变化等方式解决。最后总结了经验教训，强调了按文档规范实现和全面考虑各种情况的重要性。这些解决方案对于类似企业
2025-09-27 10:00:00
896
原创 【JS】JS基础-对象处理方法整合
《对象处理方法工具手册》摘要 本文系统介绍了JavaScript对象操作的核心API，包含以下主要内容： 对象创建：通过字面量、构造函数、Object.create()和Object.fromEntries()四种方式 属性定义：使用defineProperty和defineProperties方法配置属性特性 属性描述符：getOwnPropertyDescriptor等API获取和检查属性配置 对象遍历：keys/values/entries等方法获取不同形式的属性集合 对象复制：详述浅拷贝与深拷贝的实
2025-09-26 10:06:20
318
原创 【企业微信】VUE项目在企微中自定义转发内容
企业微信转发功能开发摘要 本文记录在企业微信中实现页面转发功能的开发过程。主要步骤包括： 通过npm或script引入企业微信JS-SDK 配置转发内容（标题、描述、链接、图标）和鉴权参数 进行企业微信鉴权和接口注册，特别注意不同版本API差异 实现转发功能调用，区分新旧版本API调用方式 封装成通用方法供各页面调用 开发中遇到签名生成和版本兼容性问题，需注意企业与应用身份权限的区分，以及新旧版本API的调用差异。最终实现自定义转发内容的功能，并建议将签名生成结果与后端对比验证。
2025-09-26 08:45:28
1542
原创 【SQL】SQL 命令大全
本文提供了全面的SQL命令指南，涵盖数据定义语言(DDL)、数据操作语言(DML)、数据查询语言(DQL)等核心操作。内容包括：数据库/表创建与修改、索引管理、数据增删改查、条件筛选、排序分组、连接查询等常用SQL语法。详细展示了CREATE、ALTER、DROP等DDL命令，INSERT、UPDATE、DELETE等DML操作，以及SELECT查询的各种用法，如WHERE条件、聚合函数、表连接等。适合从基础到高级的SQL学习和参考使用。
2025-09-25 16:47:48
812
原创 【npm】npm命令大全
本文总结了npm常用命令大全，涵盖项目初始化、包管理、脚本运行、发布配置等核心功能。基础命令包括npm init创建项目、install安装依赖、uninstall卸载包等；脚本命令支持运行package.json中的自定义脚本；信息查询命令可查看包详情和依赖关系；发布命令涉及版本管理和npm账号操作；配置命令可设置镜像源等参数；还包括缓存管理、安全审计、工作区管理等实用命令。文章最后提供了常用组合命令示例和环境变量配置技巧，适合开发者快速查阅npm操作指南。
2025-09-25 09:00:00
564
原创 Error: error:0308010C:digital envelope routines::unsupported 如何解决
本文详细介绍了解决Node.js中"error:0308010C:digital envelope routines::unsupported"错误的多种方法。主要解决方案包括：设置环境变量(--openssl-legacy-provider)、修改package.json、针对不同框架(React/Vue/Next.js)的特定配置、降级Node版本、更新依赖、修改Webpack配置等。文章分析了错误根源是Node.js 17+使用OpenSSL 3.0导致旧算法被禁用，并建议按临时→
2025-09-24 11:08:37
1116
原创 【Vue】Vue基础----插槽（Slots）
Vue 插槽(Slots)是组件化开发的核心功能，允许父组件向子组件注入自定义内容。主要包括：1)默认插槽，用于基础内容分发；2)具名插槽，通过命名实现多插槽分发；3)作用域插槽，子组件可向父组件传递数据；4)后备内容，当父组件未提供内容时显示默认值。插槽极大提升了组件的复用性和灵活性，特别适用于构建通用UI组件。Vue 2.6+推荐使用v-slot语法（可简写为#），取代旧版的slot和slot-scope特性。
2025-09-23 10:30:00
1009
原创 【HTML】行内元素和块级元素
HTML元素分为块级元素和行内元素，这是CSS布局的基础概念。块级元素（如div、p）独占一行，可设置宽高和边距；行内元素（如span、a）不独占行，尺寸由内容决定，垂直边距无效。行内块元素（inline-block）兼具两者特性，可同行排列又可设置尺寸。理解这些差异对掌握页面布局至关重要，可通过CSS的display属性改变元素默认行为。
2025-09-22 11:00:00
561
原创 【JS】JS基础--原型和原型链
JavaScript的原型和原型链是其面向对象编程的核心机制。原型（Prototype）是对象共享属性和方法的基础，每个对象（除null外）都有一个[[Prototype]]属性指向其原型。原型链通过__proto__串联对象，实现属性和方法的继承查找。构造函数通过prototype属性定义实例的原型，而__proto__指向对象的原型。ES6的class语法是原型继承的语法糖。关键概念包括原型链查找机制、Object.getPrototypeOf、instanceof和hasOwnProperty等工具方
2025-09-21 12:00:00
1009
原创 【JS】JS基础--字符串方法整理
JavaScript字符串方法总结摘要 JavaScript提供了丰富的字符串操作方法，所有方法都不会改变原字符串（字符串不可变），而是返回新字符串或其他值。 信息获取方法： length获取字符串长度 charAt()/charCodeAt()获取指定位置字符/编码 includes()/startsWith()/endsWith()判断字符串包含情况 indexOf()/lastIndexOf()查找子串位置 内容操作方法： concat()连接字符串 slice()提取子串（支持负索引） substr
2025-09-20 09:00:00
730
原创 【Vue】Vue 项目中常见的埋点方案
Vue项目中常见的埋点方案包括三种主要类型：1）手动埋点，直接在业务代码中调用埋点方法，灵活但耦合度高；2）指令埋点，通过自定义指令（如v-track-click、v-track-impression）实现DOM交互的自动埋点，减少代码侵入；3）组件装饰器/HOC模式，通过高阶组件包装自动注入生命周期埋点。埋点类型分为曝光、点击、页面停留和自定义事件四种，可根据需求选择不同方案。手动埋点精准但维护成本高，指令埋点适合交互事件，装饰器模式适合页面级埋点。
2025-09-19 16:36:48
510
原创 【JS】JS基础-数据类型
JavaScript数据类型分为原始类型和引用类型两大类。原始类型包括number、string、boolean、undefined、null、symbol和bigint，具有不可变性，按值存储和比较。引用类型主要为object（包括Array、Function等），存储在堆内存中，按引用比较。关键区别在于存储方式、可变性和比较机制：原始类型直接存储值且不可变，引用类型存储地址且可变。检查数据类型可使用typeof（原始类型）、instanceof（引用类型）和Array.isArray()等方法。理解这些
2025-09-19 11:31:56
607
原创 【JS】JS基础-数组方法
方法改变原数组？返回值类别push✅新length修改pop✅被删除的元素修改unshift✅新length修改shift✅被删除的元素修改splice✅被删除元素组成的数组修改reverse✅颠倒后的原数组修改sort✅排序后的原数组修改copyWithin✅改变后的数组修改fill✅修改后的数组修改concat❌新数组访问join❌字符串访问slice❌新数组（浅拷贝）访问indexOf❌索引/-1访问❌索引/-1访问includes❌布尔值。
2025-09-19 09:00:00
890
原创 【vue】时间组件--chrome插件开发
这是一个Vue3数字时钟组件，支持多种时间显示格式。主要功能包括：1. 可切换12/24小时制；2. 可选显示秒数；3. 支持日期显示；4. 可选显示年份和星期。组件使用了CSS毛玻璃效果，具有半透明背景和模糊效果。通过setInterval实现实时更新时间，并在组件销毁时清除定时器。组件采用响应式设计，通过props控制各元素的显示/隐藏状态，包括时分秒、年月日、星期等信息的显示选项。
2025-09-18 14:39:51
352
原创 满天星之canvas实现【canvas】
HTML5 Canvas 满天星动画实现 本文介绍了使用HTML5 Canvas技术实现满天星动画效果的方法。Canvas作为基于像素的绘图技术，适合动态图形渲染。 实现步骤： 初始化画布并随机生成100个星星的坐标、半径和颜色信息 通过arc()方法绘制静态星星 计算星星半径变化规律，设置0.5-3的随机变化范围 使用定时器(60ms间隔)不断重绘，实现星星闪烁动画效果 技术要点： 使用clearRect()清空画布实现动画帧更新 通过Math.random()生成随机位置和颜色 临界值判断控制星星大小变
2025-05-29 17:04:47
1067
原创 浏览器之禁止打开控制台【F12】
本文介绍了多种前端禁用浏览器控制台的实现方法，包括：1）无限debugger阻断控制台调试；2）监听键盘事件阻止开发者工具快捷键；3）禁用右键菜单；4）监听窗口大小变化检测控制台开启。还提到了使用console-ban第三方库和后端验证增强安全性。文章指出这些方法虽能增加调试难度，但无法完全阻止，建议结合数据加密等更安全的技术手段。提供了代码示例和效果演示，适用于有禁用控制台需求的开发场景。
2025-05-28 17:13:13
1748
原创 相见恨晚的工具网站【点赞收藏加关注】
今天分享的资源，是一些我自认为，非常之棒棒的网站，那可是相当的相见恨晚，今天只介绍两个，我觉得很牛的，我是相见恨晚了。废话不多说，开始吧。网站支持使用颜色选择器、颜色表和HTML颜色名称来获取HTML颜色代码、Hex颜色代码、RGB和HSL值。网站长这样：可以根据选择颜色生成对应的色彩组合，点击下载导出相关颜色代码，这个就很牛；网站还支持颜色转换，以及颜色名称的获取。有了这个网站，妈妈再也不用担忧，我自写网页时不知道该用怎样的颜色搭配了。
2025-05-27 11:22:02
461
原创 常用自定义指令-防抖与节流 【vue】【二】
本文介绍了两种Vue自定义指令的实现：防抖(Debounce)和节流(Throttle)。防抖指令通过在事件触发后延迟执行函数（默认300毫秒），若在延迟期间再次触发则重新计时，有效避免频繁操作。节流指令则通过限制函数执行频率（默认500毫秒），确保函数在指定时间间隔内最多执行一次。两种指令都提供了事件监听器的清理机制，防止内存泄漏。这些自定义指令可直接注册到Vue应用中，为高频事件处理提供优化方案。
2025-05-25 08:00:00
350
原创 品鉴JS的魅力之防抖与节流【JS】
本文介绍了JavaScript中函数防抖与节流的实现原理。防抖通过延迟执行并在触发时重置计时，确保函数只在最后一次事件后执行；节流则限制函数在指定时间间隔内最多执行一次。文章提供了两者的代码实现方案，并指出虽然常用lodash库，但了解原理有助于在无法使用第三方库时自行解决问题。这些技术能有效减少不必要的计算，提高页面性能。
2025-05-24 21:52:12
281
原创 常用自定义指令-高亮与拖拽【VUE】【一】
本文介绍了Vue中自定义指令的基本概念、核心特征及实现方式，并分享了两个常用的自定义指令代码示例。首先，自定义指令是Vue提供的扩展机制，用于封装对DOM元素的底层操作逻辑，与内置指令不同，需要开发者显式注册。其核心特征包括命名规范、生命周期钩子和参数传递。实现方式分为全局注册和局部注册。接着，文章分享了两个自定义指令的代码：1）搜索文本高亮指令，通过正则匹配搜索关键字并高亮展示；2）页面拖拽指令，通过鼠标事件实现元素在页面中的任意拖拽。这些指令适用于搜索结果展示和浏览器中的智能机器人图标等场景。
2025-05-23 17:22:25
1334
原创 canvas随机线条鼠标跟随背景代码分享【JS】
文章介绍了一个动态线条效果的实现，通过JavaScript和Canvas技术生成随机移动的线条，并支持鼠标交互。作者分享了该效果的背景，提到自己初学编程时对此类效果的惊艳感受，并希望通过开源代码帮助有类似兴趣的开发者。代码部分展示了如何通过JavaScript动态创建Canvas元素、设置线条属性、处理鼠标事件以及实现线条的随机移动和连接。该效果封装为Vue组件和JS文件，供开发者使用。
2025-05-23 07:00:00
638
原创 npm : 无法加载文件 F:\nodejs\npm.ps1问题【npm】
摘要： 解决npm无法加载脚本的问题，通常因Windows执行策略限制导致。提供四种方法： 临时更改执行策略（推荐）：以管理员身份运行PowerShell，执行Set-ExecutionPolicy RemoteSigned； 为目录单独设置策略：通过-Scope参数限定生效范围； 在VSCode终端直接运行：避免集成工具权限问题； 检查环境变量：确保Node.js和npm路径正确配置。 建议优先选择方法1或3，平衡便捷性与安全性。操作需管理员权限，完成后重启终端生效。 （字数：149）<｜end▁o
2025-05-22 09:00:00
1146
1
原创 【JS】JS基础-浅克隆vs深克隆
在JavaScript中，对象的赋值传递的是内存地址而非数据本身，这可能导致在修改目标对象时意外修改源对象，给开发带来困扰。为了解决这一问题，可以使用浅克隆和深克隆。浅克隆仅复制对象本身和基础类型的成员变量，而引用类型的成员变量则共享地址，常见实现方式有Object.assign和扩展运算符。深克隆则复制所有值类型和引用类型变量，确保源对象和目标对象完全独立，常见实现方式包括递归遍历和JSON转换。浅克隆适用于一般赋值场景，而深克隆则用于需要保留源数据干净或数据状态回退的场景。掌握这些克隆技术有助于避免数据
2025-05-21 07:00:00
292
原创 nvm-windows之node版本管理工具【node】【开发必备】
nvm 是一个用于管理多个 Node.js 版本的工具，特别适合前端开发者。本文介绍了如何在 Windows 系统上安装和使用 nvm。首先，用户需要从 GitHub 下载 nvm-setup.exe 或 nvm-setup.zip 进行安装。安装过程中，用户可以选择安装目录和 Node.js 快捷方式的生成位置。安装完成后，用户可以通过命令行工具（如 PowerShell）输入 nvm -v 来验证安装是否成功。nvm 支持安装、切换和管理多个 Node.js 版本，用户可以通过命令如 nvm insta
2025-05-20 11:05:08
1732
2
原创 自定义指令---v2与v3之间的区别【VUE基础】
在Vue开发中，自定义指令是一种用于重用底层DOM操作逻辑的工具。Vue2和Vue3在自定义指令的定义、注册和钩子函数方面存在一些差异。Vue3中，自定义指令可以通过全局注册或组件内注册，钩子函数包括created、mounted、updated等，而Vue2的钩子函数则包括bind、inserted、update等。两者的钩子函数参数也有所不同，Vue3提供了更多的参数选项。此外，自定义指令的参数可以是动态的，并且可以通过简化形式快速定义指令。通过合理使用自定义指令，开发者可以更高效地复用代码，提升开发效
2025-05-19 20:00:00
1398
原创 【vue3】vue3基础--全局混入
使用全局混入在Vue 3中，你可以通过在app.config.globalProperties上添加属性或方法来实现全局混入。但是，如果你想通过更“传统”的混入方式实现全局混入，你可以使用app.mixin()方法。Vue 3的Composition API：对于更复杂的逻辑和状态管理，Vue 3的Composition API提供了更好的灵活性和组织结构。在Vue 3中，全局混入（Mixin）的概念与Vue 2相似，但有一些细微的差别。这意味着最后一个混入的属性或方法将覆盖之前混入的同名属性或方法。
2025-05-17 18:58:16
797
原创 问题 You have not concluded your merge【GIT】
在Git操作中，如果遇到“error: You have not concluded your merge (MERGE_HEAD exists)”错误，通常是因为之前的合并操作未完成或存在未解决的冲突。解决此问题有两种常见方法：第一种是使用git merge --abort终止当前合并，然后通过git reset --merge、git pull和git push重新合并代码；第二种方法是使用git fetch --all拉取所有远程分支，然后通过git reset --hard origin/maste
2025-05-15 19:00:00
437
原创 常用css代码片段【css】【持续更新中】
收录一下常用的css的代码片段，方便日常的工作。在下从事前端开发不到六年，技术虽不牛，但是喜欢探讨，如有问题，也可交流探讨！
2025-05-15 14:24:38
363
原创 【chrome插件开发】vue开发chrome拓展模版
本文介绍了如何使用Vue框架开发Chrome扩展程序。文章从初始化Vue项目开始，详细说明了如何修改项目目录结构以适应Chrome扩展开发，重点介绍了manifest.json文件的配置要求。作者还提供了vite.config.js的配置代码，指导如何打包项目并最终在Chrome浏览器中测试运行扩展。文中包含具体的文件结构示意图和操作步骤说明，并提供了Git仓库地址供读者直接使用现成模板。对于想自己开发Chrome扩展的前端开发者，本文提供了从零开始到最终实现的完整流程指南。
2025-05-15 10:00:00
2293
原创 vue 埋点方案【vue】
选择合适的方法取决于你的具体需求和使用的分析工具。对于大多数情况，使用第三方库或全局混入是较为常见和方便的方法。如果你需要更细粒度的控制，可以考虑使用Vue组件生命周期钩子或自定义指令。
2025-05-14 12:00:00
669
aes加密，在手机端报错
2025-10-28
想开发一个自用工具，去收集网站导航，不使用数据库
2025-10-13
TA创建的收藏夹 TA关注的收藏夹
TA关注的人