0805

工作

• 1-保留空格换行等原格式问题：昨天想的方案是使用 split('\n'), str.replace(/\s/g, '&ngsp;') 方案，尝试后结果不行。网上搜索答案，发现有对应的解决方案
  • 设置样式 white-space: pre;
  • 使用 <pre>str</pre> 标签
• 2-代码结构优化问题：今天老前端亮哥帮我 review 代码，发现了自己的很多问题
  • 组件封装要独立，若某个方法只有自己用到，那么定义在自己的组件内部即可，不用从外面一层层传进来；不然情况就是，所有定义的组件都是受控组件，所有方法都在最外层的父组件上，瘦的太瘦，胖的太胖；同时不好 review 代码，传来传去，一个个文件跳来跳去；
  • 重复代码太多：编辑页和查看页内容基本是一致的，尽可能的复用组件（要求组件封装和开口优雅），避免重复代码导致某些 bug 修改时只修改了一半。
  • 组件在定义和使用的时候，最好的考察方式就是，最后使用该组件的时候，是不是只需要使用 <Component {...props} /> 即可？如果不是，说明封装还不够好，需要梳理逻辑看看那些逻辑可以放到组件内部，让它又独立又完整。
• 分页问题复杂度：通常分页需求，我们考虑的都是比较简单；实际上，它也可以很复杂：比如，同一个页面新开了 多个 tab，当前页页数 为 10，这页只有1条数据；但是在其他 tab 下删除了第 8,9 页数据，那么这个 tab 如果删除这个数据后查询，传参是 10 还是 9 呢？显然，传 10， 9， 8 都是不对的。

那么，难道每次查到结果时空就递归分页减 1 后再查，知道有数据为止吗？这样会导致发的请求太多了，响应时间太久。

一个比较好的方式就是，当发现响应结果数据为空时，直接回到第一页，这样就避免上述重复请求和空数据问题；因为即使第 1 页数据是空，那就让它空，不用在意。

好文推荐

• 面试官：请手动实现一个Sass-loader 简单版本 loader
• 多图详解，一次性搞懂Webpack Loader 深入版本 loader

面经

• 前端万字面经——基础篇

明日计划

• resize 事件添加防抖操作

TODOS

• react-dnd 使用总结