不懂技术如何判断一个页面的开发复杂度

本文在知乎专栏首发

作为一名苦逼前端码农，写给一块儿奋战的产品经理们。

最近的聊天中产品经理说：“我不懂技术，因此当初也判断很差这个页面在技术实现上有多复杂”。因而想起来有好几回：

• 有好几回，在产品经理眼里很简单的需求，可最后出来的技术方案很是复杂，开发工做量特别大，致使整个项目不得不从新评估。

• 有好几回，朋友问我能不能给他作个小游戏，很简单的网页小游戏哦，像QQ农场那样的。

有时候在想有没有一种简单的方法，让不懂技术的人能判断一个页面的前端复杂度，因而有了这篇文章。但愿能让前端码农和产品经理能更好的互相理解，合做如丝般顺滑。

下文总结三个基本原则，用这三个原则能够大体判断一个页面前端复杂度。

注意：

1. 本文只适用于辅助产品经理理解页面复杂度，不能代替前端工程师评估工做量，每一个网站的业务模型、架构设计都不同，开发起来也大不相同。

2. 本文只适用于理解前端开发复杂度，不包含服务端开发。

原则一 - 交互越多越复杂

先看以下两个页面：

左边的页面内容丰富、样式多样。内容包含页头、导航栏、tab标签、文章列表，每篇文章又包含回答计数、做者、最新回答时间、标题、标签，布局上有各类排列方式，还有各类色彩。

右边的页面看起来只有简单的3个输入框、2个勾选框、2个按钮，页面内容总体看起来并不丰富。

左边的页面看起来比右边的页面复杂，但实际上开发起来右边的页面复杂得多。左边的页面能够称之为“纯展现型页面”，这类页面的显著共同点是只有数据的展现而不能与用户发生交互。右边的页面称之为“富交互型页面”，经常包含如下交互元素：

• 输入框、按钮

• 单选、多选、下拉选择

• 展开、收起

• Tab切换

• 分页、滚动加载

• 弹窗

对纯展现型页面来讲，工程师只须要处理好页面的样式就好，不用考虑太多其余问题。另外，这个页面的文章列表部分，虽然内容不少，但其实是相同结构的不断重复，在工程师眼里以下图所示：

工程师只须要把这个结构的模板写好，再填入不一样的数据。常见的纯展现型页面能够有图片、表格、文字，以及这些元素的各类混合排列。

对富交互型页面来讲，工程师不只要写好页面样式，更重要的是处理用户的交互逻辑。交互逻辑比纯展现逻辑复杂得多，好比输入框获取光标时如何响应、失去光标时如何响应、用户输入特殊字符如何处理、用户鼠标点击如何处理，还有些页面内容是须要根据用户的操做从服务器端查询实时数据展现出来的。其二，看起来差很少的两个按钮或者两个输入框，包含的逻辑却彻底不一样，好比用户名输入框和手机号输入框

• 用户名：6-20字符、英文字母和数字、不能和其余用户重名

• 手机号：11个字符、只容许数字、通常以"1"开头

尽管交互元素看起来样子都差很少，但实际上每一个元素背后的隐含逻辑都不同，开发成本也就大不少。一个页面中包含的交互元素越多，则页面开发越复杂。

原则二 - 组件化程度越高越简单

每一个网站都会有一些重复出现的元素，好比日期选择、上传图片、弹窗、Toast提示等等，为了最大化的复用这些相同功能的代码，提升开发效率，大多数开发团队会建设一个组件库，里面包含各类经常使用组件，业界比较著名的组件库有 bootstrap 和 ant design。有了这些组件，工程师开发页面就像搭积木同样简单，把这些组件拼凑在一块儿，再加上适当的业务逻辑代码，就能够开发出一个页面。

产品经理应该适当了解大家开发团队的组件化现状，若是基于这些组件设计页面，那对工程师来讲会减小不少工做量。若是能从产品的角度对组件库提出改进建议，既能让工程师们从中受益，也能更好的支持产品开发，达到共赢。相反，若是产品形态和交互行为始终处于变化之中，那工程师也很难沉淀出一套适用的组件库，开发效率也大打折扣。

原则三 - IE浏览器

要求兼容 IE 8 及如下浏览器的页面，复杂度增长10000000000000000倍。

开发者的因素

因为主题是“页面复杂度”，应该是页面自己的属性而与开发者无关，因此没有列入三大原则之中。但若是回归到现实需求中，开发者实在是没法绕开的一个关键因素。

一、 开发者综合素质。除了技术实力以外，还有沟通能力、需求理解能力、责任心等，这些你们工做中已经有不少感触，就再也不赘述。

二、 开发者对业务的熟悉程度。这一点尤其重要，也是容易忽视的一点。有时候会出现这样的状况，一样的一个需求，小A只须要1天搞定，小B则须要三、4天，颇有多是由于小A一直是这块业务的开发者，而小B刚刚接手这块业务。因为代码自己的强逻辑性特征，哪怕同一个开发者去读本身三个月前写的代码，即便是最简单的一段几百行的代码，也颇有可能不太记得其中的逻辑。对接手新业务的开发者来讲，要读懂前人的几千行甚至是上万行代码绝对是很是艰巨的任务，会须要更多的时间和精力。

一个小故事

最后分享一个小故事，在上家公司合做过一位产品经理，有一次咱们周末有事找他，他说他没空，报了java培训班，要上课去了。。。要上课去了。。。要上课去了。。。快要被抢了饭碗的感受。