“切图仔”如何体现重构优势在现在这个 JS 大行其道的前端环境下，偏逻辑的前端在人数上是以压倒性优势超过偏重构前端的。

在现在这个 JS 大行其道的前端环境下，偏逻辑的前端在人数上是以压倒性优势超过偏重构前端的。

但是不知道大家有没有想过，总共资源就那么多，当我们偏向逻辑和后端的同学争抢资源的时候，我们偏向体验和重构部分的资源，其实也正在被有工程化思维的设计同学分摊着。

如果只关注需求完成度，一个逻辑同学写的原型代码，和一个重构同学写的原型代码，几乎看不出有太大的差别。一些可能会体现出重构同学优势的布局方案，逻辑同学只需要 google 一下，基本也是一搜一大把。

在这样的状况下，还有什么地方可以体现出重构同学的优势呢？

本文会落点在一次比较小的重构优化方案上，尝试粗略的回答这个问题。

一、需求

重构前	重构后

这个是一个内部使用的站点地图模块，核心诉求是想要一行展示这四个链接。左边是之前的视觉效果，右边是优化之后的效果。

布局：4行变4列，还要在一行放得下；
标题：会出现2个或者4个字的情况；
头像：前三个有，最后一个没有；
简介：长度不固定；

为啥会提需求这个点呢？是因为对于细节和临界状态的把控，是重构同学应该有的优势。

简单的说，逻辑同学能一眼就能看完和掌控到完整需求，而重构同学要能看到更多需求之外，但很重要的细节。

需求背景：为啥要做这个需求啊？这个需求的核心目的是为了解决什么问题啊？
布局：一行的个数后续会增加吗？增加是应该换行还是采用滚动条啊？；
标题：会有其它的字数的状况吗？；
头像：会有用图标作为头像的状况吗？；
简介：不固定会有最大值吗？；
兼容性：这个需要兼容到什么浏览器啊？需要兼容移动端吗？

二、设计

因为是内部项目，左边的设计已经是找设计同学优化过了。为了不进一步打扰设计的同学，这边就基于自己对需求和对设计同学设计稿的理解自己处理了。实现4行变4列的需求，我能想到比较简单的交互形式，就是类似网盘里列表变图标的方案。

布局：考虑到以后会拓展链接个数，这边选择采用超出不换行，横向滚动的方式。
标题：没有图标的直接显示标题，有头像的默认显示头像，hover的时候再显示标题；
图标：前三个用图片，最后一个用相同形状色块来代替；
简介：因为不重要，所以 hover 的时候显示就好；

因为这三个图标对于大部分同学来说是有辨识度的，加上标题的字数有两个有四个，如果放出来感觉不是很统一，所以采用了 hover 的时候才显示标题的方案。

这边我通过添加了一个边框，来增加有图片和没有图片的圈圈之间的联系。Hover 的时候文字放大的逻辑也能增加圈圈之间的一致性，还能让文字看得更清楚。

对于 UI 的理解度，和感知力也是重构同学必备技能。只有真正理解了设计的重构稿，才不会因为设计的一次小小的改动，而带来整体代码的修改。

三、编码

基础DOM

<a target="_blank" href="https://juejin.cn/user/4072246798980567" title="让前端更有价值">
    <img src="assets/img/avatar/juejin.png" width="56" height="56" alt="掘金">
    <strong>掘金</strong>
</a>
<a target="_blank" href="https://www.zhihu.com/org/yue-wen-ji-tuan-qian-duan-tuan-dui/activities" title="与世界分享你刚编的故事">
    <img src="assets/img/avatar/zhihu.png" width="56" height="56" alt="知乎">
    <strong>知乎主页</strong>
</a>
<a target="_blank" href="https://www.getrevue.co/profile/yux-fe" title="每周前端资讯">
    <img src="assets/img/avatar/zhoukan.png" width="56" height="56" alt="周刊">
    <strong>前端周刊</strong>
</a>
<a target="_blank" href="#" title="每次分享 都是成长">
    <strong>乐享</strong>
</a>

顺便推一波广告：掘金主页知乎主页前端周刊

在写重构代码的时候，我的习惯会脱离视觉，先基于内容创建合理的 DOM 结构。这样做有两点原因：

没有了视觉的干扰，能创建更符合语义化也更合理的 html 结构；
为了管理 css 加载失败的时候网页的样子；

a : title 属性不能少「鼠标移入能看到更多信息」;
a : 外站链接添加 target="_blank" 属性「新页面打开外站地址」;
img : width，height 属性不能少，并和你实际希望图片显示大小保持一致「防止页面抖动」;
img : alt 属性不能少「图片没有加载的时候告诉别人这是啥图片」;

以上几个点是特别容易被逻辑同学遗忘的点。因为不写好像也没有什么问题，但在我看来这就好比演员要背台词一样，是重构同学必要的基本素养。

另外对于图片处理工具「 PS， sketch，figma... 」的基础使用也是需要重构同学掌握的。简单的图形处理如果也要等着设计同学效率会大打折扣。

基础样式

基础样式比较简单，就是让图片 position：absolute; 在整个a标签中。

这样当图片资源加载失败的时候，后面的文字会露出，能做到优雅的降级。

但是当图片资源加载有问题的时候 alt 文案会显示出来。处理办法用font-size:0;或者color:transparent;。

这里提到的降级是为了说明渐进增强也是重构同学需要额外注意到的点。

注：照理来说，是不应该隐藏图片的alt信息的，只是因为这里的标题可以明确告诉用户这是什么，所以可以这样做。

对于强制不换行，我这边采用的 white-space: nowrap; 的方案。

.wrap{
    /* 去掉inline-block 元素之间的空隙 */
    font-size: 0;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.item{
    margin-left: 4px;
    margin-right: 4px;
}
.item strong{
    font-size: 12px;
    white-space: normal;
}

不定高文本垂直居中

`Flex`

.item{
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.item strong{
    max-width: 2em;
}

代码量少，容易理解，有兼容性要求。

`inline-block`

.item strong{
    line-height: 56px;
    /*解决 vertical-align: middle; 不完美垂直居中问题*/
    font-size: 0;
}

.item span{
    max-width: 2em;
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
}

兼容性不错，但是繁琐。

这两种方式对于垂直居中还是有不一样的理解的，示例图中可以看到区别。还有一种可以通过display:table;实现，需要再额外添加一层标签，就不在考虑范畴了。

前面有提到说，对于这种的布局代码，网上一搜一大把。那对于重构同学来说，经验和决策的速度就是优势。

通常来说对于编写这类布局技巧的页面数量，重构的同学应该是需要以压倒性优势超过其它前端同学的。这样才能对于向vertical-align: middle;并不是完美的垂直居中的细节和如何处理这种细节的方式作出快速的反应。

Hover，Active，Focus

对于这些临界状态是很容易被大家忽略的。重构的同学对于这一点要格外的留意。因为设计同学容易漏掉一些比如 hover, active, focus, loading... 等等的设计稿。这是我们重构同学应该帮设计同学考虑到，或者 push 设计同学考虑到的点。

对于动效来说，通常我们希望由更敏感的设计同学给到我们动效的曲线和具体参数。对于“切图仔”来说还需要额外考虑的是动效的性能和实现成本，甚至是动效传达情感的一致性。

比如同样是文字放大，你会选择修改 font-size 还是会选择是用 transform ？

总结

本文因为落点很小，所以只能简短的列举一些点。也没有说重构和逻辑谁好谁坏，毕竟每个同学的时间有限，关注点也有倾向。

列举的这些点是建议考虑但不是一定说要定死就一定要这样做。毕竟还是要以项目进度和开发成本为主。

最后想说是不要因为自己是“切图仔”就完全拒绝去考虑逻辑的东西，你所坚持的很容易就成为你的天花板。

不要放弃热爱，但也不要拒绝新的挑战。