如何成為一名合格的前端工程師
現如今，前端已經是一個異常響亮的行業名詞，正彙聚各方好漢，華山論劍日益激烈。據2019最新的程式設計語言排行顯示JavaScript已排名第七，由此可見，前端的未來不是夢。
要學習前端，必然先了解前端：
前端可以說一共經曆了四個時期：原始社會（早期網際網路、Netscape ）、石器時代（PHP、JSP網頁嵌套 MVC為主）、鐵器時代（jQuery 讀寫Dom）、工業時代（MV* Vue/React/Angular/Nodejs/小程式/Chrome V8）;
可以說現在的前端從業者很多都是從石器時代或者鐵器時代過渡而來，我本身也是Java出身，後來不經意間從JSP轉成了JS.
亂世出英雄，早期的前端沒有地位，沒有名份，紛亂嘈雜，才造就了今天的輝煌。
錯過了石器時代、鐵器時代，如今我們迎來了輝煌的工業時代，Vue/React/Angular/小程式/Nodejs等一躍成為當下最時髦和流行的前端架構和語言，也希望各位前端同仁把握好機會。
那麼我們如何才能夠成為一名合格的前端工程師呢？ 我将從兩個角度進行分享：硬素質和軟素質。
硬素質主要指個人技能、自身能力；軟素質主要指思維和文化，更偏思想層面。
籠統的講：1-2年的同學，主要的任務：學習（程式設計基礎、項目架構、調試技巧、公司文化、溝通協作）、傳遞（任務）；3-5年的同學：曆練（項目架構、子產品封裝、公共機制、解決問題能力、優秀插件）、超預期（超預期完成任務、技術分享、解決問題、Review、誇團隊協作）；
一、硬素質
那麼我們怎麼做，才能具備這樣的能力呢？
作為工程師，個人技術能力是避不開的話題，也是面試找工作、加薪晉升的重要名額：
- 前端架構 - 快速跟進；
工欲善其事，必先利其器；作為前端工程師，首要的就是磨刀利器；
我們需要熟練掌握一個前端MV*架構，我個人首推Vue，如果所在的公司使用的是React或者Angular，那麼就要快速跟進，晚上補習相應的架構，確定能夠傳遞Leader的任務；
學習架構，我們最好先去官網看文檔，跟着文檔和Demo進行本地練習，如果覺得速度過慢，可以通過慕課、部落格、Github等課程和資料進行加強訓練，但是我們始終要明白，我們學到的僅僅是方法和技巧，因為每個公司的項目以及相對應的業務場景都是不同的，我們不可能學到和公司一模一樣的業務。
同時，我個人也強烈推薦大家再學習的過程中主動做筆記，可以把自己的心得和過程通過部落格表達出來，變相的輸出和分享，我個人再很長一段時間經常會把一些好的東西通過部落格分享出來。
目前推薦的學習部落格：掘金、SegmentFault、簡書、慕課手記、優質的公衆号、知乎（看大神心得）、NPM（善于找插件）、Github（善于找源碼）、SEO（谷歌、百度）
2.前端基礎 - 勤學苦練；
基礎不牢，地動山搖；
前期，我們需要熟練掌握H5/C3開發，掌握常見的H5标簽（header/footer/section/video/canvas…）和常用的C3樣式（flex/transition/animation…），能夠很好的還原UI設計稿，這個階段可以多Review其它同僚的代碼，互相學習和借鑒；
同時JavaScript依然是我們需要掌握的重心，面試的同學，需要多刷題；工作的同學，需要多掌握基礎程式設計，業餘時間加強Demo練習。（DOM/BOM 常用API、數組[splice/slice/every/some/sort/reverse/map]、ajax、跨域[jsonp/CORS/nginx代理]、閉包/作用域、原型、Cookie、HTTP通信、HTML渲染流程、事件、浏覽器緩存）
3. 前端調試能力 - 必備技能
再開發階段，調試應該是我們每一個工程師都需要掌握的技能，調試能夠幫助我們發現問題，并解決問題，能夠提高我們思考能力。
調試的方式通常：
- F12 在浏覽器中找到源碼，進行斷點調試。（必須學會如何使用浏覽器斷點）
- 通過再前端或者Node中寫console進行日志輸出，分析日志做出相關判斷。
- 再項目中debugger，進行斷點調試，Node項目借助于webstorm/vs code依然可以debugger斷點調試。
- Node項目可借助于log4js插件做日志輸出。
4. 解決問題能力 - 快速提升
解決問題的能力再一個團隊當中非常重要，往往隻有素質過硬的同學才更有能力應對；但我們每一個前端同學都不應該忽視，它依然是可以通過訓練來進行提高的。解決問題無非就是發現問題，并找到解決方案；
如何發現問題呢？
- CodeReview發現他人問題；
- 送出測試，Bug暴露；
- 上線後，Bug漏測。
- 業務不了解，功能開發錯誤，造成重大損失
如何解決并避免問題呢？
- 調試發現問題的根本
- 開發前，充分了解業務有助于避免問題
- 提測階段通過代碼Review學習他人高品質代碼，并排除隐患
- 線上事故 case study，集體Review，避免二次事故
- 做好筆記，掌握方法，學會套用
- 跟着團隊Leader一起多學習解決問題的方法和技巧
5. 業務了解能力 - 逐漸跟進
不了解業務，注定不會成為一名合格的工程師，技術是為了更好的業務做鋪墊。
項目的各個階段主要分為：需求調研（産品）->需求讨論（可無 或産品/技術）->需求宣講 -> UI設計->開發->提測->預發->回歸測試->線上部署->日志監控->復原（必要時）
在前期我們必須充分了解需求，搞懂互動邏輯，避免後期返工和産生大量Bug.
适當的時候，可以針對某一功能點做專項讨論，以尋求利益最大化；了解需求的同時也要敢于挑戰需求，不要一味的做代碼的搬運工。
Bug往往也是衡量個人績效和品質的一個次元，希望大家能夠重視，再使用JIRA等Bug工具的時候，能夠細心的将每一個問題産生的原因和解決方法描述出來，養成一個良好的習慣。
6. 知識架構體系 - 穩步輸出
在此，我希望大家能夠結合自身情況，能夠梳理出來一個簡單清晰的知識結構體系，當然這個需要随着時間不斷積累，下面我給大家大緻列出一個前端知識結構體系供參考：
知識的整理，更有助于個人能力的提升，與此同時，我們還需要認識到我們自己再團隊當中的作用和角色，以下我給大家一個模闆參考：
每一個團隊内部都有一個梯隊，Leader通常會規劃出每一個人在梯隊當中的位置，這個對于個人提升是相當的有幫助，大家可以根據這個模闆來總結出自身的角色和定位，然後結合上面的知識結構體系進行針對性訓練；
7. 輪子 - 學、練、造
輪子，通常都是大神級别的人物來創造的，但是其實它并沒有那麼可怕；
1-3年的前端同學，我個人建議多用輪子，通過NPM/Github等多找一些對項目有幫助的優秀輪子，快速高品質傳遞任務。
3-5年的前端同學，此時就要在完成任務的同時，搞清楚一些原理和底層設計，很多大神的輪子，前期也都是模仿和參考，是以我們這一類的同學，同樣需要找一個優秀的插件進行解讀，并嘗試在此基礎上進行改造，日後才有機會創造輪子。
輪子的作用不言而喻，事半功倍，好比九陰真經. 但前提要修煉好内功。
二、軟素質：
下面為大家分享一點軟素質的經驗和心得，軟素質在我們晉升和成長的道路上同樣很重要：
- 溝通了解
- 優秀的團隊一定需要良好的溝通，從哪些方面可以展現呢？
-
- 遇到不懂的問題，需要和同僚溝通提問。
- 開發設計階段需要和産品溝通，充分了解産品。
- CodeReview階段用于發表看法，求同存異，了解彼此代碼初衷。
- 接口調試階段同樣需要和後端同學良好溝通和對接，出現不合理結構或者缺少參數字段，能夠及時有效溝通，不要是以給前端帶來過度備援開發。
- 技術分享階段同樣需要有節奏，有規劃，合理配置設定時間和講解。
- 技術讨論，更需要我們在溝通表達上有自己的見解和技巧。
2.價值觀：
價值觀這個概念偏抽象，很多同學并不知道什麼是價值觀，我們面對價值觀應該有什麼樣的行動？
那麼我個人針對價值觀做一些分享和心得：
我們所接觸的價值觀主要是指公司對員工所需要具備的的員工價值觀，它在我們晉升，加薪階段甚至在一定程度上超過了技術能力。
分别是：
團隊合作、擁抱變化、敬業度、責任心和自律
團隊合作：個人需要有凝聚力，更需要有團隊精神，十根筷子牢牢抱成團的道理不言而喻。
擁抱變化：業務快速發展，公司戰略不斷調整，技術同樣日新月異，那麼我們自己就要跟随公司節奏，時代潮流，主動擁抱，跟随調整，否則隻會淘汰出局。
敬業度：這方面主要指大家能夠全新為公司服務，為公司擔憂，在職謀職，很多公司可能會拿員工工作時長以及對公司的付出來衡量員工敬業度，雖然很虛，但确實是HR考核的依據。
責任心和自律：同樣根據需要員工具備一顆責任心，有擔當，這同時也包含了員工的自驅力，就是主動創造價值。
以上四點都是價值觀層面的概念，看起來确實很虛，但是希望我們前端同學能夠重視，根據實際情況變相處理。這句話并不是要求大家吃喝睡都在公司，把公司看作比生命還貴，這肯定不可能，我們要靈活處理，明白它是晉升加薪的考核标準和參考依據。
3.程式設計和産品思維
程式設計思維和産品思維，也是軟素質層面需要具備的能力，但相比價值觀而言，我們更需要具備，因為它是我們作為工程師需要的必備能力。
需求和産品的背後一定要解決某方面的問題，否則這個需求就是僞需求。同樣我們面對産品和需求，也要了解背後的價值，找到最佳路勁，不要盲目跟風。
舉個例子：曾經我們要做一個釘釘的審批流，有一個修改的功能，修改背後的問題就是會遇到填寫錯誤，那麼問題來了，我們是不是真的有必要把複雜的修改功能開發了呢？其實思考一番，發現沒有必要，我們完全可以廢除，從建立一個審批流，這樣一來成本就降到最低，同時建立并沒有耽誤太多的時間，這樣一來就是利益最大化。
4.團隊影響力：技術分享、誇團隊合作、開發高效工具（DevOps、UI）
到此，我們做一個總結：
在漫長的人生道路上從來都不是一帆風順的，我們要始終保持學習的心态、堅強的自驅力、正确的價值觀，直面困難和敢于挑戰，合格的工程師，就是永不服輸。
最後做一個官宣：耗時半年時間傾力打造的《Vue全家桶高仿小米商城》課程于下周一慕課上線，是不是很驚喜，抓緊上車！
項目體驗位址：http://mi.futurefe.com
帳号密碼：admin/admin jack/jack
作者：河畔一角（我的老師）
連結：https://www.imooc.com/article/296962
來源：慕課網