觀點 | 2017年前端初學者的生存指南

時間 2019-12-11

標籤觀點 2017年前端初學者生存指南简体版

原文原文鏈接

觀點 | 2017年前端初學者的生存指南前端

櫻止語react

2017-11-01 16:37 · 字數 3256 · 閱讀 0 · 日記本webpack

逝者如斯夫，不捨晝夜。ios

歷史在向前發展，前端的「摩爾定律」是每隔18個月難度會上升一次，過去的2016年咱們再也不回顧，展望2017年，對於初學者想要生存下來，該怎麼辦？若是你有這個疑問，那麼你就得好好閱讀一下，我這篇文章了。git

數據不許，2017年2月19日搜索，來自拉勾網（吐槽：萬年不匹配）和智聯招聘。github

PS：（請原諒我截圖了一Angularjs的JD）web

看起來行業需求的重點都在各類框架的使用上，其實否則。作爲初學者，必定要對前端行業有足夠的信心與耐心，你纔可能走下去。前端是一個承上啓下的職業，上接產品，下接服務，還有一大幫的「藝術家」，在產品的前端實現上與視覺還原上，操心的事情會比較多，沒有耐心，極可能發生不愉快的事情。這也是我這樣的過來人，給予的小小建議。面試

（我有一個前端學習交流QQ羣：328058344 若是你在學習前端的過程當中遇到什麼問題，歡迎來個人QQ羣提問，羣裏天天還會更新一些學習資源。禁止閒聊，非喜勿進。）算法

通過前幾年移動和技術的發展，如今的前端可謂百花齊放了，在行業知識上，必定要選擇一個可能和你的專業比較接近的，否則行業知識的學習也是很是頭疼的事情。好比，如今的直播大火，若是你具有視頻專業的知識，在前端上處理編碼，視頻流，可能就會很駕輕就熟，反之，你就要多多努力了。像數據可視化這一塊也是如此，真正的想作一款優秀的產品，行業知識和你的專業知識相結合起來，才能比較棒。json

拋開行業知識不談，咱們來談談專業。框架對於找到工做很是重要，可是對於職業的長久發展，框架卻是次要的。當你成爲了一個框架的大師時，還怕不能快速成爲另一個框架的大師麼？那麼，2017年，咱們該如何從基礎知識開始？首先，我認爲，你必定要給本身一個良好的定位，PC端的工做就不要再去面試了（相信我，不少業務都在維護期，去了對於本身的職業發展沒有任何好處，除非你去的是BAT這樣的大廠或者好比團隊協做這樣的企業級市場應用）固然，若是是利用electron（https://github.com/electron/electron）來開發桌面應用，倒也能夠考慮。不過，起點瞄向移動端，我認爲是比較合適的。

若是有錢，必定要選擇Mac平臺，不說爲何，有機會去看看池老溼的文章就明白了，這玩意是生產力啊。在工具上，必定要選擇一個好用的IDE好比WebStorm或者編輯器Sublime Text，Atom，不要再搞Dreamweaver了。一個好用的編輯器，當你習慣以後，對於編碼會有質的飛躍。下載一個Chrome瀏覽器吧，雖然Devtools使用很簡單，有機會也多看一看這方面的資料，不少調試的小技巧，在定位問題時，對你會有很大的幫助。若是你真的選擇了Mac，請必定要配置好你的終端，對於後面將要開展的工做，也會有較大的提高。

CSS上除了常見的基礎，盒模型，設置顏色，字體大小以外，佈局應該能夠從Flex佈局開始學習。。不少佈局的方式，能夠多從移動的角度來考慮，好比適配等等。（淘寶以前提出的rem方案，我認爲是一個很不錯的實踐，適配的入門能夠今後開始）另外，也要考慮一下預處理器方案，隨便選擇一個來入門吧，相信在第一天上班時，你的Leader就會告訴你，咱們的CSS是基於什麼預處理器來構建的。不要問爲何，工具在進步，把前端的門檻擡高了一些，我以爲CSS方面，初學者能夠從這些來入門。

至於HTML，不少input標籤的屬性，新的標籤，是你一開始就要學習的了，不過通常不多有公司會考察這些，適當的瞭解一下就好，不用太專一這方面的知識（後期再慢慢補全）。

動畫卻是一個頗有趣的事情（說實話太炫酷的，我也作不出來），不過，你必定要了解一下CSS3那幾個動畫的屬性，能夠經過這些屬性來寫一些常見的動畫。至於如何組合使用，之後能夠慢慢學，相信我，動畫是一個水很深的地方，不是動畫專業的設計師，很難還原一個動畫的思路，想一想雙十一出來的那個超炫的動畫，沒有專業的動畫設計師來設計動畫，分解思路，正兒八經的開發是很難作的出來（固然，若是你很是熱愛動畫的實現算法和思路分解，也必定能實現出來）。

接下來多是咱們要重點關注的一部分，這個部分又分爲三個小部分。

編譯構建配置

ES5 ES6

選擇一個入門的框架

對於編譯構建，沒有什麼好選擇的了，深刻的能夠不用瞭解，但必定要了解Node.js是怎麼玩的。目前來看（包括將來）前端的構建工具，必然都是基於Node.js的生態來玩。兩個東西，一是package.json的配置，二是如何運行Node.js。對於package.json，其實也有三個地方，知道一下便可。一是dependencies和devDependencies的區別。二是scripts的配置，好比pre前置之類的。三是知道如何在package.json裏配置必要的meta元數據。至於在兩個平臺不一樣的運行規則（可能會有錯誤），Mac平臺上大部分是沒有運行sudo權限，而Windows平臺則要根據具體的問題去Google了。當你遇到這些問題時，必定不要被大段的棧錯誤信息給嚇着了，找到一些必要的錯誤信息，利用Google搜索一下，相信，都能搜索出來。

目前大量的構建都是基於webpack，你能夠不用學習如何寫loader或plugin，可是必定要知道它是如何配置的，一個entry，一個output，一個loader，一個plugin。

前端開發使用的腳本語言是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），經驗越豐富，越能少走歪路。

溝通也是很是重要的一個因素，若是在交流的過程當中，一些問題你很難組織起語言，那麼就說慢一點吧，說清楚一些，讓面試官聽明白，你要表達的意思，否則的話，詞不達意，就很是有意思了。

路漫漫其修遠兮，吾將上下而求索，你們努力吧。