Mofe's Blog

Make "Colorful Motivation" Great Again (一个刚出炉的 Chrome 插件)

2018-05-17

我又来推荐新写的东西啦

上次写了个获取当前 ip 的程序,太简单了,这次稍微复杂点

重构了一个叫 Colorful Motivation 的东西

web 版 Colorful Motivation (m.mofe.io)

已经发布到了 Chrome Web Store

Make Colorful Motivation Great Again New Tab

简介

这个程序做的事情很简单

先预设一个生日

每次打开 Chrome 新 Tab 时就会看到以分数的形式展示的年龄

1

时间输入页

注意有段数字用下划线标注出来了,这段6位数是背景颜色的色值,图上的色值即”#757794”

优化项

相比 原 Colorful Motivation New Tab 有如下优化

  1. 用 react 重写了页面(使用 shouldComponentUpdate 隔离了组件状态的更新)
  2. 将 setInterval 改为 requestAnimationFrame, 使数字流动更流畅
  3. 删除了左下角和右下角的按钮, 日期输入方式改为点击数字弹出选框
  4. 修改了计算日期的方式,使日期计算更精确

重构后的代码:https://github.com/mofelee/make-colorful-motivation-great-again-new-tab/blob/master/src/App.js

原始代码:https://github.com/joshspicer/colorful-motivation/blob/master/logic.js

不想在博客 Code Review 。所以这篇文章太监了,如果有感兴趣的可以再开文章。。

PS. 我觉得没有什么能比这静静流动的数字更能激发斗志


Mofe Lee

矮油,今天天气不错