年前的最后一个需求，在小程序的列表前添加一个swiper，点击对应的banner 展示对应的详情。管理后台增加相应的模块。原型图不方便放，用Axrue画个简单的示意图。

初版

点击添加banner按钮 增加一个红框。点击保存上传全部。

总体来说很简单的一个需求，而且pc端第一版的时候我看过，很简洁，全部组件化，代码量很少。然而经过小半年的迭代基本看不到组件化的哪个味道了，所有涉及到组件的地方、例如选品这类常见的dialog，需要用到的几乎是全部复制了一遍组件，做成了单页面。页面传值各种各样。保留下来完整的可能就只有一个上传组件了。第一版是阿里P7大佬做的，差距真的太大了。

暴漏出来的问题

1、维护成本

2、代码质量

3、使用体验

我在做这个功能的时候明白了之前运营吐槽为什么我们这个管理后台这么反人类，负责人直言跟个Ⅹ一样。

做这个需求的时候深刻体会到了代码质量造成的维护成本直线上升这个一个感受，命名，方法，布局，组件。全靠猜。

使用体验，做完以后自己在测试的时候发现用户体验极度狗屎，如上图，点击banner添加模块，当我添加到两个banner的时候，第二个banner有一半已经在下一屏了，如果三个四个那体验真的不用多说，仅靠一个分割线区分模块真的。。。而且每个模块详情还要做个选品

我找产品将这问题的时候产品讲之前的几个模块都是这么做的，巴拉巴拉。。

二版

不想跟产品说太多，我简单跟他讲改成这样。产品表示同意。第二版最初详情页按钮也叫保存，这样会让使用者产生误解，不清楚内页的保存和外页的是什么关系。经过好几波讨论，产品不同意，但是最后他相同了找到我觉得完成比保存好。

接下来就是找后台配合改接口。我希望是每编辑几个banner就保存一个，后台表示不知道序列号，我说我会传给你的，参数一样。可能后台觉得麻烦，改起来麻烦，最后决定不动接口。同之前一样先保存在本地，最后一次性上传。

优化

一切准备完毕，准备发版本的时候发现一个问题，所有的报错信息都是系统错误。。。这就有点奇怪了。我编辑了三个banner，提交的时候告诉我系统错误，使用者需要再去挨个查看。。。离谱。让我自己用我提不出来一点兴趣，怪不得运营骂。。

优化为详情页点击保存的时候提醒，明确提示缺少的内容，必填项、二选一。前端在保存的时候先做检测。在提交的时候在遍历一次。确保数据完整。

总结

接这个需求前正好去蹭了一个前端大佬的饭局，听大佬们讲项目，讲技术，谈需求。之前只是听说现在是大前端，已经不是切图仔的时代了。这次我才真的体会到前端真的有得讲，能把前端做精通真的厉害，在团队中前端的地位已经可以持平后端了，给我的触动还是挺大的。假设你是个项目负责人，你改怎么做？滴水穿石，学不完学不完。。方方面面