Mirror源码精读Hash路由、虚拟滚动与页面过渡动画的实现技巧【免费下载链接】MirrorA blogging tool powered by GitHub API. Write your blog on GitHub issue.项目地址: https://gitcode.com/gh_mirrors/mirror9/Mirror一句话认识 Mirror这是一个基于 GitHub API 的开源博客工具你的每一篇博文就是 GitHub 上的一个 Issue真正实现用 GitHub Issues 写博客。Mirror 源码精读来了作为一款以 GitHub Issues 为内容后端的轻量级博客工具Mirror 的前端代码规模不大却浓缩了前端开发中最经典的三大技巧Hash 路由、虚拟滚动、页面过渡动画。本文带你逐行拆解这三个模块的实现思路无论你是刚入门前端路由原理的新手还是想给项目加上丝滑动画的进阶开发者都能从中获得可以直接抄作业的灵感。全部源码都在src/目录下配合阅读效果更佳。Mirror 是什么用 GitHub Issues 写博客的开源工具 Mirror 的思路非常巧妙内容不存数据库而是直接用 GitHub 仓库的 Issues 当文章存储。写博客就是在 GitHub 上提 Issue发布、分类、评论全部复用 GitHub 的能力前端只需要通过 GitHub GraphQL API 把数据拉下来渲染即可。这种架构让整个前端保持极简——没有 Vue、React而是用原生 JavaScript 加极简构建工具 Falco 打包。入口文件 src/index.js 里路由、滚动、动画三大模块被组织得井井有条模块路径职责路由src/router/解析 URL、分发页面滚动src/scroller/自定义滚动与进度条动画src/switch/页面切换过渡动画下面逐一精读。一、Hash 路由零依赖的轻量路由方案 SPA单页应用离不开路由。Mirror 没有引入任何路由库而是自己手写了一个不足 60 行的 Hash 路由全部代码在src/router/index.js和src/router/params.js两个文件里。核心入口监听 hashchange 事件Hash 路由的原理是URL 中#后面的部分变化时浏览器会触发hashchange事件且不会刷新页面。Mirror 正是抓住这一点window.addEventListener(hashchange, (e) { this.resolve(e) })hash()函数负责从window.location.hash中取出路由字符串比如#/posts/123解析出/posts/123。这就是 Hash 路由的完整雏形——用 URL 变化驱动视图变化实现前进后退都能用的体验。路由匹配与动态参数提取路由定义在src/index.js中只有四条/首页/posts/:id文章详情/after/:cursor向后翻页/before/:cursor向前翻页src/router/params.js里的routeMatch函数把/posts/:id这种模板转成正则表达式^/posts/([\w-])$再与当前 URL 匹配computeParams则负责把:id对应的实际值提取出来。一个正则搞定动态参数解析思路值得借鉴。巧用 Base64 游标实现翻页 GitHub GraphQL API 的分页靠的是cursor游标它是一串很长的 Base64 字符串直接放进 URL 既不美观也容易超长。Mirror 的处理很聪明if (params.cursor) { params.cursor window.atob(params.cursor) }进入路由时用window.atob()解码还原。前后翻页都指向同一个数据源配合内存缓存来回切换几乎零延迟。二、虚拟滚动用 transform 打造丝滑滚动体验 长列表页面的滚动性能是博客站点的门面。Mirror 的滚动模块在src/scroller/index.js基于virtual-scroll库扩展核心思路是把原生滚动交给滚轮事件把页面位移交给 CSS transform。为什么不直接用原生滚动原生滚动在部分浏览器上会触发大量布局重绘尤其在长列表场景下容易卡顿。Mirror 的做法是监听滚轮事件拿到deltaY累加到scrollY上然后用translateY()位移整个内容层this.scrollY e.deltaY this.scrollY Math.max((this.child.scrollHeight - window.innerHeight) * -1, this.scrollY) this.scrollY Math.min(0, this.scrollY)两行Math.max/Math.min把滚动范围死死限制在 0 到内容底部之间边界控制干净利落。requestAnimationFrame 驱动 GPU 加速滚动 ⚡位移动画没有用 setInterval而是用requestAnimationFrame配合raf库做了 polyfill。每帧执行一次const style translateY(${scrollY}px) translateZ(0) child.style.transform style注意这里的translateZ(0)——它把元素提升到独立的 GPU 合成层位移不再触发重排重绘只做合成滚动自然丝滑。同时兼容了webkitTransform、mozTransform等旧前缀细节到位。移动端自动降级为原生滚动 src/helper/mobile.js用一行代码检测触摸设备export default () !!(ontouchstart in window)在移动端start()直接返回改用overflow-y: scroll原生滚动见src/style/transition.less里的.page.scroll既省性能又保留 iOS 的惯性滚动。桌面端自定义、移动端原生的双轨策略是兼容性设计的典范。阅读进度条滚动事件的高级玩法 顶部那条细窄的阅读进度条#bar就是这么来的scroller.onScroll回调把当前滚动位置除以总高度换算成百分比宽度实时更新到进度条上。滚动事件不仅能翻页还能做出进度反馈这个思路可以迁移到任何长文阅读场景。三、页面过渡动画600ms 的丝滑切换 从列表页点进文章页面不是生硬切换而是有一组优雅的滑入滑出动画。实现集中在src/switch/index.js和src/style/transition.less。双页面叠层两个固定定位的页面.page使用position: fixed铺满全屏列表页.home和文章页.single叠在一起通过z-index控制谁在上层。切换时新页面滑入、旧页面滑出形成推开的视觉效果。动画与 Promise 的时序配合 ⏱️看switchToPost()的写法$(.home).addClass(page-moveto) // 旧页向左滑出 $(.single).addClass(page-movefrom) // 新页从右侧滑入 await sleep(600) // 等动画播完 $(.single).addClass(page-current) // 再切换层级关键细节是动画执行期间两层都可见动画结束后才切换z-index。这中间的等待用src/switch/sleep.js的 Promise 封装实现配合async/await时序逻辑读起来像流水账一样清晰。CSS 侧用keyframes定义了movefrom从 -200px 滑入和moveto滑出到 -100%并加了both填充模式让动画首尾状态连贯。细节打磨缓存、标题与空态 动画之外Mirror 还有几个值得学习的细节数据缓存已加载的文章、列表、评论都存在mirror.issue/mirror.issues/mirror.comments内存对象里二次进入直接渲染配合src/observer/的观察者模式自动触发模板更新堪称手写版响应式。动态标题进入文章时先设document.title loading加载完再替换为文章标题 - 站点名反馈明确。路由兜底router.notFound把未知路由重定向回首页避免用户迷路。总结小项目的大学问 Mirror 的源码体量不大但把Hash 路由、虚拟滚动、页面过渡动画三大前端经典课题都给出了教科书式的答案路由监听hashchange 正则匹配 Base64 游标60 行搞定 SPA 路由。滚动滚轮事件 requestAnimationFrametranslateZ(0)GPU 合成性能拉满移动端优雅降级原生滚动。动画双页面叠层 Promise 时序控制 CSS keyframes切换行云流水。如果你想亲自跑起来研究克隆仓库https://gitcode.com/gh_mirrors/mirror9/Mirror后执行npm install npm start即可本地预览。对着本文的三个模块逐个打断点调试相信你对前端路由与动画的理解会上一个台阶。如果你还想看 Mirror 的 GraphQL API 封装或观察者模式源码解析欢迎留言告诉我【免费下载链接】MirrorA blogging tool powered by GitHub API. Write your blog on GitHub issue.项目地址: https://gitcode.com/gh_mirrors/mirror9/Mirror创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考