定期上来维护博客的基础服务，发现带评论的文章页面打开速度变得很慢，排查后发现是之前使用的 Gravatar 国内源已经失效了。博客的 Gravatar 头像使用腾讯云的 CDN 服务，回源到常用的国内源并设定30天缓存有效期，因此有效期过了之后便会失效，有同样情况的可以改用新的国内源： Cravatar: c...
Kayo's Melody
前端工程师，现就职于微信
Vue 响应式原理剖析 —— 数据更新常见问题
在 Vue 开发的过程中，多少都会遇到数据更新后，页面没有更新渲染这类问题。而在上两篇文章中，从「实例化」、「渲染」、「数据更新」三条线完整地讲述了 Vue「响应式」的工作原理，本文正是基于这些原理去解决一些常见的数据更新相关问题。...
Read More –>Vue 响应式原理剖析 —— 从实例化、渲染到数据更新（下）
在上一篇文章中，梳理了 Vue 实例化和渲染的基本逻辑，并且介绍了订阅者模式这种设计模式，Vue 的「响应式」实现本质上也是一个订阅者模式，但是由于 Vue 需要考虑更加复杂的情况，并且需要在其中作出大量优化操作，因此具体实现也会复杂很多。下面通过更详细地说明 Vue「响应式」的实现，同时发掘在 Vue 中订阅者三要素分别是什么。...
Read More –>Vue 响应式原理剖析 —— 从实例化、渲染到数据更新（上）
在系统地梳理「响应式」工作原理的过程中，也参考了不少现有的文章，大部分都是围绕“依赖收集”、“派发更新”或者“Watcher”，“Dep”这些响应式相关的概念逻辑展开讲述，当然这些概念和逻辑是必不可少的要展开讲述的内容，但是如果单纯围绕这些内容展开来编写一篇文章，对于理解「响应式」在整个 Vue 中的工作过程可能会感到困惑。因此，本文会换一个角度，从 Vue 使用的过程展开说明「响应式」的工作原理，即从「实例化」、「渲染」、「数据更新」三条线讲述「响应式」的工作过程。...
Read More –>从 Sass Breaking Change: Slash as Division 说起
在修改项目时，发现了 Sass 的告警——由除号引起的告警。告警的内容很简单，用 / 作为除法已经在 Dart Sass 2.0.0 中被弃用了，作为一个 Sass 的基础语法，这次弃用属于 breaking change 了，因此目前编译时只是会抛出 warning 而不是 error，否则大量项目都无法正常运行。研究了一下可以看到，Sass 官方特定用了一整个篇幅的文章，来阐述为何要作出这个修改...
Read More –>Matomo 从了解到落地——页面流量统计与分析最佳实践
背景 在开发面向内部使用的「内容管理平台」的过程中，我们不时会收到一些页面问题的反馈，但在本地调试的过程中，有大量无法在本地重现的问题，这些问题的出现跟用户的访问设备、网络环境、访问路径可能存在关联。为了方便快捷地去定位这些问题，我们试图为所有页面点击操作都加上打点记录，但在实际操作中，由于业务变更频繁，开发框架的限制，展示打点数据较为复杂等因素，通过打点排查问题的实际效果并不理想，因此我们希望引入完整的流量...
Read More –>探索巴伐利亚——中世纪世界的记录
去年夏天这个时候，广州又是每年的雨季，经过14个小时的颠簸飞往了法兰克福，然后就根据之前设计的环线路程，自驾从法兰克福开始，一路探索了巴伐利亚地区，从南部再去到奥地利，再从奥利地中部回到法兰克福。 对于巴伐利亚的印象，基本停留在《世界通史》里介绍的模样——遍地的石板路，沧桑但坚实，多年的磨砺使得路面高低不平，城市里遍布城堡，同样古老但仍旧不倒。 来都来了，对于中世纪历史感兴趣的我，自然要把看到的记录下来...
Read More –>Web 可访问性与无障碍最佳实践
Web 无障碍开发知识 对于 Web 开发者来说，可以通过调整 HTML 的结构和标签，增加 HTML 属性，配合 CSS 和 JavaScript 等手段来提高页面的可访问性和无障碍性。例如使用了 a 标签制作了按钮，如果不进行额外的优化，读屏软件在朗读时会读作"文字内容 链接"，但实际上该 a 标签是用作按钮使用，因此可以在标签上添加 role="button" 属性。此时，读屏软件会读作"文字内容 按钮...
Read More –>Android Lint 实践之二 —— 自定义 Lint
背景 如前文《Android Lint 实践 —— 简介及常见问题分析》所述，为保证代码质量，团队在开发过程中引入了 代码扫描工具 Android Lint，通过对代码进行静态分析，帮助发现代码质量问题和提出改进建议。Android Lint 针对 Android 项目和 Java 语法已经封装好大量的 Lint 规则（issue），但在实际使用中，每个团队因不同的编码规范和功能侧重，可能仍需一些额外的规则，...
Read More –>Android Lint 实践 —— 简介及常见问题分析
概况 QMUI Android 刚更新了 1.0.4 版本，其中主要的特性是引入了 Android Lint，对项目代码进行优化。Android Lint 是 SDK Tools 16（ADT 16）开始引入的一个代码扫描工具，通过对代码进行静态分析，可以帮助开发者发现代码质量问题和提出一些改进建议。除了检查 Android 项目源码中潜在的错误，对于代码的正确性、安全性、性能、易用性、便利性和国际化方面也会...
Read More –>Web UI 解决方案 QMUI Web —— 探索与沉淀
QMUI Web 是一个 Web UI 的解决方案，从零开始，由编码规范，到组件和工具方法的制作，再到工作流的整合，不断在迭代，也不断在优化，走过了不少的路。趁着发布的机会，我们正好回顾这一路的探索过程，分享其中的点滴，也希望能借此让大家更了解 QMUI Web。...
Read More –>Gulp 结构化最佳实践
在 Gulp 的官方文档中，Gulp 的任务都是写在 gulpfile.js 这一个文件中的，如果任务数量不多，这并不会有什么问题，但当任务数量较多时，会造成代码可读性差，难以维护，多人协作时还会容易造成冲突。因此，更好的处理方式是把 Gulp 的代码结构化。 开始结构化 https://github.com/QMUI/qmui_web 这是一个前端框架，主要由一个 SASS 方法合集与内置的工作...
Read More –>