博客

先看效果，再看代码 进度条这玩意儿在前端开发中用得挺多的，不管是文件上传、数据加载还是任务进度，都能看到它的身影。我今天就来聊聊我是怎么用的，顺便分享一些踩坑的经验。 基础版：纯CSS实现 最简单的进...

优化前：卡得不行 话说最近接手了一个用React Router做的项目，一打开就发现这玩意儿卡得不行。用户在切换路由时，页面加载速度慢得让人抓狂。有时候甚至要等个5秒才能看到新页面，用户体验简直不能更...

先看效果，再看代码 最近在项目里折腾警告提示，发现这玩意儿虽然简单，但用起来还是有不少坑。今天就来聊聊我在这个过程中的经验和教训。 基础的警告提示：亲测有效 最简单的警告提示就是弹出一个模态框，显示一...

项目初期的技术选型 这次项目是个电商小程序，需要在微信、支付宝等多个平台上线。考虑到跨平台的需求，我们决定用Taro框架来开发。Taro号称是多端统一的解决方案，支持React语法，看起来挺适合我们的...

又踩坑了，targets目标配置搞不定 最近在搞一个项目，需要动态调整一些CSS样式，于是就想用CSS Custom Properties（自定义属性）来实现。结果一上来就遇到了问题，targets目...

项目初期的技术选型 最近我参与了一个新的前端项目，主要是一个电商网站的重构。这个项目的目标是提升用户体验和性能，同时减少代码维护成本。在选择技术栈时，我们决定使用React，因为它能很好地处理复杂的U...

我的写法，亲测靠谱 在使用PixiJS的过程中，我总结了一些实战经验，希望能帮助你少走一些弯路。首先，我们来看看如何正确地初始化一个PixiJS应用。 以下是我常用的初始化代码： // 导入PixiJ...

优化前：卡得不行 最近在做一个移动端的项目，页面上有一个需要大量滚动和拖动的列表。一开始没怎么注意性能问题，结果上线后用户反馈说页面卡得不行，特别是在低端手机上，滑动列表时简直像是在玩幻灯片。这让我非...

请求加密，这次是真的踩坑了 最近在做一个项目，需要对前端发送的请求进行加密处理。本来以为是个简单的事情，结果搞了一整天，最后发现还是得自己动手丰衣足食。 问题来了，数据怎么加密 一开始，我想的是用HT...

Service Worker搞不定离线缓存，我差点抓狂 前几天在项目里加了个Service Worker来搞离线缓存，结果发现页面加载不出来，缓存也没生效。折腾了半天发现原来是注册Service Wo...

简要介绍 在现代网页设计中，视觉体验已成为吸引用户注意力的关键因素之一。一个精心设计的背景动画不仅能提升页面的整体美感，还能增强用户的沉浸感和交互欲望。本文所解析的《Pattern图案元素 [1530...

优化前：卡得不行 最近有个项目用到了Highcharts，一开始没怎么注意性能问题，结果一上线，用户反馈说图表加载巨慢，尤其是数据量大的时候，页面卡得不行。我试了几种方案，最后这个效果最好。 找到瘼颈...

先看效果，再看代码 大家好，今天来聊聊我最近用Mocha做测试的一些经验。直接上手吧，先给大家展示一个简单的例子： const assert = require('assert'); const { ...

项目初期的技术选型 最近我参与了一个电商网站的开发，这个项目需要一个简洁明了的导航栏。在设计阶段，产品和UI设计师提出了一个需求：希望导航栏在用户滚动页面时能固定在顶部，也就是常说的“吸顶效果”。这种...

我的写法，亲测靠谱 用D3.js做数据可视化项目时，我一般会遵循几个基本原则。首先，尽量保持代码的简洁和可读性，这样后续维护起来方便多了。其次，充分利用D3.js的链式调用特性，减少重复代码。 比如，...

项目初期的技术选型 最近接手了一个移动端的项目，主要是一个电商应用。这个项目对用户体验要求挺高的，所以我们在性能优化上花了不少心思。特别是FID（First Input Delay），这个指标直接影响...

先看效果，再看代码 咱们直接上手，先来看看一个简单的Select选择器的实现。这个例子中，用户可以选择一个城市，然后显示相应的天气信息。亲测有效，简单易懂。 <div id="app"> ...

项目初期的技术选型 这次的项目是一个移动应用，需要在iOS和Android上都能跑。一开始我们考虑过用React Native，但考虑到团队对Web技术栈更熟悉，最后决定用Capacitor。Capa...

我的写法，亲测靠谱 在前端开发中，Library模式是一种非常实用的模块化开发方式。这种方式可以帮助我们更好地组织代码，提高代码的可维护性和复用性。下面我就分享一下我在实际项目中使用Library模式...

我的写法，亲测靠谱 在前端开发中，信息提示（比如弹窗、Toast、提示框）是常见的需求。我一般这样处理：用一个简单的函数来封装信息提示的逻辑，这样可以复用代码，减少冗余。下面是我的最佳实践代码： fu...