前端開(kāi)發(fā)者的發(fā)展方向：一專多長(zhǎng)
騰訊ISD頁(yè)面重構(gòu)組leader TwinsenLiang 在《一專多長(zhǎng)》中介紹了“前端架構(gòu)人員的能力模型”
greengnn在上次的演講中，又提到了這個(gè)問(wèn)題，并將開(kāi)發(fā)人員分為兩類(lèi)：
一類(lèi)是xhtml+css+js等狹隘的理解前端工作人員，另一類(lèi)就是我們下圖中提到的幾個(gè)方面。
原文如下：
◆ 小頁(yè)面觀點(diǎn)，div+css等狹隘的理解前端頁(yè)面重構(gòu)工程師
◆ 大頁(yè)面觀點(diǎn)，從產(chǎn)品誕生的流程，分析頁(yè)面人員的能力模型，應(yīng)該具備一專多長(zhǎng)，要熟悉項(xiàng)目管理，產(chǎn)品，設(shè)計(jì)，后臺(tái)開(kāi)發(fā)，產(chǎn)品運(yùn)營(yíng)等，作為研發(fā)中的一個(gè)銜接層，更好的像產(chǎn)品構(gòu)想和設(shè)計(jì)付諸實(shí)施。
實(shí)際工作中，前端開(kāi)發(fā)人員的工作性質(zhì)，決定了他們需要跟方方面面的人打交道。
一、先從“產(chǎn)品”說(shuō)起
良好的用戶體驗(yàn)，在“靜態(tài)設(shè)計(jì)稿”上往往得不到直觀感觸。通過(guò)與前端開(kāi)發(fā)的協(xié)作，可以把“各個(gè)流程”搞的很順暢：
◆ 直接在前臺(tái)驗(yàn)證注冊(cè)表單，即時(shí)反饋輸入錯(cuò)誤的信息;
◆ 同頁(yè)無(wú)刷新彈出提示層;
◆ 購(gòu)物車(chē)，按照cookie記錄用戶購(gòu)買(mǎi)的商品;
◆ 提升頁(yè)面開(kāi)啟速度。
綜上所述，前端開(kāi)發(fā)人員發(fā)展的方向之一，是做好產(chǎn)品，掌握并提高“用戶體驗(yàn)”。
二、運(yùn)營(yíng)推廣方面
通過(guò)W3C驗(yàn)證，本身就為SEO做好了基礎(chǔ)，掌握了這項(xiàng)技術(shù)，可以有效的降低網(wǎng)站推廣所花費(fèi)的成本。從運(yùn)營(yíng)角度上來(lái)說(shuō)，前端開(kāi)發(fā)可以輔助企業(yè)完成一小部分的推廣工作。另外，可以有效降低頁(yè)面產(chǎn)生的流量。成本的節(jié)約就是收益，能省一點(diǎn)是一點(diǎn)，每天在關(guān)鍵字購(gòu)買(mǎi)、流量購(gòu)買(mǎi)上投入的成本，累積起來(lái)決不是個(gè)小數(shù)目。這也是前端開(kāi)發(fā)人員所具備的價(jià)值之一。
三、設(shè)計(jì)
跟設(shè)計(jì)師打交道的幾率，實(shí)在太高了。經(jīng)常可以看到憤怒的工程師在怒吼“又給我設(shè)計(jì)了一個(gè)圓角結(jié)構(gòu)，實(shí)現(xiàn)太麻煩了”，而實(shí)際上，如果前端開(kāi)發(fā)掌握一下設(shè)計(jì)方面的技巧，對(duì)工作是很有利的。大多數(shù)設(shè)計(jì)師，不會(huì)提供詳盡的稿子，例如內(nèi)容頁(yè)面，往往僅提供一個(gè)模板。于是有很多工作，都浪費(fèi)在溝通的成本上。“幫我美化個(gè)按鈕”“我需要設(shè)計(jì)一個(gè)提示層”。其實(shí)這些東西，自己做很快就可以搞定，如果設(shè)計(jì)師剛巧在忙別的項(xiàng)目，就為了一個(gè)美化的效果，需要等待很長(zhǎng)時(shí)間。那如果你自己掌握了設(shè)計(jì)的技巧，可以把“圓角”結(jié)構(gòu)改成漂亮的“直角”結(jié)構(gòu)，豈不是很爽?
四、后臺(tái)
頁(yè)面制作每個(gè)公司的情況都不一樣，我們是提供static靜態(tài)文件給程序員，程序員改好后，放到templates目錄下。如果是不懂程序代碼、不會(huì)配環(huán)境的員工，修改一個(gè)東西，需要改完static下的靜態(tài)文件后，預(yù)覽效果，再告訴程序員，他改了什么什么，再讓程序員去調(diào)templates模板頁(yè)。這樣一來(lái)一回，浪費(fèi)時(shí)間不說(shuō)，程序員也會(huì)很不爽，“丫的，什么前端，狗屁不會(huì)改”。不利于提高自己的工作地位。
豆瓣前端工程師克軍畫(huà)的一張前端工程師應(yīng)該關(guān)注什么的導(dǎo)圖
相信很多人看過(guò)以上這張圖，由豆瓣前端工程師克軍畫(huà)的一張前端工程師應(yīng)該關(guān)注什么的導(dǎo)圖。此圖比較全面的展現(xiàn)了目前前端開(kāi)發(fā)者或者說(shuō)是前端設(shè)計(jì)師所要關(guān)注的，并且所要具備的一些除本職技能要求外的一些其他職業(yè)技能。前端開(kāi)發(fā)并不是“頁(yè)面仔”更不是一些后臺(tái)開(kāi)發(fā)所看清的職業(yè)(因?yàn)樵缜坝锌吹侥匙鰆ava開(kāi)發(fā)的簽名檔為“淪落為前端了”)。這里有一篇來(lái)自射雕的文章《前端與民工》，雖然寫(xiě)文章的時(shí)間已經(jīng)是很早之前了，但我覺(jué)得蠻有意思的，推薦大家閱讀一下。
前端可以說(shuō)是整個(gè)web項(xiàng)目中的關(guān)鍵人物，靈魂人物。為什么這么說(shuō)呢?因?yàn)榍岸说墓ぷ餍再|(zhì)決定了我們?nèi)绱?。做前端幾乎得跟整個(gè)項(xiàng)目團(tuán)隊(duì)中的任何職位都要打上交道。交互設(shè)計(jì)師，視覺(jué)設(shè)計(jì)師，產(chǎn)品及項(xiàng)目管理，運(yùn)營(yíng)，后臺(tái)開(kāi)發(fā)都是前端所要打交道的人物。當(dāng)然，打交道并不是純粹的遵從指示，是一個(gè)互相交流的過(guò)程。在打交道的過(guò)程中，前端應(yīng)該就自己的職業(yè)技能合理地提出可行性，甚至是更加友好的交互，視覺(jué)表現(xiàn)，產(chǎn)品改進(jìn)，運(yùn)營(yíng)策略，后臺(tái)優(yōu)化等等，這些就要求我們所要具備更加多的“長(zhǎng)”。在一“專”專前端的同時(shí)，與多“長(zhǎng)”功能提高自身的能力。這并不是全才，你也沒(méi)必要全才，全才永遠(yuǎn)都只是個(gè)傳說(shuō)，“專”和“長(zhǎng)”還是有本質(zhì)區(qū)別的。那究竟如何解釋這個(gè)一專多長(zhǎng)呢?“一專”對(duì)應(yīng)的是專業(yè)的核心技能，“多長(zhǎng)”是指與專業(yè)相關(guān)或臨近領(lǐng)域的復(fù)合職業(yè)技能、創(chuàng)新能力與職業(yè)基本素質(zhì)。
建議“前端開(kāi)發(fā)”人員掌握的技術(shù) ：XHTML+CSS，Photoshop，Javascript，JQuery，AJAX，SEO，UE，還有PHP，ASP等一些后臺(tái)程序。
早前，我聽(tīng)了一場(chǎng)分享，是騰訊ISD網(wǎng)站組頁(yè)面重構(gòu)組leader彪叔Twinsen梁的分享，標(biāo)題就是《一專多長(zhǎng)》。分享很精彩，視頻在youku上可以搜索到，一專多長(zhǎng)的ppt可以在此查看。在這個(gè)分享里，充分的講解了“一專多長(zhǎng)”這個(gè)命題，推薦大家看看。
在很久之前的年代，在web開(kāi)發(fā)中還沒(méi)有這么分工明細(xì)的時(shí)候，一個(gè)網(wǎng)站設(shè)計(jì)師可能就包含了交互設(shè)計(jì)，視覺(jué)設(shè)計(jì)，用戶體驗(yàn)，前端開(kāi)發(fā)以及后臺(tái)程序。后來(lái)就是公司都越做越大了，網(wǎng)站設(shè)計(jì)師也越來(lái)越多了，出現(xiàn)分工以及專攻了，也就是現(xiàn)在的這些個(gè)職位組成的Web開(kāi)發(fā)團(tuán)隊(duì)了。術(shù)業(yè)有專攻縱然是好事，而知己知彼更是難能可貴的能力。在你學(xué)習(xí)更多的本“專”技術(shù)之外，如何讓自己獲得更多的“長(zhǎng)”有待大家自己進(jìn)一步的思考和探索。
總結(jié)
人無(wú)完人，我們往往沒(méi)有大量的“時(shí)間、精力”去學(xué)習(xí)這些額外的東西。
但是，前端開(kāi)發(fā)這個(gè)職業(yè)特點(diǎn)，要求我們?cè)诰ū拘袠I(yè)知識(shí)的基礎(chǔ)上，盡可能的去了解其他行業(yè)的知識(shí)。這樣，才能在與其他部門(mén)打交道的過(guò)程中，占據(jù)一個(gè)有利的地位、降低溝通成本。在管理體系里，你的個(gè)性決定了你的位置，想要做的更好、得到更多。直白點(diǎn)，想要提升職位、漲工資，就需要一個(gè)理由。做前端，就要做一個(gè)優(yōu)秀的前端。技術(shù)技能只是做事實(shí)施的必需。 “一專多長(zhǎng)”是前端的王道。
別一口一句“我沒(méi)空學(xué)那些，我要專精xhtml+css”，你有空泡妞、看2012、變形金剛，打游戲，沒(méi)空學(xué)東西？
原文：http://uicss.cn/developmental-direction-of-us/
【編輯推薦】
