- 博客(142)
- 收藏
- 关注
RSS订阅原创 为什么推荐前端学习油猴脚本开发？
油猴（Tampermonkey）是一款浏览器插件，允许用户在网页加载时注入自定义的 JavaScript 脚本，来增强、修改或自动化网页行为。通俗地说，借助油猴，你可以将自己的 JavaScript 代码“植入”任意网页，实现自动登录、抢单、签到、数据爬取、广告屏蔽等各种“开挂级”功能，彻底掌控页面行为。分享一些我实现的有趣网页脚本手势识别实现网页控制人脸识别实现”人脸版黄金旷工“小游戏****接口拦截工具：修改CSDN博客数据接口返回值Vue路由一键切换：开发效率起飞。
2025-07-07 20:17:35
999
原创 不懂this指向，我写了一个bug，好久没有解决！
data() {return {counter: 0},methods: {// 使用 .bind(this) 修复 this 指向问题
2025-06-30 14:09:09
966
原创 油猴+手势识别：我实现了任意网页隔空控制！
最近我的小册《》上线了，很多同学都很感兴趣。有些人学习后就私下问我，，是否能结合手势识别实现任意网页隔空控制，实现类似手机上的隔空翻页功能呢？这是个非常好的想法，于是，我经过研究，将它实现出来了！先看看脚本效果：1️⃣2️⃣3️⃣当然，还预设了很多手势，比如双手比✌🏻关闭当前网页，左手竖起大拇指，右手实现缩放网页等效果。
2025-06-30 14:06:12
785
原创 new Map 这么好用，你为什么不用？是不喜欢吗？[特殊字符]
不夸张地说，Map就是更强大的对象升级版。所以嘛——你要是还没用new Map()，赶紧优雅起来吧😉。
2025-06-26 14:40:28
730
原创 老板说文字样式很low，那我加个渐变动画吧，闪瞎他
这几天项目结测，老板觉得我们没事干，告诉我首页的文字太难看，想让我自己设计设计。好，既然让我干UX的活，那我就整个花里花哨的动画，闪瞎他！
2025-06-26 14:37:29
714
原创 前端中的“+”连接符，居然有鲜为人知的强大功能！
一元正号运算符是一个简便的方法，用于将非数字类型转换为数字。如果你们后端返回字符串0和1，你需要转换成布尔值，使用"+"简直不要太爽// isCritical 是字符串"0"或"1"或者处理表单输入时用// 将字符串转换为数字42。
2025-06-25 20:23:17
1046
原创 H5录音、图文视频IndexDB储存最佳实践：用AI生成语音备忘录
随心记是一个由 AI 生成的网页备忘录，它支持语音录入（可下载）、图文视频记录。最重要的是，它支持离线使用，所有数据都储存在浏览器中，不依赖后端，刷新页面数据也不会丢失！
2025-06-25 20:19:22
1660
原创 挖到宝了！快来看看new Evenet中的惊喜功能
《new Event在JavaScript中的应用与实践》 摘要：本文介绍了JavaScript中new Event的基本用法和高级应用场景。作者从官方API出发，讲解了创建和触发自定义事件的基本语法，并通过示例展示了其在模块通信中的实际应用。文章还对比了Event和CustomEvent的区别，重点演示了如何在Vue组件间通过window对象传递自定义事件。作为开源技术博主，作者还分享了自己开发的实用油猴脚本案例，包括接口拦截、路由切换等工具，并推荐了相关开发教程。全文以150字精炼呈现new Event
2025-06-24 08:17:20
419
原创 写了个脚本，发现CSDN的前端居然如此不严谨
通过这篇文章的示例，我们前端应该引以为戒，永远不要相信后端同学返回的数据，一定要做好容错处理！通过本文，相信大家也明白了油猴脚本不仅是玩具，它在前端开发中其实是个非常实用的辅助工具！如果你对油猴脚本的开发感兴趣，不妨看看我写的这篇教程 《油猴脚本实战指南从小脚本写起，说不定哪天你也能靠一个脚本搞出点惊喜来！
2025-06-24 08:14:46
754
原创 包教包会，ES6类class的基本入门
本文介绍了JavaScript中类的由来和ES6的class语法。传统构造函数写法与面向对象语言差异较大，class语法更清晰。文章通过代码对比展示了构造函数与class写法的区别，指出class本质上仍是prototype的语法糖。重点讲解了类的方法定义在prototype上的特性，以及如何使用Object.assign批量添加方法。同时说明了constructor方法的默认行为、类的实例化注意事项，强调必须使用new操作符。最后指出类属性和方法的定义位置规则：显式定义在this上的属性和方法属于实例，否
2025-06-22 19:13:34
923
原创 Vue 3 自定义指令实战：实现一个轻量级拖拽神器
v-drag钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
2025-06-21 07:02:03
4768
2
原创 这可能是Vue自定义指令最简洁的教程了
new Vue({directives:{指令名:配置对象} 或 directives{指令名:回调函数}})Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)直接书写多个Vue.directive可以注册多个自定义插件，但是这样比较麻烦element.text = "哈哈哈哈哈哈"})element.text = "你是狗"})element.text = "你是狗!!!})因此，我们可以使用插件安装的方式进行优化。比如，我们现在定义了一个。
2025-06-20 09:05:16
1088
原创 Vue 3 超强技巧：VueUse，让代码更优雅、开发更高效！
VueUse 是一个基于 Vue Composition API 的实用工具函数集合，旨在简化 Vue 应用的开发。它不仅提供了对 Vue 响应式系统的高度抽象，还封装了各种浏览器 API、状态管理工具、时间处理函数等常用功能。模块化与按需加载：支持按需引入，优化性能。高可扩展性：支持插件扩展，如 Router、Firebase 等。社区活跃：文档详尽，功能更新迅速，适配最新 Vue 版本。
2025-06-19 09:17:49
976
原创 分享10个吊炸天的油猴脚本，2025最新！
大家好，我是石小石！一个热爱技术分享的开源社区贡献者，小册《》作者、CSDN专栏《》作者。油猴（Tampermonkey）是一款浏览器插件，允许用户在网页加载时注入自定义的 JavaScript 脚本，来。下面，分享我精心整理的10个好用脚本！
2025-06-19 09:15:21
3883
原创 超全面的VSCode实用插件推荐，开发效率遥遥领先！快收藏~
大家好，我是石小石！一个热爱技术分享的开源社区贡献者，小册《》作者、CSDN专栏《》作者。作为前端开发，vscode好比我们的衣食父母，不可或缺。我相信大家都试过给编译器装一些插件，用来提升开发效率。但是，很多文章介绍的插件都不怎么详细，有些更是毫无卵用，尤其某N，简直屎里淘金。这篇文章，我将结合自己的工作经验，向大家推荐我工作中用到的一些插件，我会尽可能详细和全面介绍。如果大家有更好用的插件，欢迎在评论区分享！
2025-06-18 09:20:30
1315
原创 尴尬，不懂eslint --fix，我闹出了大乌龙
通过我的尴尬经历，希望大家能意识到：工具的正确使用可以大大提升效率，减少出错几率。ESLint 是一个强大的工具，功能尤为实用——它可以自动修复格式和部分常见问题，让代码变得干净整洁，省去手动处理的麻烦。通过配置到脚本中，比如，我们可以进一步优化开发流程。加上参数如--fix-type--cache等，更能根据项目需求精准控制修复范围。学会使用，不仅让代码更规范，还避免在评审中闹出“抠脚”级别的乌龙！所以，少些尴尬，多些学习吧！
2025-06-18 09:17:44
1114
原创 纯 CSS 实纯 CSS 实现 Input 输入框跑马灯特效，领导很喜欢
这几天遇到一个主页搜索输入框的需求，没有UI，领导让自由发挥。我心想，使用第三方组件库写输入框要low了，要不搞点花活？于是我突发奇想——**要不要做个「跑马灯边框」的输入框？**我一边查资料一边试，靠着纯 CSS 硬是整出来一个「彩虹边框跑马灯」的 input 输入框特效。把 demo 发给组长看，结果他愣了两秒，然后说了一句：“你这太花里胡哨了……不过还真挺炫的！😮”
2025-06-17 08:43:19
398
原创 分不清Boolean和boolean，我被同事diss了！
这几天写代码，遇到一个不确定的知识点，我在vue的props中如何给一个属性定义小写的bolean，代码就会报错但是大写的Bolean就没问题由于我在其他地方我看大小写都可以，有点疑惑，于是想去请教一下同事。然而，没想到同事上来就diss我，这么基础的知识你都不清楚？这两个根本就不是一个东西！我有点不开心，想反驳一下：这两个不都是描述类型的东西吗？我给你看其他地方的代码，这两个都是可以混用的！
2025-06-16 08:17:00
924
原创 不要写!!这种强制布尔转换了，不精通就别害人害己
这篇文章介绍了!!的原理，它核心依赖于 JavaScript 的隐式转换，因此我们必须知道真值和假值。同时，这篇文章介绍了!!的使用场景，大家可以根据情况使用！但注意，!!可读性比较差，对于初学者，最好不要使用！如果你想希望代码更加清晰，可以考虑使用Boolean()函数来代替!!。
2025-06-15 15:30:12
556
原创 不是 forEach、filter 不爱了，而是 new Set 太全面了！
爱，或许就像写代码。forEach和filter的确帮我做了很多事情，它们频繁出现在我的代码里，兢兢业业、无怨无悔。可我得承认，那不是爱，那只是习惯。直到我遇见了Set——它不常出现，却总能在关键时刻，优雅地解决问题，让人心安。它简洁、高效、不啰嗦，仿佛天生就是为“唯一”而存在。
2025-06-15 15:26:58
852
原创 因为没有使用路由懒加载，产生了一个难以寻找的bug
前几天项目完成路由迁移后，原有页面突然出现了样式错乱的问题。如下图，侧弹窗原本应包含“保存”和“取消”两个按钮，但迁移后，“取消”按钮异常消失，布局错乱。通过浏览器样式的调试定位问题，我最终发现是一个名为.line的全局样式，与弹窗底部容器发生了冲突。当我临时删除该全局.line样式后，页面恢复正常，说明问题确实出在样式冲突上。继续追踪源码后发现，这个.line样式实际上来源于另一个路由页面，是那里的写一了全局样式line，从而影响到了当前页面的组件。
2025-06-14 16:03:21
738
原创 浏览器指纹-探究前端如何识别用户设备
什么是浏览器指纹？大家好，我是，一个热爱技术分享的开源社区贡献者。写有《油猴脚本实战指南》、《Vite极速入门与进阶》、《Threejs极速入门》、《前端学Java》等专栏。目前专注于微前端架构与 AI 相关技术的研究与工程实践。什么是浏览器指纹？浏览器指纹（Browser Fingerprinting）顾名思义，是用来唯一标识你浏览器的一组“特征值”。它不是我们理解中的那种真实指纹，而是通过收集浏览器、操作系统、设备分辨率、字体、插件等信息，组合成的一个独特 ID。
2025-06-14 16:00:17
955
原创 被谷歌插件劝退，我半小时学会了油猴脚本开发
很早以前，我就被里的各种插件所吸引，比如能屏蔽广告的 Adblock能定义标签页界面的 Infinity 新标签页、用来格式化 JSON 的开发小工具，还有截图工具，甚至是这样面向开发者的调试利器。。当我了解到这些插件其实是用 JavaScript 开发的时，我立刻产生了浓厚的兴趣。我兴奋地想着——如果我能掌握插件开发，是不是就能随心所欲地给网页加上各种炫酷的功能？当时脑海里一下冒出了很多点子，觉得这是前端开发和浏览器能力结合后最有趣的事情之一。
2025-06-13 13:25:15
1538
原创 优雅！原生Js实现多标签页之间的数据共享如此简单
本文介绍了两种原生JavaScript实现多标签页间通信的方法：BroadcastChannel API和localStorage结合storage事件。BroadcastChannel提供了更现代的解决方案，支持双向通信和对象传输，适用于新浏览器；而localStorage方案则兼容性更好，
2025-06-13 09:20:49
760
原创 优化篇15|提升网页加载速度，Vite中Gzip 压缩实战
什么是gzip 压缩在构建现代 Web 应用时，页面加载速度始终是用户体验优化的重要环节。而资源体积过大会直接影响加载时间。是一种常见的前端性能优化手段，能够显著减小资源体积，降低网络传输成本。什么是gzip 压缩即使使用了构建工具（如 Webpack 或 Vite）进行优化，打包后的资源体积仍可能较大，尤其包含大量第三方依赖时，这会显著影响网页的首屏加载速度。是一种常用的文本压缩格式，能在浏览器与服务器之间传输资源时显著减小体积，浏览器可自动解压并解析。如果浏览器的请求头中包含**c**
2025-06-09 11:16:51
66
原创 Vue3setup的参数说明
这也意味着即使我们不声明参数的接收，也可以直接在子组件中使用 { {$attrs.msg } }的方式使用参数，但，这确实还是比较麻烦的。这时，我们打印一下子组件的实例对象v会惊喜的发现，$slots上存放了我们传入的虚拟节点（Vnode）这个时候，如果我们在子组件中定义了插槽，这些虚拟节点就会渲染在插槽出现的位置。如果，我们在子组件中不使用props声明接收，打印当前实例vc对象。，我们会惊奇的发现，即使子组件没有声明接受，父组件传递的参数也会被。可以发现，子组件的实例对象vc上的$slots属性为空。
2025-06-09 10:50:44
1645
原创 优化篇14|网站加载优化：Vite分包策略提升资源加载性能
问题分包前分包后缓存利用改动业务逻辑也会导致全部 JS 文件重新加载第三方库单独打包，可长期缓存构建输出一个大文件多个按功能分离的 JS chunk网络性能浪费带宽与加载时间加速页面加载，提升体验。
2025-06-09 10:47:49
196
原创 代理篇12|深入理解 Vite中的Proxy接口代理配置
代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕过浏览器的跨域限制。比如前端发起请求：http://localhost:5173/api/user通过proxy转发代理，最后的实际请求如下：注意：浏览器控制台的请求依旧是，但后端接受的。
2025-06-09 10:14:56
434
原创 资源篇11|Vue3 中图片引入终极指南：从静态到动态的全方位解析
场景推荐方法静态图片相对路径或import引入动态生成路径的图片new URL动态拼接路径批量动态导入目录中的图片使用延迟加载图片配合懒加载库通过灵活应用这些方法，可以让我们的 Vue3 + Vite 项目图片管理更加高效、灵活！关注我，我是石小石！
2025-06-08 20:46:02
490
原创 样式篇09|让 CSS 更聪明：Vite 中 PostCSS 的最佳实践指南
有些情况下我们可能希望精确控制需要支持的浏览器范围，这可以通过> 0.5%not deadPostCSS 插件（如或preset-env）会自动读取该配置。自动前缀兼容各大浏览器使用现代 CSS 特性而不用担心兼容性与 CSS Modules、Less 等配合使用，提升开发体验。
2025-06-08 20:38:48
158
原创 样式篇07|Vite CSS 调试进阶：你应该了解的 devSourcemap 配置
source map（源映射）是构建工具中非常常见的概念。将构建后的代码映射回原始源码，以便在浏览器中调试时能看到你真正写的代码。这不仅适用于 JavaScript，也适用于 CSS。
2025-06-08 19:49:04
119
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人