明里人

自定义滚动条 Scrollbar。为何要自定义滚动条？答案是追求 website 的极致体验。 浏览器为 DOM 元素容器所提供的默认滚动条样式，在局部滚动区域内使用会影响...

文件上传 是业务上一个很常见的需求功能，但它涵盖的知识点其实很多。笔者结合自己的工作积累，总结了一篇关于文件上传的常见场景和实现，或许会对正在阅读的你有所帮助。 一、文件上...

在一个 H5 页面底部放置 input 发送内容输入框是一个较常见的需求，比如：发表评论、ChatGPT 消息聊天等。 但在 ios 下绕不开一个头疼的话题：input 输...

HTTP 缓存，强缓存 与 协商缓存。Web 应用部署通知用户更新。聊一聊在前端对静态资源部署事项。...

我们如何保证项目、代码升级时，用户那里会渲染最新的程序呢？因为在项目升级时，我们不能让每个用户都手动刷新 从解决html、静态资源的缓存开始。对于无法加版本号的资源，采用自...

H5 DatePicker。在 H5 场景下，一个日期选择控件的交互，通常由 Popup 从底部弹出，内容区域展示三列 年、月、日 选项集合列表，通过滑动来选择日期。...

useTransition，React Transition Group，是 React 官方提供的一个工具库，用于管理和实现 React 元素在不同时机（如 进入、退出 ...

H5 实现左滑出现操作按钮。我们知道 H5 可视区域相对较小，为了将内容更多的呈现，许多需求都会将 列表数据项 的操作，选择以对数据项左滑形式出现。这类交互常见于商品购物车...

JS DOM 操作 "武功秘籍"。在原生 JS、JQuery 时代，页面中几乎所有的交互都需要使用 DOM 完成操作。随着以 数据驱动视图更新 为核心的 框架（React、...

JS Observer API 监听 DOM。随着浏览器不断革新，JS 原生层面提供了一些 Observer API 来应对一些 观察和监听 DOM 的交互场景。...

单行文本超长打点省略、多行文本超长打点省略。业务上经常会遇到 文本内容超出容器区域进行省略打点展示 的需求，而展示省略也存在多种场景和形式，今天我们来聊一聊这些细节。...

reactive 响应式数据，Proxy 数据劫持原理。在前端框架中被广泛使用，如我们熟知的 Vue 响应式数据劫持、React 生态 - 状态管理 Mobx。...

轮询异步请求，前端异步请求轮询方案， 轮询发起 HTTP 请求查询数据状态。在前后端数据交互场景下，使用最多的一种方式是客户端发起 HTTP 请求，等待服务端处理完成后响应...

动手实现用户头像上传，canvas，drawImage。在一些 toc 类面向个人用户的网站中，都会为用户提供自由选择上传头像功能。前端可以借助 canvas 和 Canv...

HTML video 视频字幕。<track> 外挂字幕，WebVTT。 我们在观看 电视、电影 时能够看到在播放区域下方，会展示与视频中人物说话所对应的字幕。字幕给观影者...

借助 navigator.sendBeacon、fetch keepalive 实现页面关闭时发送数据到服务器。在一些需求背景下，我们需要在页面销毁（关闭/刷新）时将数据同...

位运算，JavaScript 位运算在权限系统中的应用，JS 常见位运算：按位与（&）、按位或（|）、按位异或（^）、按位非（~）、左移（<<）、有符号右移（>>）、无符号...

ChatGPT AI、fetch stream、text/event-stream。在传统的客户端与服务端的数据交互，常见的两种交互方式是： 客户端发起 Ajax 请求后，...

CSS3 animation 动画可以实现很多功能，比如项目中常用到的 loading 效果。 最近项目中涉及到一个 loading 交互：“四个小圆点依次跳动”。最初采用...

H5 iOS、安卓环境下兼容处理。H5 开发总结。作为前端开发人员，业务上时常会涉及一些移动 H5 需求页面开发。但 Web 页面开发久了，转到 H5 页面形式开发难免会遇...