觀點 | 2017 年前端初學者的生存指南
逝者如斯夫，不舍晝夜。
歷史在向前發展，前端的“摩爾定律”是每隔18個月難度會上升一次，過去的2016年我們不再回顧，展望2017年，對于初學者想要生存下來，該怎么辦？如果你有這個疑問，那么你就得好好閱讀一下，我這篇文章了。
數據不準，2017年2月19日搜索，來自拉勾網（吐槽：萬年不匹配）和智聯招聘。
PS：（請原諒我截圖了一Angularjs的JD）
看起來行業需求的重點都在各種框架的使用上，其實不然。做為初學者，一定要對前端行業有足夠的信心與耐心，你才可能走下去。前端是一個承上啟下的職業，上接產品，下接服務，還有一大幫的“藝術家”，在產品的前端實現上與視覺還原上，操心的事情會比較多，沒有耐心，很可能發生不愉快的事情。這也是我這樣的過來人，給予的小小建議。
經過前幾年移動和技術的發展，現在的前端可謂百花齊放了，在行業知識上，一定要選擇一個可能和你的專業比較接近的，不然行業知識的學習也是非常頭疼的事情。比如，現在的直播大火，如果你具備視頻專業的知識，在前端上處理編碼，視頻流，可能就會很得心應手，反之，你就要多多努力了。像數據可視化這一塊也是如此，真正的想做一款優秀的產品，行業知識和你的專業知識相結合起來，才能比較棒。
拋開行業知識不談，我們來談談專業。框架對于找到工作非常重要，但是對于職業的長久發展，框架倒是次要的。當你成為了一個框架的大師時，還怕不能快速成為另外一個框架的大師么？那么，2017年，我們該如何從基礎知識開始？首先，我認為，你一定要給自己一個良好的定位，PC端的工作就不要再去面試了（相信我，很多業務都在維護期，去了對于自己的職業發展沒有任何好處，除非你去的是BAT這樣的大廠或者比如團隊協作這樣的企業級市場應用）當然，如果是利用electron（https://github.com/electron/electron）來開發桌面應用，倒也可以考慮。不過，起點瞄向移動端，我認為是比較合適的。
如果有錢，一定要選擇Mac平臺，不說為什么，有機會去看看池老濕的文章就明白了，這玩意是生產力啊。在工具上，一定要選擇一個好用的IDE比如WebStorm或者編輯器Sublime Text，Atom，不要再搞Dreamweaver了。一個好用的編輯器，當你習慣之后，對于編碼會有質的飛躍。下載一個Chrome瀏覽器吧，雖然Devtools使用很簡單，有機會也多看一看這方面的資料，很多調試的小技巧，在定位問題時，對你會有很大的幫助。如果你真的選擇了Mac，請一定要配置好你的終端，比如zsh，oh-my-zsh（https://github.com/robbyrussell/oh-my-zsh），對于后面將要開展的工作，也會有較大的提升。
CSS上除了常見的基礎，盒模型，設置顏色，字體大小之外，布局應該可以從Flex布局開始學習。如果你有興趣，可以閱讀以下，我是怎么學習CSS的《技術 | 學習CSS的樂趣》。很多布局的方式，可以多從移動的角度來考慮，比如適配等等。（淘寶之前提出的rem方案，我認為是一個很不錯的實踐，適配的入門可以從此開始）另外，也要考慮一下預處理器方案，隨便選擇一個來入門吧，相信在第一天上班時，你的Leader就會告訴你，我們的CSS是基于什么預處理器來構建的。不要問為什么，工具在進步，把前端的門檻抬高了一些，我覺得CSS方面，初學者可以從這些來入門。
至于HTML，很多input標簽的屬性，新的標簽，是你一開始就要學習的了，不過一般很少有公司會考察這些，適當的了解一下就好，不用太專注這方面的知識（后期再慢慢補全）。
動畫倒是一個很有趣的事情（說實話太炫酷的，我也做不出來），不過，你一定要了解一下CSS3那幾個動畫的屬性，可以通過這些屬性來寫一些常見的動畫。至于如何組合使用，以后可以慢慢學，相信我，動畫是一個水很深的地方，不是動畫專業的設計師，很難還原一個動畫的思路，想想雙十一出來的那個超炫的動畫，沒有專業的動畫設計師來設計動畫，分解思路，正兒八經的開發是很難做的出來（當然，如果你非常熱愛動畫的實現算法和思路分解，也一定能實現出來）。
接下來可能是我們要重點關注的一部分，這個部分又分為三個小部分。
-
編譯構建配置
-
ES5 ES6
-
選擇一個入門的框架
對于編譯構建，沒有什么好選擇的了，深入的可以不用了解，但一定要了解Node.js是怎么玩的。目前來看（包括未來）前端的構建工具，必然都是基于Node.js的生態來玩。兩個東西，一是package.json的配置，二是如何運行Node.js。對于package.json，其實也有三個地方，知道一下即可。一是dependencies和devDependencies的區別。二是scripts的配置，比如pre前置之類的（玩轉NPM）。三是知道如何在package.json里配置必要的meta元數據。至于在兩個平臺不同的運行規則（可能會有錯誤），Mac平臺上大部分是沒有運行sudo權限，而Windows平臺則要根據具體的問題去Google了。當你遇到這些問題時，一定不要被大段的棧錯誤信息給嚇著了，找到一些必要的錯誤信息，利用Google搜索一下，相信，都能搜索出來。
目前大量的構建都是基于webpack，你可以不用學習如何寫loader或plugin，但是一定要知道它是如何配置的，一個entry，一個output，一個loader，一個plugin。
技術 |webpack實踐最后一篇
前端開發使用的腳本語言是JavaScript，而瀏覽器廠商基于此語言幫我們實現了很多具體的接口，比如DOM，HTML5的新API等。這門語言，目前發展到了ES 2015，也就是大家常常說的ES6。而ES5的實現，也是你需要去學習了。語言語法上，我認為JavaScript是一門很簡單的語言，入門是次要的，你可以到后期再來學習一些其他的高級特性。首先，基于瀏覽器的前端開發，說白了很多都是在用JavaScript腳本來調用瀏覽器廠商幫我們實現好的DOM API，以前大家都用document.getElementById來獲取一個元素，而現在我們有了更好的選擇：document.querySelector，即可以選擇class元素，也可以選擇id元素，DOM是你繞不過去的一道坎。其次，你要了解一下比較常見的HMLT5 API實現，比如Element.classList，localStorage，Web Sockets，requestAnimationFrame，XMLHttpRequest Level 2等等。如果你參與的面試項目跟繪圖有關系，可能你還需要學習一下Canvas，WebGL等。這些在應用過程中已經有了大量的實踐，相信每一個面試都會講到這些。
對于語法的升級版ES6也是你不可能繞過的一道坎，Safari 10已經全部支持了ES6語法，Node.js就更不用說了。當然現在具體的產品，應該還是會使用Bable這樣的工具來轉義（看看，是不是又跟編譯構建有關了）。不過，在業務上，初學者并不需要一開始全部都學習，一定要挑幾個重點，比如Class類，繼承，對象的解構，模塊的導入與導出，尖頭函數，常量與let等，其他的都可以在后期慢慢學習。語言語法上，我們不多說，這些都是你必須要面對的。
然后是一門框架的選擇，2016年里社區中經常拿來比較的應該是Vue和React了，這兩門框架代表了不同的生產方向，至于對比，我建議大家可以在知乎上搜一搜，相信可以能找到滿意的答案。重點是，你必須挑一門出來，在“使用”的層面上，能達到一定的預期和結果。
我們來說一說React吧，對于它本身的庫而言，你可能要明白的東西不多，三個概念就能完成業務邏輯：
-
生命周期（那幾個方法名都是固定的，用心記一下）
-
state 更新 與 props傳遞
-
如何注冊事件
大部分情況下，如果你寫一個組件，很可能只需要實現這三個方面的東西。不過，你想搭建起一個完整的應用，也不難，加上react-router，redux，Promise和axios就好。react-router也是一個配置起來非常簡單的路由庫，其實redux也非常簡單，一開始，我建議大家不要去搞什么服務端渲染，深度優化之類的，初學者貪多很容易打擊自信心，這玩意熄滅之后，是非常老火的。
最后關于專業，我想說一說關于HTTP，前端實現的Ajax這樣的解決方案。我們知道前端除了還原視覺之外，最重要的是根據業務數據來渲染頁面，然后根據業務數據來實現特定的業務邏輯。這一方面是和HTTP打交道的交互過程，Ajax已經談了這么多年，相信大家對于它應該不陌生了，至于跨域就更不用說了，JSONP，跨域頭報文（Access-Control-Allow-Origin）。HTTP是這些解決方案非常重要的一個基礎，有機會一定要好好了解一下，什么是報文，這些請求到底是如何握手交互的。
大廠的面試經：
不管是校招還是社招，都沒法避免兩種問題，一是：數據結構與算法，二是橫向擴展，（比如Hybrid開發，Node.js開發，桌面應用開發等），具備的職業經歷越多，技術棧經驗越豐富，才更能有機會脫穎而出。拋出來一個具體的問題：Hybrid的離線包機制，這玩意在技術點上可能不是很復雜，但是在業務實現上牽扯到了方方面面，既要有規范的制定，又要有通盤的權衡（前端，服務端，Native），經驗越豐富，越能少走歪路。
溝通也是非常重要的一個因素，如果在交流的過程中，一些問題你很難組織起語言，那么就說慢一點吧，說清楚一些，讓面試官聽明白，你要表達的意思，不然的話，詞不達意，就非常有意思了。
路漫漫其修遠兮，吾將上下而求索，大家努力吧。
來自：http://mp.weixin.qq.com/s/1sCU3WzRjiLcSPV0Soqi2A