“切图仔”如何体现重构优点

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

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

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

在这样的情况下，还有什么地方能够体现出重构同窗的优点呢？

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

1、需求

重构前	重构后

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

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

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

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

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

2、设计

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

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

由于这三个图标对于大部分同窗来讲是有辨识度的，加上标题的字数有两个有四个，若是放出来感受不是很统一，因此采用了 hover 的时候才显示标题的方案。

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

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

3、编码

基础DOM

<a target="_blank" href="https://juejin.im/user/5acb247951882555712ca8ee" 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 结构。这样作有两点缘由：

1. 没有了视觉的干扰，能建立更符合语义化也更合理的 html 结构；
2. 为了管理 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 ？

总结

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

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

最后想说是不要由于本身是“切图仔”就彻底拒绝去考虑逻辑的东西，你所坚持的很容易就成为你的天花板。

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