62      汽車大全

不懂技術如何判斷一個頁麵的開發複雜度

做為一名苦逼前端碼農，寫給一起奮戰的產品經理們。

最近的聊天中產品經理說：“我不懂技術，所以當初也判斷不好這個頁麵在技術實現上有多複雜”。於是想起來有好幾次：

• 有好幾次，在產品經理眼裏很簡單的需求，可最後出來的技術方案非常複雜，開發工作量特別大，導致整個項目不得不重新評估。
• 有好幾次，朋友問我能不能給他做個小遊戲，很簡單的網頁小遊戲哦，像QQ農場那樣的。

有時候在想有沒有一種簡單的方法，讓不懂技術的人能判斷一個頁麵的前端複雜度，於是有了這篇文章。希望能讓前端碼農和產品經理能更好的互相理解，合作如絲般順滑。

下文總結三個基本原則，用這三個原則可以大致判斷一個頁麵前端複雜度。

注意：

1. 本文隻適用於輔助產品經理理解頁麵複雜度，不能代替前端工程師評估工作量，每個網站的業務模型、架構設計都不一樣，開發起來也大不相同。
2. 本文隻適用於理解前端開發複雜度，不包含服務端開發。

原則一 - 交互越多越複雜

先看如下兩個頁麵：

左邊的頁麵內容豐富、樣式多樣。內容包含頁頭、導航欄、tab標簽、文章列表，每篇文章又包含回答計數、作者、最新回答時間、標題、標簽，布局上有各種排列方式，還有各種色彩。

右邊的頁麵看起來隻有簡單的3個輸入框、2個勾選框、2個按鈕，頁麵內容整體看起來並不豐富。

左邊的頁麵看起來比右邊的頁麵複雜，但實際上開發起來右邊的頁麵複雜得多。左邊的頁麵可以稱之為“純展示型頁麵”，這類頁麵的顯著共同點是隻有數據的展示而不能與用戶發生交互。右邊的頁麵稱之為“富交互型頁麵”，常常包含以下交互元素：

• 輸入框、按鈕
• 單選、多選、下拉選擇
• 展開、收起
• Tab切換
• 分頁、滾動加載
• 彈窗

對純展示型頁麵來說，工程師隻需要處理好頁麵的樣式就好，不用考慮太多其他問題。另外，這個頁麵的文章列表部分，雖然內容很多，但實際上是相同結構的不斷重複，在工程師眼裏如下圖所示：

工程師隻需要把這個結構的模板寫好，再填入不同的數據。常見的純展示型頁麵可以有圖片、表格、文字，以及這些元素的各種混合排列。

對富交互型頁麵來說，工程師不僅要寫好頁麵樣式，更重要的是處理用戶的交互邏輯。交互邏輯比純展示邏輯複雜得多，比如輸入框獲取光標時如何響應、失去光標時如何響應、用戶輸入特殊字符如何處理、用戶鼠標點擊如何處理，還有些頁麵內容是需要根據用戶的操作從服務器端查詢實時數據展示出來的。其二，看起來差不多的兩個按鈕或者兩個輸入框，包含的邏輯卻完全不同，比如用戶名輸入框和手機號輸入框

• 用戶名：6-20字符、英文字母和數字、不能和其他用戶重名
• 手機號：11個字符、隻允許數字、一般以"1"開頭

盡管交互元素看起來樣子都差不多，但實際上每個元素背後的隱含邏輯都不一樣，開發成本也就大很多。一個頁麵中包含的交互元素越多，則頁麵開發越複雜。

原則二 - 組件化程度越高越簡單

每個網站都會有一些重複出現的元素，比如日期選擇、上傳圖片、彈窗、Toast提示等等，為了最大化的複用這些相同功能的代碼，提高開發效率，大多數開發團隊會建設一個組件庫，裏麵包含各種常用組件，業界比較著名的組件庫有 bootstrap 和 ant design。有了這些組件，工程師開發頁麵就像搭積木一樣簡單，把這些組件拚湊在一起，再加上適當的業務邏輯代碼，就可以開發出一個頁麵。

產品經理應該適當了解你們開發團隊的組件化現狀，如果基於這些組件設計頁麵，那對工程師來說會減少很多工作量。如果能從產品的角度對組件庫提出改進建議，既能讓工程師們從中受益，也能更好的支持產品開發，達到雙贏。相反，如果產品形態和交互行為始終處於變化之中，那工程師也很難沉澱出一套適用的組件庫，開發效率也大打折扣。

原則三 - IE瀏覽器

要求兼容 IE 8 及以下瀏覽器的頁麵，複雜度增加10000000000000000倍。

開發者的因素

由於主題是“頁麵複雜度”，應該是頁麵本身的屬性而與開發者無關，所以沒有列入三大原則之中。但如果回歸到現實需求中，開發者實在是無法繞開的一個關鍵因素。

1、 開發者綜合素質。除了技術實力之外，還有溝通能力、需求理解能力、責任心等，這些大家工作中已經有很多感觸，就不再贅述。

2、 開發者對業務的熟悉程度。這一點尤為重要，也是容易忽視的一點。有時候會出現這樣的情況，同樣的一個需求，小A隻需要1天搞定，小B則需要3、4天，很有可能是因為小A一直是這塊業務的開發者，而小B剛剛接手這塊業務。由於代碼本身的強邏輯性特征，哪怕同一個開發者去讀自己三個月前寫的代碼，即使是最簡單的一段幾百行的代碼，也很有可能不太記得其中的邏輯。對接手新業務的開發者來說，要讀懂前人的幾千行甚至是上萬行代碼絕對是非常艱巨的任務，會需要更多的時間和精力。

一個小故事

最後分享一個小故事，在上家公司合作過一位產品經理，有一次我們周末有事找他，他說他沒空，報了java培訓班，要上課去了。。。要上課去了。。。要上課去了。。。快要被搶了飯碗的感覺。

最後更新：2017-07-25 18:02:47

  上一篇：  老樹新花-Java異步服務開發

  下一篇：  7月25日雲棲精選夜讀：刷臉out了？阿裏“刷腳購物”亮相CVPR 2017