0624

工作

• 改 Bug 联调改了 1 天

• 样式问题1：容器内多个元素，其余都设置了宽度，最后一个没有宽度要求自适应剩余宽度：

  • 使用 Flex 的 flex-grow: 1 实现
  • 使用 calc(width - otherWidth) 进行计算
  • 使用 width: 100%; margin-left/right: npx 设置边距，元素宽度占满
  • 参考资料：容器内两部分，一部分固定宽度，一部分宽度自适应占满剩余位置 ，flexbox 剩余空间分配规则

• 样式问题2：字体图标如何垂直居中

  • 需要确定图标是否垂直居中：在 Iconfont 查看该图标，是否垂直居中了，若没有，则调整为垂直居中先；
  • 样式方面：这样可以保证字体图标和文字是垂直居中的。

  <Flex align="center" style="line-height: 20px;">
     <Iconfont name="close" style="vertercal-align: top; " />
     <span style="line-height: 20px;">文字描述</span>
  </Flex>

  • 其他方案：
    • 2021 年移动端的开发的几点经验
    • 一起搞懂 CSS 水平居中与垂直居中的16个方法
    • 你能实现多少种水平垂直居中的布局

• 经验：富文本配置的内容导致移动端样式异常，用户决定用户控制，前端不处理！

• 设计图和需求不一致：有高保真图的设计，前端严格按照高保真实现；若出现设计和需求不一致，和 UI 协商和 产品协商，让他们改成统一。

任务

• 笔记整理：这几天改bug以及写分享技术文章，有点忙
• 算法题：逆波兰表达式求值 中等难度

反思

• Bug 焦虑：第一次这种从 0 到 1 的开发，对需求实现不一致和自测不完全导致测试反馈很多bug，顿时心情还是很焦虑的。后面不忙了需要好好反省这次的问题。
• 忙碌和学习：很多东西自己看似会了，但是写代码的时候感觉自己就是个傻X一样，暴露出自己对于知识点的掌握不牢固。特别是 Flex 布局和属性的作用。
• 习以为常的场景是bug：过渡效果相关
  • 默认图和获取数据后的新图，这之间会有个时间差因此会先渲染 默认图，拿到新图后换成新图，有了个不好的过渡效果。更改方式：不在 dom 中使用 默认图路径，而是在接口请求数据时设置图。请求结束前，loading 和白屏背景。
  • 调到某个页面，发现没有权限，重定向到异常展示页。因此会先展示进入的页，再跳转到 异常页。测试也不接受这种过渡。那么就只能在渲染 return 做判断，有权限则渲染真实的 DOM，否则就是 return null
• 遇到问题怎么处理？
  • 自己先百度搜索：基本概念，基本的解决办法。
  • 询问他人：错误描述，原因和结果截图，以及对方可能问到你相关的资料 链接。例如：发现某个实现可能有问题，把场景截图发给同学A，询问后A问你，这么做的错误结果是什么？那你又回去执行代码拿结果的截图？因此还是需要 【准备充分】
  • 【准备充分】即：原因 + 过程 + 可能导致的结果 + 我搜索到的解决方式 和建议解决的方法 + 使用建议方法的效果 + 对比的差异
  • 不然，走一步问一步，感觉自己是个傻逼一样！

明日计划

• bug 修复和自我总结
• 有时间看看别人的代码怎么写的，为什么自己的代码问题这么多？多看看 开盘的移动端项目。

---

好文推荐

• 7个使 vue 开发如虎添翼的VS Code 扩展 其中 bookmarks 不错。
• Vue3 中的脚手架工具Vite到底牛在哪, 一文全知道
• 前端架构之 React 领域驱动设计 前端 DDD 设计？