如果你是一個(gè)天才工程師（馬上可以離開(kāi)），可以獨(dú)立完成一個(gè)很多事情，你可以是一個(gè)怪咖，因?yàn)槲蚁嘈艣](méi)有一個(gè)人不會(huì)不佩服你。但現(xiàn)實(shí)歸現(xiàn)實(shí)，多數(shù)人都不是天才，而我們?cè)诼殘?chǎng)上也不是單打獨(dú)斗，我們需要團(tuán)隊(duì)合作，需要協(xié)調(diào)和配合，需要考慮除了代碼以外的更多事情。

前端工程師，也不僅僅只是負(fù)責(zé)接資料，撈數(shù)據(jù)，做個(gè)回應(yīng)。當(dāng)然只做這些也并沒(méi)有不對(duì)，但我們需要和后端工程師溝通，我們也需要和設(shè)計(jì)溝通，也需要和 PM 溝通，怎么做才是對(duì)這三方都比較有好處？

邏輯思維

在開(kāi)始寫某一段代碼的時(shí)候，想一下它會(huì)用在哪里，會(huì)重復(fù)用嗎？ 它以后會(huì)不會(huì)變，如果會(huì)變，那可以怎樣變？一般網(wǎng)頁(yè)結(jié)構(gòu)的變化，雖然有很多但是也有一個(gè)根據(jù)，這個(gè)根據(jù)就是可以預(yù)先估計(jì)好的。沒(méi)有一個(gè)案子，是不會(huì)「不改」的，很多時(shí)候你都是要一邊做一邊改，甚至可能會(huì)來(lái)個(gè)乾坤大挪移。當(dāng)真的需要發(fā)生變動(dòng)和修改的時(shí)候，你有什么對(duì)策？這些都是需要想好，并且建立在一個(gè)邏輯上。

通常專業(yè)的設(shè)計(jì)師，設(shè)計(jì)一個(gè)網(wǎng)頁(yè)的元素都是同質(zhì)性很高，等比或?qū)Ρ鹊?，所以代碼按理也是可以重復(fù)用的。所以為何你要學(xué)會(huì)用 CSS preprocessor （Sass，stylus，less），寫一個(gè) Mixin 或一個(gè)變量，一開(kāi)始用你會(huì)覺(jué)得很麻煩，但是用了你就回不去了，不但提高你的效率還提高了你的準(zhǔn)確率。

工程師的世界就如武林，大家都各自修煉，每天都有新的祕(mì)籍，大家都很好奇跑去修煉一下，希望有天成為武林高手。這也是提升你見(jiàn)識(shí)和專業(yè)的潛動(dòng)力，如果你沒(méi)有好奇心，看的和懂得東西太少，邏輯自然不會(huì)跟上時(shí)代。要保持不斷的學(xué)習(xí)，來(lái)磨練自己的邏輯思維。

邏輯思維某程度，就是你的程序?qū)I(yè)能力，除了能寫出來(lái)還要可維護(hù)，可閱讀。當(dāng)事情建立在一個(gè)很好的邏輯上，那么出錯(cuò)幾率就會(huì)比較低，和你工作的人也會(huì)比較愉快。

可以把一件事做的很好，那是師傅；可以把一件事做好和預(yù)測(cè)未來(lái)的事，那才是專家。

商業(yè)思維

PM、老板或者客戶，都會(huì)問(wèn)你，「你需要多少時(shí)間」，如果說(shuō)的太短，可能會(huì)做不完；如果說(shuō)的太長(zhǎng)，也不可能，這是一個(gè)怎么回答怎么死的問(wèn)題。有時(shí)候，需要換一個(gè)立場(chǎng)，站在第三方的角度思考。我們的完成度，和他們的完成度可能是不一樣的。

我們把案子的細(xì)節(jié)分成兩種情況，一種是你已經(jīng)有經(jīng)驗(yàn)，可以預(yù)估時(shí)間的；一種是你沒(méi)有做過(guò)或你很陌生的，你沒(méi)有時(shí)間估計(jì)的基礎(chǔ)。

那么提出一個(gè)，他們可以最低接受的標(biāo)準(zhǔn)，例如一個(gè) App 網(wǎng)站，最低標(biāo)準(zhǔn)需要一個(gè)首頁(yè)，和一個(gè)鏈接去下載 app 的 2 個(gè)按鈕，這些都是可以預(yù)估的。而剩下的，你需要 Research 一下，之后再給一個(gè)比較有根據(jù)的時(shí)間。估計(jì)一個(gè)案子需要多少時(shí)間做完，是非常非常的重要，因?yàn)槟阆牡氖且唤M人的時(shí)間，不是你自己的（除非你自己一個(gè)人做，或者你是老板）。如果你估算錯(cuò)了，后面就會(huì)延期，做不出來(lái)沒(méi)有很大的關(guān)系，最重要是把問(wèn)題解決，提出你的解決方法，什么樣的方法才可以達(dá)到解決問(wèn)題的目的。

換一個(gè)立場(chǎng)提出解決方案，對(duì)事情是有幫助的，對(duì)公司或客戶是有幫助的，客戶不會(huì)在乎你解決不了手機(jī)網(wǎng)頁(yè)看不到 20 個(gè)欄位的 table 那個(gè)問(wèn)題，但是客戶很樂(lè)意聽(tīng)你說(shuō)，這樣的 Table 不好看，可以換一個(gè)顯示的方法?？蛻粢膊惶谝饽闶怯?Rails 還是 php（有些是很在意，他們假裝他們懂），可以購(gòu)物和發(fā)文就好。

前端工程師可能很容易接觸到客戶的投訴，所以有些東西沒(méi)有想好，就會(huì)很麻煩。做個(gè)網(wǎng)站，換作你是網(wǎng)友或客戶，你會(huì)滿意你自己做的網(wǎng)站嗎？

設(shè)計(jì)思維

很多時(shí)候，前端工程師本身也是設(shè)計(jì)師，但是也有很多是本身是前端工程師也是后端工程師，設(shè)計(jì)和前端是分割不開(kāi)的。當(dāng)然我這里說(shuō)的設(shè)計(jì)，不是真的要你弄一個(gè)畫面或完整的設(shè)計(jì)圖。

It’s not just what it looks like and feels like. Design is how it works. —Steve Jobs

前端的設(shè)計(jì)是指一個(gè)畫面或元素，如何被執(zhí)行和創(chuàng)造，移動(dòng)或消除，這個(gè)設(shè)計(jì)在不同的寬度和高度，不同的裝置看，效果是怎樣，考慮進(jìn)去就是你的設(shè)計(jì)思維，怎么把設(shè)計(jì)師的畫面弄成一個(gè)活生生的網(wǎng)頁(yè)，要用設(shè)計(jì)師的角度去思考，才能有辦法把設(shè)計(jì)圖的概念充分的表達(dá)出來(lái)。

話說(shuō)早前，收到一個(gè)「設(shè)計(jì)圖」，上面有一個(gè)「X」，我問(wèn)客戶這是什么，他說(shuō)是「回上一頁(yè)」，為何回上一頁(yè)是「X」，這不是一個(gè) popup 也不是一個(gè) modal，同時(shí)這個(gè)圖上還有很多不同顏色和大小的「X」，分別代表了「刪除」、「關(guān)閉」、「滑下」，這是一個(gè)不太合理的設(shè)計(jì)。

設(shè)計(jì)的思維，會(huì)直接影響你寫的代碼結(jié)構(gòu)和網(wǎng)頁(yè)結(jié)構(gòu)，因?yàn)槟憧床怀鲈O(shè)計(jì)的重點(diǎn)在哪里，怎么寫才可以達(dá)到設(shè)計(jì)師要求的效果，你沒(méi)有辦法好好的組織你的結(jié)構(gòu)和元素，就無(wú)法好好把網(wǎng)頁(yè)拼湊出來(lái)。這不但大大降低了你的效率，做出來(lái)的東西也不會(huì)一致?？赡芤粋€(gè)網(wǎng)站，就出現(xiàn)幾種本該一樣，結(jié)果「很像」但是不一樣的按鈕，因?yàn)槟阌昧藥讉€(gè) class 和不同結(jié)構(gòu)來(lái)做。你一開(kāi)始就沒(méi)有好好思考設(shè)計(jì)。

你可以做什么

沒(méi)事要練功，F(xiàn)B 逛幾分鐘就好，不需要留戀太久。

做好一個(gè)網(wǎng)站，自己玩一下，給你朋友玩一下，問(wèn)一下他們的意見(jiàn)？多問(wèn)幾個(gè)。

多看設(shè)計(jì)圖，看思考一下你會(huì)怎么做。