Vue 响应式原理剖析 —— 数据更新常见问题

分类: , 标签:‚ ‚  评论:2 2 评论

在 Vue 开发的过程中,多少都会遇到数据更新后,页面没有更新渲染这类问题。而在上两篇文章中,从「实例化」、「渲染」、「数据更新」三条线完整地讲述了 Vue「响应式」的工作原理,本文正是基于这些原理去解决一些常见的数据更新相关问题。...

Read More –>

Vue 响应式原理剖析 —— 从实例化、渲染到数据更新(下)

分类: , 标签:‚ ‚ ‚ ‚  评论:2 2 评论

在上一篇文章中,梳理了 Vue 实例化和渲染的基本逻辑,并且介绍了订阅者模式这种设计模式,Vue 的「响应式」实现本质上也是一个订阅者模式,但是由于 Vue 需要考虑更加复杂的情况,并且需要在其中作出大量优化操作,因此具体实现也会复杂很多。下面通过更详细地说明 Vue「响应式」的实现,同时发掘在 Vue 中订阅者三要素分别是什么。...

Read More –>

Vue 响应式原理剖析 —— 从实例化、渲染到数据更新(上)

分类: , 标签:‚ ‚  评论:1 1 评论

在系统地梳理「响应式」工作原理的过程中,也参考了不少现有的文章,大部分都是围绕“依赖收集”、“派发更新”或者“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 从了解到落地——页面流量统计与分析最佳实践

分类: , 标签:‚ ‚ ‚  评论:9 9 评论

背景 在开发面向内部使用的「内容管理平台」的过程中,我们不时会收到一些页面问题的反馈,但在本地调试的过程中,有大量无法在本地重现的问题,这些问题的出现跟用户的访问设备、网络环境、访问路径可能存在关联。为了方便快捷地去定位这些问题,我们试图为所有页面点击操作都加上打点记录,但在实际操作中,由于业务变更频繁,开发框架的限制,展示打点数据较为复杂等因素,通过打点排查问题的实际效果并不理想,因此我们希望引入完整的流量...

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 –>

SassDoc 详细介绍与最佳实践

分类: , 标签:‚ ‚ ‚ 

SassDoc 是一款专门为 Sass 代码生成注释的工具,通过 SassDoc,开发者可以通过类似 JSDoc 的方式在 Sass 代码上添加注释,然后直接用命令生成文档。最近在处理团队框架 QMUI Web 时,遇到了需要为大量 Sass 方法写文档的问题,因此研究了这个工具,本文将会详细说明 SassDoc 的使用方法以及其中的最佳实践。 基本使用 在 Sass 中,可以使用多行注释 /* xxx...

Read More –>