2021-04-18周日
虚拟列表与 Scroll Restoration

虚拟列表是为了提高页面性能而出现的。我们知道,一个页面上的 DOM 树越复杂,节点越多性能越低,每次重排(reflow)的成本越高。于是,虚拟列表出现了。虚拟列表的原理是只渲染可视部分以及部分预渲染的节点,待滚动之后替换可视部分节点。余下的空间则用 padding-top padding-bottom 撑开。 !渲染 50 个 Node,实际只渲染了可见部分的 Node 本篇文章不讨论如何实现一个虚拟列表,此类文章网上有很多。但是有关于回退页面无法回到虚拟列表上一次的位置的文章却很少。默认情..

2021-03-27周六
⚠️ Vue 3 TSX

本篇基于 Vue 3.0.7, vite 2.1.2 编写,由于 Vue 与 vite 改动较大,以最新版本为准,本文仅供参考。 写本篇文章主要是为了记录在正式使用 Vue 3 + vite 2 投入开发中遇到的一些问题,不适合没有任何 Vue 开发经验的同学阅读。本文中将会运用到 Vue 3 的 Composition api,vue-router@next。 首先,我的项目是基于 vite 2 架基的,同时使用了 PostCSS + Tailwind 2 CSS。UI Framework..

2021-02-07周日
在 UIKit 中使用 Swift UI

本文基于 Xcode 12.3 Swfit 5.3.2 iOS 14.3 macOS 11.2 构建 无意间发现好像不止可以在 Swift UI 中用上 UIKit,反过来亦然。 首先打开 Xcode 新建一个 Cocoa Touch 项目,interface 选择 Storyboard。 随后,新建一个 Swift UI File,命名为 ContentView.swift。文件会自动生成一个 ContentView 的 Swift UI View。 接下来需要把 Swift UI V..

2021-01-18周一
[reprint] Your Own Time Zone

New York is three hours ahead of California, But that doesn’t make California slow. Someone graduated at the age of 22, But waited five years before securing a good job. Some became a CEO at 25, And died at 50. While another became a CEO at 50,..

2020-12-28周一
从零开始的 Swift UI (三)

接上文:从零开始的 Swift UI (二) 上篇文章介绍了如何使用 UserDefaults 和 ObserveableObject 来进行数据管理。 这篇文章来完成 LikeView 的布局和功能实现。 Layout 在 LikeView 中编写如下代码。 struct LikeView: View { @EnvironmentObject var like: Like var likes: [LikeModel] { like.likes } var ..

2020-12-28周一
从零开始的 Swift UI (二)

接上文:从零开始的 Swift UI (一) 在上一篇文章中,我们完成了 HomeView 的基本布局。接下来我们来编写一下数据层(Model ViewModel)。 大概包括两个方面:数据的获取(JSON URLSession) 和 UI ViewModel 的数据同步。 数据的获取 首先我们使用的 Api 是 Hikotoko。随机获取一条 Hikotoko 的 JSON 如下。 { "id": 5716, "uuid": "71396790-6d06-49dd-bc72-2568..

2020-12-28周一
从零开始的 Swift UI (一)

注: 本文编写时,使用 Xcode 12.3、Swift 5.3.2 来构建 App 入门 Swift UI 已经有一段时间了,但是却一直没有写过什么练手项目,虽然之前跟着 Hackingwithswift 上找着写过几个 Demo。突然打算自己独立写一个练手项目,因为是练手项目,所以布局和功能上也很简单,App 的类型大概和 TODO 类似。 准备 打开 Xcode 新建一个项目在此不再展开。在左侧文件树中打开 ContentView.swift,这是 View 的入口文件。你可以看到如..

2020-12-13周日
年终更新小记

记录 9月 至 12月 此网站的更新内容。 前端 增加了日记音乐自动播放 利用 Socket 实时更新文章的最新内容 利用 Socket 实时更新当前文章的评论 其他优化 后端 增加了 GraphQL 的支持 其他 Bug 修复..

2020-09-25周五
Vue 3 正式发布,再度踩坑

Vue 3 终于在 2020.9.18 发布了第一个正式版「One Piece」,到现在已经一周了。终于有时间来体验一把正式版的 Vue 3 是什么样子了。 准备 初始化项目 这次,我不再使用 vite 来建立项目,而使用 vue-cli。 vue create vue3-blog cd vue3-blog vue add typescript yarn add vue-router@next yarn add vuex@next yarn serve 注意在选择 vue 版本的时候选..

2020-09-10周四
每天一个劝退小技巧之位操作

为什么要使用位操作,因为位操作是直接操作二进制数,是所有语言中执行效率最高的运算。 以下代码以 JS 为例,部分代码在所有支持位操作的语言通用。 快速取整: parseInt(2.2) === 2.2 // true parseInt('1.3') === '1.3' // true 1 a ^ c ^ b 任何数于0异或为任何数 0 ^ n => n 相同的数异或为0: n ^ n => 0 let res = 0 arr.forEach(i => res ^= i) // retur..