如何成为一个优秀的复制粘贴工程师

组件复用的困境

在平时的搬砖过程中，当我们拿到新需求的设计稿时，为了加快开发的速度，通常会看看是否有曾经写过的组件可以复用。如果能找到类似的组件，有很大概率可以在原有的基础上修修补补就能直接用了。

对于自己最常开发的工程，当看到设计稿往往可以立马想起来，某个可以复用的组件位于工程的哪个位置。但是随着工程的壮大，从 10+个路由配置，增长到 100+甚至 200+的时候，就有些力不从心了。

另外一个问题是，团队中其他同学很可能已经开发过和设计稿的非常相像的组件，但由于你不熟悉别人的工程，无法快速地找到哪个组件是可以拿来使用的。即使知道是哪个组件，这个组件可能会有一堆工具代码的依赖，想要完整地将组件搬到目标工程中，需要将组件依赖的文 件一并复制。有可能同事还在忙着上线，没法及时给你回应，这样一来沟通成本就高了。

转转是一个二手电商平台，如果仔细观察每条业务线的页面 UI，可以发现它们大部分遵循统一的 UI 风格。实际上很多电商平台都有类似的UI结构。下图是转转三条业务线的首页，仔细观察就可以发现，它们有非常多相似的地方：顶部的搜索框、金刚位、轮播图、运营卡片、商品卡片。虽然它们非常相似，却在一些细节上有微小的差异，并且这些页面由不同的前端同学负责，就导致了相似的功能被不同的成员多次重复实现。

那么是否可以就这个问题添加一些自动化的流程，来提升代码的复用率，增强搬砖的幸福感呢？

方案设计

首先明确目的：在新需求出现后，让前端同学知道是否存在已有的相似组件，并迅速得到相应的代码文件。

那么问题就转化为，如何将设计稿与已有组件进行对比，找出相似的组件。想要比较，就必须有量化的标准。转转内部的设计师主要使用 sketch 作为设计工具，而 sketch 内部使用 json 格式存储数据。如果将 .sketch 文件后缀改为 .zip，然后使用压缩工具解压，就会发现里面实际上存储了大量的 json 格式数据，描述了节点之间的嵌套关系以及节点的样式。那么就可以采取某种算法，根据 sketch 文件中的数据，产出一份可以用于比较的量化标准，这样就完成了设计稿的处理。

那么该如何处理各个工程中已存在的组件呢？事实上对于这些组件，只要拿到它们实际渲染出来的 dom 结构，就可以根据 dom 结构来提取出一份特征数据。有了设计稿和已有组件的数据，后续只要比较这两份数据，计算出相似度，就可以快速找到前端开发需要的组件代码了。对于上面的说明，可以类比哈希算法来帮助理解。JS 中常使用对象，以 key-value 的形式来存储数据。哈希算法会根据一个 key 值，产生一个唯一的结果，并根据这个结果将数据存储对应的地址上。这个根据 key 产生结果的过程，就类似于上文根据设计稿的节点/dom 结构，产出可用于比较的特征数据。

假设已经根据一份设计稿，找到了 5 个相似组件后，怎么让前端同学知道这些组件中，哪一个组件是 ta 最需要的那个呢？如果让 ta 看一遍每个组件的代码再决定，那效率就太慢了。所以需要对每个组件进行截图，当看到 5 个组件的截图，哪个与设计稿长得最像，基本上就是 ta 需要的组件了。

总结一下方案，就是「根据设计稿和已有组件的 dom，产出一份用于比较的数据，初步筛选出几个相似组件，然后让业务开发根据截图与代码，在初筛组件中挑选合适的组件，导入到自己的工程。」

架构设计

整体涉及到四个部分：

• 浏览器运行时  分析组件 dom 特征、截图，将结果传递给 Vite 插件。

• Vite 插件

  • 提取组件的所有依赖，发布为 npm 包。

  • 整合 dom 特征和截图，上传数据到服务端。