1202 今日总结

工作

• 调研页面截图对比工具的实现方案，初级版本主要分为几个点：
  • 利用自动化测试工具，自动跑页面路由；
  • 利用 puppeteer 工具，对每个页面进行截图（第一次截图作为参照图）
  • 而后每次迭代，都跑一遍 页面截图工具，输出 迭代的页面图
  • 使用 图片的对比库，对 初始图和每次 迭代的图进行比较，输出差异图
• 进阶版本：
  • 实现组件级别的页面截图
  • 实现后台可配置化的方式，存档到数据库，分析每次迭代的 视图 差异，方便测试找 bug 和 UI 验收。

相关文章：

• Puppeteer 用来做爬虫太 Low 了！但用在这里很合适！
• puppeteer截图

• 图片对比工具库 对比不同图片生成差异图，在线体验

对于之前同事开发的 eruda ui 验收走查工具，调研了一下是否可以像 redux-devtool 一样，添加到 Chrome 的 控制台，作为一个 调试的 tab 使用。

为此，调研了一下 Chrome 是否开放了对应的 API，以及具体如何实现，发现是可以的。

• 如何开发 chrome 的 dev-tools，自定义 tab ，如 https://github.com/reduxjs/redux-devtools
• https://www.wangshenwei.com/writing-a-chrome-devtools-extension/
• https://developer.chrome.com/docs/extensions/mv3/devtools/

心情

所见所想，有感而发

今天是 20211202，对称日，同时，也到了 12 月，进入一年的尾声了，看看别人的 年终总结，思考自己的年终总结吧

• 我的而立之年的那些事—— 2021年终总结
• 掘金年度征文 | 2021年终总结征文大赛

这两天又没有刷算法，还有 100 天左右时间了，需要紧迫起来！！！

手撕代码

防抖节流等各种手写，http和网络，浏览器原理，性能优化，Webpack

贴一个昨天做的 一维数组转树形结构：

const source = [
  { id: 1, parentId: null },
  { id: 2, parentId: 1 },
  { id: 3, parentId: 1 },
  { id: 4, parentId: 2 },
  { id: 5, parentId: 2 },
  { id: 6, parentId: 3 },
]

// 目标是将 source 转换成下面的结构

// {
//   id: 1, 
//   children: [
//       {
//           id: 2,
//           children: [
//               { id: 4, children: [] },
//               { id: 5, children: [] }
//           ]
//       },
//       {
//           id: 3,
//           children: [
//               { id: 6, children: [] }
//           ]
//       }
//   ]
//   }

const rootObj = {
  id: source.find(s => s.parentId == null).id,
  children: []
}
const map = new Map();
source.filter(s => s.parentId !== null).forEach(item => {
  const subItem = { id: item.id, children: [] };
  if (map.has(item.parentId)) {
    const obj = map.get(item.parentId);
    obj.children.push(subItem)
    map.set(item.parentId, obj)
  } else {
    map.set(item.id, subItem)
  }
})

rootObj.children = [...map.values()]

console.log(JSON.stringify(rootObj))

项目/博客推荐

值得学习的项目/作者

• 文章发布者 是一款开源的一文多发平台，可以帮助文章作者将编写好的文章自动发布到掘金、SegmentFault、CSDN、知乎、开源中国等技术媒体平台，传播优质知识，获取最大的曝光度。

面经相关

八股文相关

• 时隔一年半，我，一个卑微的前端菜鸡，又来写面经了