1. 前端开发

    对油猴脚本 Pixiv Previewer 进行二次开发

    笔者的业余爱好之一就是逛 Pixiv,收藏好看的插画等作品并下载到本地。油猴脚本 Pixiv Previewer 做了两个笔者很喜欢的便利性工作: 作品预览:鼠标悬浮在作品缩略图上时自动在当前页面显示大图,快速决定要不要点进作品页。 作品排序:作品搜索页可以按“排序”按钮,自动获取若干页的作品并按照收藏数排序,快速筛选优质作品。 出于爱好,笔者去脚本仓库翻阅了一下源码,觉得有一些可以改进的地方…

    03 月 17 日 2025 年
    TypeScript Tampermonkey Pixiv
  2. 前端开发

    基于 Gatsby 打造我的个人博客系统

    碎碎念 搭建一个自己的博客是无数跻身于 IT 行业开发者的心中最质朴的愿望! 回想笔者的历程,刚上大学的时候就摩拳擦掌想要实现一个博客系统,但在 Github 上创建了仓库以后就开始了无限期的拖延:自己没有任何的开发经验,不知道框架也不知道 UI 组件库,只知道要写 HTML + CSS + JavaScript 代码,面对眼前想要实现的完整系统不知该如何下手。 从零开始实现博客系统的计划虽然搁浅…

    03 月 12 日 2025 年
    React TypeScript Gatsby
  3. 前端开发

    纯前端如何实现一个转盘抽奖组件

    为什么 前阵子面试的时候被问到这个问题,觉得挺有意思,于是决定亲手实现一个转盘抽奖组件试试。 翻看别人的实现方案时,发现和自己面试时答得相差很大,悲 😢。但总之,是时候开始弥补自己的 CSS 和动画技能了。 是什么 一个转盘抽奖组件主要由三部分组成,写有中奖结果的圆形转盘、指向结果的指针和开始转动的按钮。 如果每个中奖结果的概率相近,我们可以按照真实概率来划分每个奖品所占圆形的扇形比例…

    09 月 06 日 2024 年
    TypeScript CSS
  4. 前端开发

    Electron 执行后台程序并在渲染器实时打印运行日志

    开发图像查重工具时遇到了这样一个问题:在查重之前,用户需要先对图像文件进行索引操作,后台将调用可执行文件并为每张图像生成特征值。索引操作所需的时间与图像的数量及大小呈正相关,笔者为大约 50000 张图片(约 170GB)生成特征值,需要花费将近 90 分钟的时间。在这种情况下,如果渲染器什么也不展示,卡在那里,用户难免会非常焦虑 —— 后台是否还在运行,我是不是卡死了? 那么需求也就明了了…

    08 月 05 日 2024 年
    Node Electron TypeScript React
  5. 前端开发

    遇到 AntD 组件中文乱码问题,可以试试这么解决

    项目中使用了 AntD 4.x 的 组件,开发环境显示正常,生产环境显示乱码,如下图所示: 问题原因 组件底层的国际化既由 AntD 提供的 控制(如上图的“年”,显示正常),又由 Moment 控制(如上图的“月”,显示乱码)。 经查询,当我们以 ISO8859-1 方式读取 UTF-8 编码的中文时,会出现如“由月è¦�å¥½å¥½å­¦ä¹ å¤©å¤©å�‘上…

    10 月 09 日 2023 年
    React TypeScript Ant-Design
  6. 前端开发

    为什么我使用 Umi 的 model 简易数据流管理插件

    Umi 是一款企业级的 React 前端应用框架,云巧产业数字组件中心推荐使用基于 Umi 的 Koi 框架统一前端应用研发流程,支撑前端项目从研发、联调到上线、发布的全流程。 本文假设您正在或计划使用 Umi 或 Koi 作为底层框架支撑前端应用的开发,并且对 Umi 有一定的了解。 数据治理的原则 React 的核心特征是“数据驱动视图”,用公式表达即 ,通过数据变化来驱动视图变化。React…

    10 月 23 日 2022 年
    React Umi
  7. 前端开发

    定时器 SetTimeout 在后台失效?试试 Web Worker 吧

    业务上有这样一个需求:「若用户不活跃超过 12 个小时,自动退出当前页面,并切换路由到首页」。 想都没想,直接在 里用 定个时,12 个小时后触发相应跳转事件: 没想到,今天上班来,切换到没有关闭的标签页,发现还在当前页面,掐指一算怎么也有 12 个小时了,这是怎么一回事儿……? 昨天晚上走的时候还在和前辈探讨页面卸载()事件与浏览器后台优化的坑,于是首先就想到了可能是浏览器优化的缘故…

    09 月 22 日 2022 年
    TypeScript React Web-Worker Umi Webpack
  8. 前端开发

    把自己的简历做成 Web 页面

    去年投简历的时候,在 Github 上找了个开源的,星星很多的仓库 best-resume-ever 来制作自己的简历。其中的 Creative 模板我觉得很喜欢,就用它制作了我人生中的第一份找工作用的简历: 然后到了现在,到了秋招真正找工作走向社会的季节了,又该制作自己的简历了。一年的时光给自己的人生又增添了几分色彩,原先简历模板已然不够用了。正巧,这个仓库由 Vue 编写…

    08 月 19 日 2021 年
    resume CSS Vue-2 Github-actions rxjs
  9. 前端开发

    为 Archer 主题更换字体

    看腻了原先的字体,亦或是想满足独树一帜的设计欲望?不妨更换一下博客的字体吧!本文将基于 Hexo 和主题 Hexo-Theme-Archer 展示如何更换博客的中文字体。 引入字体文件 这里提供两种引入的思路,一种是 CDN 引入,一种是本地引入。建议通过 CDN 的方式引入,可以大大提高加载效率。 引入 CDN 字体文件 以更换字体为思源黑体(Google 字体上叫 ,Adobe 版本叫 )为例…

    06 月 26 日 2021 年
    Node Hexo hexo-theme-archer
  10. 前端开发

    函数防抖和节流,以及在 Vue 中的运用

    在前端性能优化中存在一个老生常谈的问题:如何优化高频率执行的 JS 代码?例如: 我们为浏览器滚动 scroll 绑定了监听事件,当滚动到某位置之下后,会在浏览器右下方显示一个点击后能快速回到页面顶部的浮动按钮;而滚动回该位置之上时,浮动按钮消失。现在我们发现,用户每次使用滚轮滑动页面,都会触发很多次该事件,判断当前在该位置之上还是之下,这在一定程度上降低了前端的性能。 我们为网页添加了搜索功能…

    05 月 08 日 2021 年
    JavaScript Vue-2 Nuxt
  11. 前端开发

    在 Nuxt.js 中引入高德地图并实现定位及逆地理编码

    迷途知反!腾讯地图的 JS API 文档实在过于简陋,且库很久没有更新,转身投入高德地图的怀抱,享受 this moment 的美好! 高德地图与腾讯地图定位功能区别 高德地图将定位功能和逆地理编码功能分开为两个操作,而腾讯地图将二者合并。 这意味着使用高德地图实现逆地理编码,首先需要执行定位操作,再将得到的结果传给逆地理编码插件获得最后的结果。 此外…

    03 月 17 日 2021 年
    JavaScript Node Vue-2 Nuxt Promise
  12. 前端开发

    使用腾讯位置服务进行 Web 前端定位

    正在开发的 Web 项目需要获取使用者的位置信息,而使用者主要通过移动端访问此 Web 服务。位置信息需要精确到区。在腾讯位置服务的定位解决方案里想要搜索可用的 JavaScript 库,只看到了服务端的 IP 定位和移动端的几个 SDK 包,甚异之。 终于在不起眼的地方找到了前端定位组件,适用于浏览器进行定位操作。 本文基于 Nuxt.js 实现前端定位功能。 它能做什么 组件旨在优化纯 HTM…

    03 月 16 日 2021 年
    JavaScript Node Vue-2 Nuxt
  13. 前端开发

    Nuxt 项目配置 ESLint 和 Prettier 检查并规范代码质量与格式

    哪位代码人不希望自己的代码总有统一优美的风格,不会因为合作开发项目而杂乱呢? 在最开始写项目代码的时候我就用起了 ESLint 和 Prettier,再装一堆预设的配置,便跑了起来。令人沮丧的是,用 ESLint 修复了代码质量问题,还是会在编译器里看到红色波浪线,提醒还有些代码风格需要修复。直到这一次,我才忽然意识到 ESLint 和 Prettier 其实分工了不同领域,协同使用体验极好。 本…

    03 月 03 日 2021 年
    Node Nuxt ESLint Prettier VSCode
  14. 前端开发

    Webpack 读取本地 Markdown 文件并进行预处理

    在开发 NetUnion 的官网页面时,有这样一个需求:读取本地目录下的新闻和博客文件,并在前端渲染,其中文件均为 Markdown 格式。 与全栈开发直接调用后端数据库不同的是,没有数据表字段来记录文件的不同属性,例如文件的题目、作者、撰写日期等,因此这些属性需要记录在 .md 文件当中。 这样的撰写方式是不是很熟悉?没错,不就是我正在写的 Hexo 博客中 .md 文件的编写格式嘛! 自动导入…

    02 月 23 日 2021 年
    Markdown JavaScript Node Webpack