0618

工作

• 前后端联调
• 对照测试点自测排查问题
• 坑：移动端使用 scrollTop 失效问题 必须要使用兼容性的写法

window.addEventListener('scroll', function() {
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    console.log(scrollTop);
})

任务

• vue 源码视频
• 算法题：有效的括号

反思

• 源码难啃：这几天看视频发现，越到后面核心的地方，越是难理解。看来需要自己多做笔记，梳理成自己的知识体系才能更深的理解源码的思想。
• 周年自省：在新公司工作一年了，总计 2 年工作经验，此时，自己的技能，知识点，简历，都应该更新了，回顾这一年自己的成长，比去年的自己进步了吗，掌握了新知识吗？是否能够去面大厂试一试？

明日计划

• 周末计划，vue 源码学习。

---

好文推荐

• 千万小心升级 React 17，刚踩了个大坑！ 工作中正在开发的项目就是 React 17，提前踩坑。

专题学习：骨架屏

骨架屏原理和实现：

• 如何实现骨架屏，说说你的思路
• 首页白屏的引发的思考(一) 作者解释了骨架屏的好处和实现原理，以及简单的代码实现
• 前端骨架屏方案小结
• page-skeleton-webpack-plugin 饿了么骨架屏方案
• 80行代码实现Vue骨架屏 骨架屏实现新思路，拦截 vue 的渲染流程，拿到 dom 后添加类名（设置样式）的方式实现骨架屏

小结：

• 思路一的原理：使用 puppteer 无头浏览器在服务端生成页面，隐藏图片文字等信息（使用 css 方式覆盖），提取变灰色的 HTML,CSS，返回即可。
• 思路二的原理：拦截 vue 的渲染流程，拿到 dom 后添加类名（设置样式）的方式实现骨架屏

TODOS

• Nestjs
• Docker，Nginx，DevOps 学习