源自：http://www.cnblogs.com/yexiaochai/p/5311712.html

聲明：文章著作權(quán)歸作者所有，如有侵權(quán)，請(qǐng)聯(lián)系小編刪除。

前言

近期工作生活比較漂泊，從上海換到了成都，這個(gè)是以家庭為單位的重大決定，離開一線城市對(duì)于職業(yè)生涯和技術(shù)前沿來說是有一定問題的，但是出于房價(jià)考慮（主要是買不起房子）與生活舒適度來說，回蓉似乎是一個(gè)比較好的選擇，何況成都的互聯(lián)網(wǎng)也還行。

隨著能力的提升，負(fù)責(zé)的工作種類會(huì)逐漸增多，考慮的方向也會(huì)有所不同，這個(gè)時(shí)候不太會(huì)有太多單獨(dú)的知識(shí)點(diǎn)成為阻礙了，工作中碰到的問題要么太“大”，總結(jié)起來費(fèi)力，要么太“小”，不適合單獨(dú)整理成文，這種現(xiàn)象反而造成了一段時(shí)期的博客空白期，總的來說就是又開始懶了，思維又開始懈怠，人又開始想待在安逸區(qū)了。

因?yàn)殚_始懶了，所以沒能學(xué)習(xí)到新知識(shí)，自然出不了新文；因?yàn)殚_始懶了不愿意再對(duì)工作中的問題一個(gè)個(gè)深入研究、深入挖掘自然出不了新文。

所以人還是得不停的鞭笞自己啊，不能讓自己陷入“瞎忙”的境地，得有效的利用時(shí)間，才能走的更遠(yuǎn)?。?！

現(xiàn)在我在一家小公司做前端，因?yàn)楣疽约奥毼坏淖兓?，?duì)于在小公司如何做前端有一些心得，拿出來與各位做個(gè)分享，希望對(duì)處于小公司的前端有一定用處，也鞭笞自己重新學(xué)習(xí)總結(jié)。

什么是優(yōu)秀的前端團(tuán)隊(duì)？

團(tuán)隊(duì)初期缺什么

在公司中，層級(jí)越高對(duì)業(yè)務(wù)關(guān)注比例越高，反而不太關(guān)注個(gè)人成長，所以評(píng)價(jià)一個(gè)leader是以團(tuán)隊(duì)為單位，團(tuán)隊(duì)成員比他強(qiáng)是應(yīng)該的；對(duì)于個(gè)人來說的話，要多關(guān)注自身能力成長，然后能力匹配自己的職位，甚至超出自己的職位，這樣的團(tuán)隊(duì)的話，戰(zhàn)斗力是比較強(qiáng)的。

主管（包括前端主管）設(shè)定目標(biāo)必須可量化 ，比如你做一個(gè)業(yè)務(wù)，kpi是多少，那么技術(shù)就需要考慮如何才能達(dá)成，細(xì)化到研發(fā)甚至前端層級(jí)，就是所謂技術(shù)kpi了。

比如，今年H5站想達(dá)到單日平均出票量10000，那么這個(gè)就是業(yè)務(wù)目標(biāo)，需要消化分到各個(gè)業(yè)務(wù)團(tuán)隊(duì)，可以是：

① SEO優(yōu)化

② SEM優(yōu)化

③ 營銷廣告

④ 微信&支付寶&手機(jī)百度流量接入（微信錢包是十分優(yōu)秀的流量入口，可以極大程度的增加流量）

⑤ 實(shí)地推廣

……

以上當(dāng)然只能解決部分問題，具體到前端，可能我們就要從頁面轉(zhuǎn)換率入手，建立訂單漏斗模型，做性能優(yōu)化，做交互優(yōu)化，每一個(gè)具體的層面都需要轉(zhuǎn)化目標(biāo)。

這些都是直接可量化的東西，因?yàn)楫?dāng)前業(yè)務(wù)已經(jīng)到了一個(gè)瓶頸，或者公司已經(jīng)到了一個(gè)瓶頸，業(yè)務(wù)上就需要做不停的嘗試，對(duì)應(yīng)到技術(shù)就是需要你快速迭代，低成本迭代，不斷的容錯(cuò)試錯(cuò)。

這個(gè)時(shí)候就會(huì)提出很多問題：

第一是你的團(tuán)隊(duì)在類似高壓下會(huì)不會(huì)主動(dòng)加班去實(shí)現(xiàn)公司的目標(biāo)、個(gè)人的kpi。

第二是你的團(tuán)隊(duì)在這輪高壓拼搏后有沒有留下什么東西？

根據(jù)之前經(jīng)驗(yàn)，沒有團(tuán)隊(duì)可以無休止的承受高壓加班的壓力

以之前攜程無線高壓迭代的經(jīng)歷來說，就算是那么優(yōu)秀的團(tuán)隊(duì)事實(shí)上到后期也是疲憊不堪，疲憊的時(shí)候容易犯錯(cuò)，亢龍有悔，盈不可久。

第三是如何幫助新人快速的融入團(tuán)隊(duì)，如何讓1+1=2。

我們都清楚，好的項(xiàng)目絕不是堆人可以堆出來的，如何讓一個(gè)項(xiàng)目可以分解到各個(gè)人手中，如何讓良莠不齊的同事可以更好的協(xié)作，這個(gè)是我們需要考慮的。

要解決這些問題是要靠平時(shí)的積累，具體體現(xiàn)到前端是：

1 在不停的迭代中，你的業(yè)務(wù)流程是不是最優(yōu)（產(chǎn)品到設(shè)計(jì)到前端到最終上線流程）

2 在不停的迭代中，是否沉淀出來了公共服務(wù)與工具化服務(wù)

好的前端是什么樣的

首先，好的前端是一定愿意加班的，同時(shí)，好的前端是會(huì)找辦法讓團(tuán)隊(duì)少加班的。

和一些朋友做過交流，很多好的點(diǎn)子，改善工作效率的點(diǎn)子都是幾個(gè)人討論后私下晚上搞出來，然后反復(fù)實(shí)踐用于生產(chǎn)的。

一般來說業(yè)務(wù)kpi對(duì)于能力強(qiáng)的朋友來說不會(huì)太難，所以對(duì)他們的期待也會(huì)更多：

有強(qiáng)烈的意識(shí)，能深刻了解到當(dāng)前項(xiàng)目性能的缺陷，開發(fā)效率低下的原因，并會(huì)找尋處理辦法

很多團(tuán)隊(duì)在快速迭代中會(huì)開始“欠賬”，時(shí)間久了就不愿意還，問題的存在擱置需要想辦法去解決，團(tuán)隊(duì)成員是看得到問題的，沒人說，沒人做是因?yàn)橹滥鞘强?，你如果能解決的話，一到二次便能提升自己在團(tuán)隊(duì)中的位置。

好的前端應(yīng)該有良好的架構(gòu)設(shè)計(jì)能力

首先，好的前端能向人清晰有條理的描述自己的技術(shù)方案，并且讓人聽得懂！

然后架構(gòu)設(shè)計(jì)能滿足長久的需求發(fā)展，就算業(yè)務(wù)頻道擴(kuò)大了10倍，用戶量增加了100倍，也不會(huì)有根本的變動(dòng)。

好的前端應(yīng)該具有良好的交流能力

對(duì)內(nèi)，好的前端需要了解團(tuán)隊(duì)成員的性格與能力，做出適當(dāng)?shù)娜蝿?wù)分配分解；對(duì)外，需要搶占業(yè)務(wù)還不能產(chǎn)生利益沖突，這類人是項(xiàng)目推進(jìn)的主力。

小公司的前端應(yīng)該怎么做

不是所有的小公司都這樣，但是我見過的小公司的前端都在撲業(yè)務(wù)，并且疲于奔命，這個(gè)是個(gè)惡性循環(huán)，第一次做業(yè)務(wù)：

加班趕業(yè)務(wù)-業(yè)務(wù)結(jié)束輕松一周-加班趕迭代-業(yè)務(wù)結(jié)束輕松一周-加班新業(yè)務(wù)-業(yè)務(wù)結(jié)束輕松下……

偶爾你會(huì)問這些朋友為什么沒有什么積累，得到的答案基本是一致的，忙??！他們忙起來的時(shí)候是真的很忙，但是第二次如果依舊這么忙的話就有問題，第三次還這樣就是團(tuán)隊(duì)不健康了，一個(gè)好的做法是：

① 完成前后分離，這步做不到，后面也不用做了

② 形成幾套UI庫

③ 根據(jù)業(yè)務(wù)形態(tài)，形成公共業(yè)務(wù)

④ 前端重復(fù)工作工具化

⑤ 形成優(yōu)化體系

⑥ 形成統(tǒng)計(jì)體系

⑦ 建立頁面轉(zhuǎn)化漏斗模型

⑧ 做ABTesting方案

......

首先，無論出于什么考慮，前后一定要做分離，如果有SEO需求，那么再后續(xù)推進(jìn)nodeJS方案，畢竟現(xiàn)在不給錢想排前面還是很難，SEO基本沒意義。

其實(shí)，小公司有很多坑可以占住，這個(gè)會(huì)幫助你建立團(tuán)隊(duì)威望，下面我舉幾個(gè)細(xì)節(jié)點(diǎn)說一說。

UI庫

UI庫的形成與UI庫的多少將決定你后續(xù)項(xiàng)目重復(fù)工作量的多少，這個(gè)UI庫需要注意幾點(diǎn)：

① UI是否可重用

② UI是否可定制

比如讓很多朋友去做這個(gè)時(shí)間選擇器，做出來就真的是時(shí)間選擇器，如果讓他換成城市選擇器，就全傻眼了：

③ UI是否可拆分，可聚合

還是以上面UI為例，這個(gè)組件事實(shí)上是一個(gè)聚合組件，由一個(gè)select組件與一個(gè)彈出層組件組成，你的UI是不是可拆分是評(píng)價(jià)他質(zhì)量的一個(gè)很大考慮點(diǎn)。

……

公共服務(wù)

公共服務(wù)可以說成一個(gè)大一點(diǎn)的“UI組件”，但是他是與業(yè)務(wù)相關(guān)的，UI來說一般不會(huì)與業(yè)務(wù)產(chǎn)生耦合，以上面的日期選擇器來說，無論他裝的是日期還是區(qū)域都是可以的，并且不應(yīng)該請(qǐng)求服務(wù)，他是純凈的UI組件。

而公共服務(wù)是不純凈的是一定與業(yè)務(wù)相關(guān)的，移動(dòng)端比較常見的公共服務(wù)是：

passport

包含登錄注冊(cè)、個(gè)人資料管理，甚至包含一些認(rèn)證相關(guān)的，與公司賬號(hào)相關(guān)的操作，登錄注冊(cè)是各種活動(dòng)，各種業(yè)務(wù)頻道都可能會(huì)使用的業(yè)務(wù)，這種東西是必須服務(wù)化的，但是很多小公司都沒做。

因?yàn)楣驳奶攸c(diǎn)，頁面設(shè)計(jì)最好中性一點(diǎn)，其中幾個(gè)常用的頁面，比如登錄需要包含以下設(shè)計(jì)：

① 樣式可定制化（彈出層、獨(dú)立頁面什么的都是常事）

② 回退可定制，其實(shí)所有的公共服務(wù)回退按鈕都是需要定制的，登錄成功去哪個(gè)URL登錄失敗去哪個(gè)URL，點(diǎn)擊瀏覽器回退去哪個(gè)URL都得約定，少一個(gè)都不是公共服務(wù)

③ 單點(diǎn)登錄，事實(shí)上初期根本用不到什么單點(diǎn)登錄，甚至大家都不是跨域的，所以后續(xù)需要再支持即可

還有很多與passport一樣的公共業(yè)務(wù)，比如：

① 錢包服務(wù)，包括用戶支付訂單相關(guān)管理

② 城市列表，這個(gè)要考慮參數(shù)如何傳遞

③ 反饋系統(tǒng)

④ 公司介紹

除了面向C端的公共頁面服務(wù)，還會(huì)有面向B端的統(tǒng)計(jì)平臺(tái)相關(guān)。

前端工具化

靜態(tài)資源處理

評(píng)價(jià)一個(gè)前端團(tuán)隊(duì)是否優(yōu)秀成熟的評(píng)判多以團(tuán)隊(duì)工具化的程度，一個(gè)簡單的例子是：

① 你們前端靜態(tài)資源是如何組織的、如何打包的

② 你們前端靜態(tài)資源是如何解決緩存的（比較好的方案是MD5）

上面兩點(diǎn)可以使用grunt/gulp一類的構(gòu)建工具輕松做到，如果有公共框架文件還會(huì)需要引入種子文件的概念

跨域問題

另外，所有前端團(tuán)隊(duì)都會(huì)遇到跨域問題，特別是前后分離后，服務(wù)器端只提供API接口，前端代碼隨便在哪都能運(yùn)行，那么這個(gè)時(shí)候你是怎么做呢？

① 使用fiddler&charles做代理

② 提供測(cè)試服務(wù)器

③ 支持jsonp跨域

④ 支持cors跨域

那么這些方案，哪種最適合團(tuán)隊(duì)，哪種成本最低（一般來說是代理），是我們需要考慮的

tips：我之前使用fiddler，現(xiàn)在換mac了使用charles，兩款工具十分優(yōu)秀，正則一塊的處理很好，推薦使用

移動(dòng)端適配

從后端轉(zhuǎn)到前端的同學(xué)一般在業(yè)務(wù)邏輯上有一些天生的優(yōu)勢(shì)，但是往往在CSS一塊比較弱，如何在開發(fā)人員無感的情況下引入rem，如何與現(xiàn)有機(jī)制無縫的使用less，如何處理單頁應(yīng)用中css的污染，這個(gè)是框架底層需要考慮的。

模塊化&組件化開發(fā)

團(tuán)隊(duì)上規(guī)模后，如何使用模塊化開發(fā)處理協(xié)作問題；業(yè)務(wù)代碼復(fù)雜度上升后，如何使用組件化編程思維簡單開發(fā)復(fù)雜度，這些需要應(yīng)用到項(xiàng)目實(shí)踐中，并且路徑是可復(fù)制的；

一些優(yōu)化手段，也需要工具化，框架化，讓開發(fā)人員無感。

前后端協(xié)作

前端與服務(wù)器端，開發(fā)速度未必同步，事實(shí)上很多時(shí)候都不是同步的，在已經(jīng)約定了接口格式的情況下，接口還沒有寫好，但是前端依然能寫交互，團(tuán)隊(duì)是如何寫這種假數(shù)據(jù)，這個(gè)方面實(shí)現(xiàn)會(huì)大大的提升工作效率。

訂單下降分析

如果在某一個(gè)時(shí)間段，全站的流量或者全站的訂單量下降了，你如何跟蹤這次下降的原因，如何最大程度上避免下次出現(xiàn)類似的現(xiàn)象，這個(gè)時(shí)候數(shù)據(jù)統(tǒng)計(jì)會(huì)避免我們成為瞎子，所以得盡快建立統(tǒng)計(jì)平臺(tái)，轉(zhuǎn)換率模型。

快速迭代，通過迭代來優(yōu)化產(chǎn)品，但是如果每一個(gè)迭代都完全顛覆了之前的設(shè)計(jì)，很多時(shí)候公司就是原地踏步，每邁出一步你要清晰的知道前一個(gè)版本哪里出了問題，針對(duì)問題做優(yōu)化，而不是頻繁改版。

這次改版后，你如何知道這次優(yōu)化就比上一次的好，而不是其它因素造成，ABTesting方案應(yīng)該是每一個(gè)成熟團(tuán)隊(duì)必須的，持續(xù)優(yōu)化這些都是建立在有效的數(shù)據(jù)監(jiān)控與意見反饋機(jī)制上的，我們不能做完網(wǎng)站變成瞎子。

結(jié)語

因?yàn)楹芫脹]有寫博客了，又因?yàn)樽罱鼊偤脕淼搅诵F(tuán)隊(duì)，有一些想法以水文的形式發(fā)出來與各位討論，希望對(duì)各位有用。

誠然，對(duì)于一個(gè)前端來說，要推動(dòng)上述工作還是有一點(diǎn)難度的，但并不是不可能，前端對(duì)自己的定位要變，從前端工程師到軟件工程師。

我常常聽到很多前端自己都在質(zhì)疑自己，或者就是膨脹到覺得自己團(tuán)隊(duì)沒有什么可以做了，那么這個(gè)時(shí)候可以考慮下：

你們團(tuán)隊(duì)的自動(dòng)化、安全性已經(jīng)到位了嗎，效率就真的完全沒有上升空間了？

前端的重視程度需要你我一并努力，在大公司做前端難，在小公司做前端更難，你我共勉，最后補(bǔ)充下為什么回成都，以及回來的一些感受。

從一線城市到二線城市

幾年前，懷著想學(xué)點(diǎn)新東西的想法，我來到了上海，在這邊也確實(shí)學(xué)到了很多東西，關(guān)于學(xué)習(xí)有幾個(gè)必要條件：

① 好的項(xiàng)目

② 好的團(tuán)隊(duì)

③ 加班總結(jié)

很多時(shí)候不是一些朋友不努力，但是PV上億的項(xiàng)目國內(nèi)真的不多，創(chuàng)業(yè)團(tuán)隊(duì)這種機(jī)會(huì)就更少，所以根本沒有這種機(jī)會(huì)，這個(gè)時(shí)候看人家做的很多優(yōu)化就是看熱鬧，似乎懂得了什么，其實(shí)什么都沒懂。

就算是攜程最好的時(shí)光，依舊有很多團(tuán)隊(duì)沒有跟上好時(shí)候，比如不在無線的團(tuán)隊(duì)，那么無線團(tuán)隊(duì)的經(jīng)驗(yàn)包，如果不是真正好學(xué)的人是接收不了的，就算我處于無線團(tuán)隊(duì)，native團(tuán)隊(duì)中很多經(jīng)驗(yàn)包都是遺漏狀態(tài)，而且無論怎么打聽都是打聽不出來的，就比如native資源更新機(jī)制，我就前前后后關(guān)注了兩年，從各處零碎的得到了很多知識(shí)，現(xiàn)在看來依舊不夠系統(tǒng)，不可謂不遺憾。

又比如有一次攜程全站出現(xiàn)了一個(gè)重大BUG，因?yàn)槭莝erver端的問題，自己當(dāng)時(shí)目光短淺沒有去深入，到現(xiàn)在想深入都沒有案例了，只能說機(jī)會(huì)稍縱即逝?。?！

所以就算后來進(jìn)入百度了解到了fis的好，但是真正想去深入的話怎么都摸不著門道，只能學(xué)習(xí)一些思想走；這個(gè)也是一個(gè)框架成型后如果后面的人來維護(hù)怎么都維護(hù)不好的原因，因?yàn)樗麄冋也恢?，后來的人甚至?xí)娍蚣艿母鞣N不好，自己卻找不出方案。

這個(gè)就是一線城市的一大好處：

一線城市，具有好項(xiàng)目（PV過億），好團(tuán)隊(duì)的機(jī)會(huì)要好很多，只要你努力上進(jìn)，就能收獲很大的經(jīng)驗(yàn)包。

這就意味著，只要你愿意學(xué)，就一定可以收獲很大的經(jīng)驗(yàn)禮包，這里有很多熱心的大神，愿意與你討論，愿意與你分享，而你的分享也會(huì)帶給你快樂與成就感。

另外，外面的薪酬包也要比二線城市大得多，就我而言，回成都薪酬包只有原來的70%不到，如果這次沒回成都的話，待遇應(yīng)該會(huì)有長足的漲幅，但是最后還是選擇的歸蓉。

關(guān)于機(jī)會(huì)好的偽命題

很多人到一線城市打拼是覺得那里機(jī)會(huì)好，事實(shí)上這是一個(gè)偽命題（在我看來），不可否認(rèn)沿海的機(jī)會(huì)很多，但真心說不上好。

職場(chǎng)這個(gè)東西真心不好說，你能力強(qiáng)需要人賞識(shí)你，你上去了還得你的老板上去，你老板上去了，還得你老板的老板也上去了，如果中間有一個(gè)老板失勢(shì)了，那么新的老板可能會(huì)洗牌，情況好的話你留下，并且依舊令人尊敬，但是更多的情況是可能你得卷鋪蓋走人，互聯(lián)網(wǎng)離職率高不是開玩笑的。

能力強(qiáng)不等于職位高，因?yàn)橐话銇碚f你的能力還沒有那么強(qiáng)，能玩轉(zhuǎn)公司的畢竟是少數(shù)，搞技術(shù)的更多的情況還是比較實(shí)在，想安安靜靜寫代碼，很少搞政治斗爭(zhēng)，又心高氣傲，又比較脆弱，面對(duì)不合理的KPI，或者被產(chǎn)品無限制的坑，是非常容易離職的。

外面優(yōu)秀的人扎堆，所以真的機(jī)會(huì)只是相對(duì)的，你如果抱著學(xué)習(xí)收獲經(jīng)驗(yàn)包的想法出來會(huì)收獲很大，如果你經(jīng)驗(yàn)包已經(jīng)夠了，想更往上發(fā)展，那么這個(gè)是很難的，因?yàn)楣芾砘蛘呓涣魑幢厥情_發(fā)擅長的。

再往上會(huì)關(guān)注業(yè)務(wù)發(fā)展，關(guān)注KPI，需要大量的產(chǎn)品知識(shí)，自己甚至?xí)蔀楫a(chǎn)品，這個(gè)時(shí)候搞技術(shù)的時(shí)間就會(huì)相對(duì)變少，但技術(shù)不好又很難讓技術(shù)員工服眾，光是技術(shù)好又上不去，竟然有點(diǎn)矛盾。

我身邊就有幾個(gè)人出去做CTO，結(jié)果團(tuán)隊(duì)剛剛上軌道就被掃地出門了……

另外，就是外面leader很辛苦，特別是團(tuán)隊(duì)上升期，好的leader會(huì)陪著團(tuán)隊(duì)加班，會(huì)很晚，我們之前好的老板（35歲左右）都是陪著團(tuán)隊(duì)加班的，總之錢不好賺，如果leader偷懶，幾年下來可能會(huì)廢掉，被淘汰掉，這個(gè)中年危機(jī)是不可忽視的。

雖然如此，一線城市的機(jī)會(huì)和成功的幾率依舊比二線城市好得多，而你愿意拼搏，善于思考，是可以發(fā)展的很好的，那么我們?yōu)槭裁匆ザ€城市呢？

為什么去二線

去二線城市主要原因就是房價(jià)貴，房價(jià)太貴，同樣的錢可以在成都買三套房子了，而且一線城市買的房子很偏遠(yuǎn)，上班得一個(gè)多小時(shí)，下班又得一個(gè)多小時(shí)，這樣來說是相當(dāng)令人疲憊的。

然后外面工作節(jié)奏太緊張，甚至已經(jīng)緊張到?jīng)]有生活了，有追求的人995是常態(tài)，996也是有可能的，這個(gè)會(huì)不斷的透支你的身體，年輕點(diǎn)還好，稍微上點(diǎn)年紀(jì)，有了家庭的話就不行了，會(huì)考慮的更多了。

比如在一線城市落戶的條件比較苛刻，小孩教育問題、父母養(yǎng)老問題都是你需要考慮的，想著想著，就會(huì)有一個(gè)想法，要不回老家算了，又不是找不到工作，于是就回來了。。。。。。

回成都后的感覺

回成都后，第二天便出差去北京，整個(gè)清明節(jié)都在加班，完了回成都也一直在加班，尼瑪這邊的工作強(qiáng)度一點(diǎn)也不比一線城市低啊?。?！

但是，周末可以過得很愜意，一個(gè)月老媽也會(huì)來一次做些好吃的給我們吃，這種幸福感和歸屬感是外面沒有的。

今天，我8點(diǎn)就下班，在軟件園區(qū)信步而走，走了10多分鐘，然后坐著公交車20分鐘回家了，這種感覺還是很不錯(cuò)的。。。。。。

二線城市依舊會(huì)面臨外面的各種挑戰(zhàn)，不想面對(duì)依舊上不去，在哪都是面對(duì)，那就回老家面對(duì)咯。。。。。。

專注分享當(dāng)下最實(shí)用的前端技術(shù)。關(guān)注前端達(dá)人，與達(dá)人一起學(xué)習(xí)進(jìn)步！

長按關(guān)注"前端達(dá)人"