剛?cè)腴T產(chǎn)品，和開發(fā)溝通的時候總是被懷疑智商？沒事，本文和你分享一下那些溝（si）通（bi）經(jīng)歷，并告訴你產(chǎn)品經(jīng)理必須知道的基礎(chǔ)技術(shù)知識！

一入產(chǎn)品深似海。身為產(chǎn)品汪，我想說產(chǎn)品汪和程序猿是兩個物種，一個來自金星，一個來自火星，腦結(jié)構(gòu)、腦回路截然不同，關(guān)鍵是他們還健忘！

雖說“人人都是產(chǎn)品經(jīng)理”，但也造成產(chǎn)品成為整個行業(yè)“鄙視鏈”的末端。

C開發(fā)看不起做C++開發(fā)，C++開發(fā)看不起Java開發(fā)，Java開發(fā)看不起C#開發(fā)，C#開發(fā)看不起做前端開發(fā)。但他們確都有個共同點(diǎn)，就是一致覺得產(chǎn)品是超低智商生物。

溝通不易，但不得不溝通！

聽不懂的時候怎么辦，如果只是干等，那等同挖坑埋自己。和開發(fā)溝通之前一定要做足功課，否則分分鐘被噴！十幾個開發(fā)一起噴你，那就是群毆。

希望這篇文章能給剛?cè)腴T的產(chǎn)品補(bǔ)點(diǎn)技術(shù)能量，關(guān)愛程序猿。

曾經(jīng)你以為，產(chǎn)品的日常黑話是：

我不管，反正你要實(shí)現(xiàn)！

做這么點(diǎn)東西要那么久嗎，分分鐘就能搞定吧！

要不你先做一版，先看看效果再說，不行再改。

我的需求很簡單，很簡單的，照著這個做就行了，一模一樣就好！

現(xiàn)實(shí)卻是：

好的，我今晚加班，晚上把原型和RFP郵件發(fā)給你們。

別慌，我去跟領(lǐng)導(dǎo)申請下增加開發(fā)資源！

穩(wěn)住，你們先榮耀一把吧，晚上一起加班呀。

如果你還行走在互聯(lián)網(wǎng)圈子里，基礎(chǔ)技術(shù)知識是產(chǎn)品必須要了解的。

我日常游走在一群前后端狂魔中，被灌輸很多毒藥，但也只能自行一一消化，現(xiàn)在一一吐露。

一、少不了的接口

說到接口，它“無處不在”，當(dāng)打開APP的時候，你會看到一個菊花轉(zhuǎn)啊轉(zhuǎn)啊轉(zhuǎn)呀，然后加載出來的那些文字、圖表、炫酷的動畫就是前端ajax通過接口提交數(shù)據(jù)從后端請求回來的數(shù)據(jù)。

一個完整的APP項目一般都是由客戶端（前端）和服務(wù)端（后端）相結(jié)合。

• 接口，就是后端將數(shù)據(jù)源或數(shù)據(jù)庫提供給外部應(yīng)用去調(diào)用的一段程序。
• 接口可以完成某個任務(wù)，但是它需要有相應(yīng)的輸入（即入?yún)ⅲ?。在工作中，少不了要定義五花八門的接口。

后端定義好URL，前端按照規(guī)定的格式請求它，它就會把數(shù)據(jù)給你，這就是接口。

前端負(fù)責(zé)將數(shù)據(jù)展示給用戶并快速響應(yīng)用戶所有的操作（點(diǎn)擊、長按、左滑、右滑、下拉刷新等等），后端則負(fù)責(zé)將數(shù)據(jù)在服務(wù)器上進(jìn)行一系列處理（增、刪、改、查）后返回給前端。

前端負(fù)責(zé)拿到數(shù)據(jù)并處理數(shù)據(jù)展示出來。

千萬不要覺得前端工作簡單，不就是寫個html頁面展示數(shù)據(jù)，但是他們需要考慮各種瀏覽器的兼容性、各種土豪、土鱉等設(shè)備適配性，響應(yīng)式設(shè)計、VR、AI、3D效果層出不窮的新概念新挑戰(zhàn)，且行且珍惜。

接口四要素：

• 方法 ：Post（增）、Delete（刪）、 put（改）、Get（查）
• url： /userinfo
• 請求參數(shù)：字段、說明、類型、備注、是否必填
• 返回參數(shù)：code/message/data

看個示例：

｛

“code”：200，

“msg”：“成功”，

“time”：“677788888”，

“data”：｛“name”：“張三”，“age”：“23”}，

}

規(guī)范的接口得保證：

• 要保持好身材，瘦，瘦，瘦！盡量前端不要處理業(yè)務(wù)邏輯、不進(jìn)行金額計算、且減少處理請求參數(shù)的校驗(yàn)；
• 要有可拓展性：文章、圖片最好由后端來提供；
• 要可靠安全、性能優(yōu)化、體驗(yàn)流暢。

在項目進(jìn)行中，接口聯(lián)調(diào)尤為關(guān)鍵。

接口聯(lián)調(diào)，就是［前后端平心靜氣、坐在一起校對數(shù)據(jù)］＝＝［一言不合就開懟、項目一完就吹水。

聯(lián)調(diào)主要是為了解決數(shù)據(jù)格式問題和數(shù)據(jù)參數(shù)問題。

這里提一下接口文檔。

接口文檔一般由后端進(jìn)行編寫，需要和前端一起協(xié)商補(bǔ)充，注意要溝通、溝通、溝通！在項目開發(fā)過程中，前后端工程師會根據(jù)這份文檔為主，要共同維護(hù)和更新它，直到項目結(jié)束。

• 它可以讓前后端工程師圍繞一個統(tǒng)一的文檔進(jìn)行溝通交流開發(fā)，減少溝通成本；
• 項目維護(hù)中或者項目人員更迭，方便后期人員查看、維護(hù)，減少學(xué)習(xí)成本；
• 也可一定程度上體現(xiàn)程序猿的表（wen）達(dá)（mang）能力；
• 最重要一點(diǎn)，它可以是后期甩鍋的強(qiáng)有力證據(jù)。

通常，前端開發(fā)人員和后臺開發(fā)人員是不同的人。當(dāng)然，部分種子選手兩者兼顧，曰全棧工程師（仰望大神）。不過，前后端的思維模式不一樣，要打造一個全棧工程師，學(xué)習(xí)成本極高。

一般來說，核心業(yè)務(wù)都會分離開，畢竟人的精力有限，要保質(zhì)保量保安全，一個人兼顧不過來。

附上一小段前后端聯(lián)調(diào)接口日常對話：

后臺：接口好了，你試試。

前端：不行，500。

后臺：我看看。

半個小時飄過。

后臺：好了，修復(fù)了個bug，你再試試。

前端：不行呀，還是500。

過了很久……

后臺：好了，我重構(gòu)了下代碼，參數(shù)改了，接口文檔有更新，你看看。

前端：好的（心里MMP）。

產(chǎn)品：下周一提測哦。

前端、后臺：網(wǎng)易云音樂－涼涼……

二、坑不死你的“寫死”

不是你們說的那個編劇又把男主角寫死的那個意思。

回到正題，我們前面說到了接口可以請求到數(shù)據(jù)。

對一個頁面而言，頁面的數(shù)據(jù)一方面由前端直接寫死，也就是靜態(tài)數(shù)據(jù)，另一部分需要有后端接口提供，前端需要從后端請求接口拿到數(shù)據(jù)并按照要求展示到頁面上，比如淘寶的商品列表。

但數(shù)據(jù)有靜態(tài)數(shù)據(jù)和動態(tài)數(shù)據(jù)，有些數(shù)據(jù)可以由前端寫死的，雷打不動。這就是靜態(tài)數(shù)據(jù)。

例如某些APP首頁下方的那些TAB欄，就是寫死的，因?yàn)槟切㏕AB基本不會有變化。

類比你去飯店吃飯，你點(diǎn)了個螺獅粉，老板問你要不要辣，你腦子一熱就說加辣，那端上來的肯定是紅通通的一端，基本就這樣了。如果你覺得辣，那你只能重新點(diǎn)一碗。

• 優(yōu)點(diǎn)：減少和服務(wù)端進(jìn)行請求。
• 缺點(diǎn)：后期如有擴(kuò)展，要填坑。

三、高逼格的組件及框架

跟前端小伙交（si）流（bi）多了，組件這個詞，除非你聾，不然一定會有所耳聞。

前端在寫頁面的時候，發(fā)現(xiàn)很多頁面有相似的地方，相似的地方功能也相同。比如都是一個表單，一個banner輪播圖，一個下拉框。So，為了提高代碼復(fù)用性，減少重復(fù)性的開發(fā)，就把頁面封裝起來以便下次復(fù)用，這就是一個組件。

組件可以看作是自定義的CSS＋HTML+JavaScript重新組合，它是一種可拼裝的功能集合。

簡單說下HTML＋CSS+JavaScript，舉個某寶的首頁，首頁看到的圖片、文字都是一個個的HTML元素，然后頁面的背景顏色、圖片大小，按鈕位于整個頁面的什么位置，這就是CSS做的。

至于JavaScript，簡稱js，可以看成首頁的大腦，主要實(shí)現(xiàn)內(nèi)部的邏輯，比如按鈕點(diǎn)擊之后怎么處理，界面之間如何跳轉(zhuǎn)，什么時候刷新信息，如何請求數(shù)據(jù)。它需要把后端返回的數(shù)據(jù)添加到頁面中，或者讓元素運(yùn)動起來，或者是改變頁面的CSS，或者是操作HTML元素。

?類比產(chǎn)品Axure作原型圖，每個頁面都需要有頂部狀態(tài)欄，我們會運(yùn)用幾個按鈕、矩形框進(jìn)行組合，命名為母版。

類比我們以前高考備戰(zhàn)采用大量的習(xí)題戰(zhàn)術(shù)，我們會有一本錯題集，學(xué)霸們會怎么利用這本錯題集呢？他們會按照考點(diǎn)對錯題集分類。對組件也是一樣，有相似的功能可以歸并為一類。

你寫的代碼越來越多，你封裝的組件就越來越多。慢慢的，你就有個組件庫，包括樣式組件、UI組件、基礎(chǔ)組件、業(yè)務(wù)組件等等。Perfect，組件還可以進(jìn)行再組合，把組件再整合起來，是一種組件間相互關(guān)系的設(shè)計。

類比你手機(jī)裝了支付寶APP，它可以用來買理財產(chǎn)品、可以用來買保險，可以使用第三方服務(wù)，但是對一些人而言，他不需要這些功能，他只是把錢放在余額寶里，偶爾迷茫的時候去看一眼。

框架不是越大越好?？蚣苤恍璞Ａ艋镜墓δ?，但是它會提供方式給你去擴(kuò)展，這才是好的框架。

四、天天念叨的DOM

• DOM全稱Document Object Model，翻譯就是文檔對象模型。
• DOM是一系列功能集合，是處理HTML和XML文檔的編程接口。
• DOM允許開發(fā)人員從文檔中增、刪、查、改頁面數(shù)據(jù)。直白的講，它給文檔提供了一種結(jié)構(gòu)化的表示方法，可以改變文檔的內(nèi)容和呈現(xiàn)方式。
• DOM技術(shù)使頁面可以動態(tài)地變化，如可以動態(tài)地顯示或隱藏一個元素，改變它們的屬性，增加一個元素等。
• 可以把DOM認(rèn)為是頁面上數(shù)據(jù)和結(jié)構(gòu)的一個樹形表示。
• DOM的功能是把瀏覽器支持的文檔（包括HTML、 XML、 XHTML）都當(dāng)成對象來解析。

請看下面這個HTML文件：

html

head

titleDOM/title

/head

body

h1DOM Lesson one/h1

phello world/p

/body

/html

你可以看出，最外面一層是html，html嵌套著head和body標(biāo)簽，head嵌套著title標(biāo)簽，body嵌套著p標(biāo)簽。

同理，DOM也是一層一層嵌套著，這種層級關(guān)系不是隨便定的，是有一定的規(guī)則。

• 這可類比于我們存放的文件路徑: 我的電腦-CDEFG盤-學(xué)習(xí)資料-日本語音-島國電影。
• 也可類比于我們博大精深的親人關(guān)系表。

DOM它易用性強(qiáng)，并且遍歷簡單，直接操作DOM無所不能。

但操作DOM效率低，解析速度慢，內(nèi)存占用量過高，且DOM機(jī)制中所運(yùn)用的大量對象的創(chuàng)建和銷毀影響效率。
所以出現(xiàn)了虛擬DOM。這個我就編不下去了。

五、Cookie、Session、Token哪家強(qiáng)

在傳統(tǒng)的web應(yīng)用中，服務(wù)器端通過一種存儲機(jī)制保存了會話信息（Session）。

Session可以理解為后臺服務(wù)器的一小片內(nèi)存。

每個會話信息都對應(yīng)一個唯一的編號：Session ID，這個字符串隨機(jī)產(chǎn)生，服務(wù)器端會把Session ID放在Cookie里面，Cookie數(shù)據(jù)存放在客戶端。Session的狀態(tài)是存儲在服務(wù)器端，客戶端存的只有Session id。

Cookie是服務(wù)器給客戶端的憑證，可以理解為存在客戶端的一個txt文件。

里面包括你登錄信息之類，這樣你下次在登錄某個網(wǎng)站，就會自動調(diào)用Cookie，取到Session id到后端服務(wù)器獲取對應(yīng)的Session具體信息，進(jìn)行數(shù)據(jù)的保存和修改，但Cookie存放在客戶端易被盜用篡改，不是很安全。

這類比于你去逛超市，你存放了私人物品在儲物柜子里，它會給你個取件的紙條，等你逛完超市后，就可以掃描紙條打開柜子。

在前后端沒有分離的時候，前端頁面往往都屬于后臺管理，這個大部分是同源請求。

但是在前后端分離后，這個時候一般涉及到跨域，跨域的請求不攜帶Cookie，要攜帶Cookie又要后臺指定允許的跨域地址，比較麻煩，于是出現(xiàn)了Token。

Token就是令牌。

Token一般是由uid＋時間戳＋設(shè)備號＋自定義規(guī)則經(jīng)過算法加密后的一串字符串。字符串通常很長，難偽造。

這類比于服務(wù)器生成了一個單號返回給客戶端，客戶端帶著單號過來請求請求器，這時候怎么證明單號是服務(wù)器生成的呢，可以通過單號來檢查。

比如你授權(quán)（登錄）一個程序時，它就是個依據(jù)，判斷你是否已經(jīng)授權(quán)程序；Token的狀態(tài)是存儲在客戶端。

在APP開發(fā)中，都是使用Token作為驗(yàn)證后的憑證。

一般采取的措施是客戶端輸入用戶名和密碼，客戶端登錄后，服務(wù)器端會返回一個Token，之后所有的請求都會帶著Token，客戶端把Token放在請求頭（header）里，在應(yīng)用中一般使用https會增加安全性，拿到Token才能進(jìn)入頁面內(nèi)。

后端通過檢驗(yàn)請求頭判斷是否登錄、是否正常請求、是否安全后再提供服務(wù)。

六、程序猿又說要重構(gòu)

開發(fā)人員經(jīng)常抱怨 ：

“這么爛的代碼，維護(hù)不了啦，需要重構(gòu)！”

“這代碼怎么能這么不優(yōu)雅？誰來重構(gòu)一下？”

我。。。。忍不住給你們這些卓越的工程師打Call。

重構(gòu)是對代碼做任何更動，以增加可讀性或者簡化結(jié)構(gòu)，而不影響輸出結(jié)果。

• 輕一點(diǎn)：優(yōu)化原有代碼，改善代碼質(zhì)量，比如三行代碼用一行就解決，降低復(fù)雜度。
• 重一點(diǎn)：完全重寫，幾乎不用原來的代碼。
• 再嚴(yán)重一點(diǎn)說：為了有事干！知道它的重要性了吧！

重構(gòu)成功的話，從長遠(yuǎn)來看應(yīng)該是利大于弊的，對用戶而言：更快、更流暢、更美觀；對碼農(nóng)而言：易維護(hù)，更易讀，一看就是優(yōu)雅的代碼，特別是人員流動比較大的項目。

作為產(chǎn)品經(jīng)理，我表示：重構(gòu)有風(fēng)險，重構(gòu)需謹(jǐn)慎，得做到：

1. 充分的測試！?。。?/strong>