只會 HTML+CSS+JS 的人如何進階前端開發工程師？

12-29

我現在只會HTML+CSS+JS以及jquery和bootstrap等框架，我看到很多公司招前端都要求掌握什麼angularjs，具有seajs模塊化開發思想以及其他一些學校根本就沒教過的東西，這讓我很迷茫啊？一方面很好奇那些能進BAT的前端他們是如何學習HTML+CSS+JS以外的這些東西（我好多同學甚至不知道有這些東西），另一方面也希望能有前端大牛能指明一條科學合理學習路線，在此謝謝各位能百忙之中抽空回答我的問題。

簡單的一個方法就是：深入問題、抽象問題、解決問題、體系化總結。這裡假設你已經比較熟悉 HTML、CSS、JS 了，已經可以實現任何視覺稿、需求描述的前端界面和交互功能。

舉一個實際的例子：

讓你做 10 個前端頁面。因為你會 HTML、CSS、JS 當然可以順利的一個個頁面完成，但是你深入去看這個需求，你會發現這 10 個頁面會有一些共通之處，有些地方的樣式、功能其實是類似的或者一樣的。

這時候你可以把這個需求抽象一下，從做頁面變成先把共通之處做成模塊，然後創建十個頁面把能復用的模塊加進去，然後再加一些自定義的東西就可以了。那麼你現在就要解決組件化、模塊化的問題，你需要了解組件化的最佳實踐、適合你需求的組件化的技術選型等。

解決完問題，再抽象思考、體系化總結。把你這個解決組件化、模塊化問題的過程梳理一下，你會發現還需要有組件開發規範、組件開發腳手架、打包構建工具、如何封裝提高可復用性的最佳實踐等等，這樣可以方便其他人也按照你的思路來開發，實現更多模塊復用。最後的產出基本上就是一個簡化版的 ant-design。

然後你就往進階的路上前進了一步，體系化總結是看寒老師文章學到的。推薦 @winter 寒老師的一個前端的自我修養

來，先來聊聊我之前作為面試官面試前端開發的一些經驗，然後再回答這個問題。

面試的時候，我通常會問到這麼一個問題：
列舉一下你熟悉的CSS屬性和常用值（HTML元素/jQuery方法/原生js方法……），並講講其用處和注意事項。

為什麼要問這個問題呢？

思維敏捷的知友也許馬上會理解考核點，並開始指責我：你這問的只是一些基礎API嘛，面試前多背一背就能應付了！

沒錯！我要看的就是面試者有沒有把API背下來！

我理想的技術面試官的工作實際上是一個「聽」的過程，最好我一句話都不必說，你把所有需要讓我知道的，包括態度、能力、知識範圍都主動得講出來。我只負責寫下對你的評價即可。這有點類似《中國夢想秀》之類的選秀類的電視節目。其實仔細想想面試的過程不也是才藝展示的舞台嗎？

針對這個開放性的問題，回答的時間長短和流利程度大概就能評價面試者基礎知識的掌握情況了。不要跟我說表達能力的好壞。我見過太多不善言談有些內向甚至自閉的人，在談起自己熟悉的領域宛如長了三寸不爛之舌。講不出來更多的是因為你不熟悉。

一個可以將這些API列舉如流的人也許確實項目經驗豐富熟能生巧，也可能是面試前臨時抱佛腳背下來。不過這不重要，
只要腦袋裡裝著這些API；
只要我說display flex的時候知道該怎麼做；
只要PM講在網頁播放視頻的時候知道HTML5的播放器；
只要看到網頁渲染優化教程時那些會引起頁面重繪的方法時不陌生；
……
這些基礎對前端入門者已經足夠了。

之前知乎上看到過對「學編程要不要背API」這個問題的討論，各種觀點五花八門，而我的觀點很明確：如果一個初學者連API這麼簡單的知識都學不會或者懶得記憶，那我會很懷疑當程序遇到疑難雜症和各種虐心bug時的處理能力。更何況前端工作原本就是以知識點瑣碎、技能樹龐大著稱，記憶上的懶惰和障礙也許成為很大的障礙。

熟記API的另一個好處是容易形成「code flow」。面對一個需要編程實現的業務功能，
有經驗的程序猿一般是這樣做：
解決這個問題分三步：a、b、c，其中b需要查一下怎麼實現——&>&>
對於b，google之——&>&>
理一下處理邏輯——&>&>
啪啪啪啪——&>&>
搞定！

而剛入門的菜鳥可能會這樣做：
簡單理一下思路，開始寫代碼——&>&>
怎麼發ajax請求來著？百度之——&>&>
ctrl+c ctrl +v ——&>&>
怎麼截取字元串來著？百度之——&>&>
ctrl+c ctrl +v——&>&>
……——&>&>
終於搞定了，可以交差了！——&>&>
有bug？這段代碼是我從網上複製過來的，我咋知道怎麼回事！

有過這種經歷的人才可以體會到這種感覺的美妙之處。這種不間斷的代碼流的編程方式遠比時斷時續的方式有成就感得多，尤其是配上機械鍵盤。這才是機械鍵盤的正確使用方式好么~

當然，記憶API的方式很多，項目經驗豐富的人也許在API使用過程中不知不覺記住了；但是作為初學者，死記硬背或許是縮小差距的捷徑。

從我們公司面試的結果看來，考察API熟悉度的這個問題質量還是很高：篩選出來的面試者基礎都很紮實，大多數都有很強的求知慾，未來潛力很大。

我作為面試官的面試經歷分享完了，可能對大多數初學者會有一些借鑒意義吧。

關於題主的這個問題，我其實也已經回答了，總結一下：
如果你想成為前端工程師，但是很迷茫不知道該怎麼走，那麼我就提一條很實際的建議——從背API開始寫代碼，把每個API（包括屬性、值、參數、返回值）都記下來，參照例子敲一遍代碼。

當然，這只是第一步，也是最不需要拼天賦的一步。走完這一步，在帝都找個小公司的前端工作應該問題不大。未來的路還很長，也會有更多困難，該怎麼走，後面再講吧。

良心出品，源源乾貨，沒有廣告~如果覺得有點道理，就點個贊關注下我唄~

謝邀。

這麼好奇進BAT的前端學什麼，那給你一個天碼營出品的前端工程師的面經，拿的是BAT前端開發Special Offer。看看考察什麼，自然知道要學什麼了。

----------------------------------------------------------------------------------------------

至今已到手百度前端Special、騰訊前端Special、網易遊戲研發、阿里前端（網傳白菜價）、還有一些小公司，如知乎等等。

有些筆試是要求保密的，在此不便多說。主要寫面試經歷。在經歷這二十多輪的面試後，我更加深信了面試成功與否不僅在於實力，還有運氣、緣分、還有氣場。暫且按照面試過程的相似度來分小節記述吧！

阿里、騰訊

我在騰訊和阿里的面試都偏重項目，沒有深入地探討技術細節。和面試官討論的問題也多有重合。所以把他們一起來記錄。

很早阿里就開始面試了，這是BAT中我面試最早的一家。一共3面，首面技術，二面工程，三面是總監。一個多月後拿到傳言中的10k Offer，已被我拒絕。騰訊的工作環境相當贊，是我在面試中見過最好的。一共5面，首面技術，二、三、四、五什麼都問。。。Special Offer。

一面上來基本是做幾個JS，CSS題目，然後開始各種問CSS。想必這是前端工程師標準的一面流程。涉及的問題就更加普遍了：

寫一個兩欄的布局，左邊自適應。
老老實實寫就好了，float、absolute、table都可以實現，可以問問面試官有什麼要求。再談一談利弊即可。
什麼是JS閉包？然後來一道題，基本都是網上能查到的。

還有就是稍微問一點偏門的，比如阿里一面讓我用CSS寫一個轉圈的球。正好帶了我的Macbook，分分鐘寫了一個出來，面試官表示非常滿意。

二面一直在談項目，碰到很多經典的問題：你做過的最有挑戰的項目講一講？最有成就感的事情呢？你有什麼缺點？為什麼想來我們這裡？隱約能感受到文化相符度（culture fit）的考察。

問到項目我就談Onboard和天碼營。比如天碼營前後台分離的架構，Node伺服器和HTTP/Websocket代理，Onboard單頁App，CSS、JS的模塊化（JS loader，AMDCMD，LESS/SASS）實踐……有一個Git的問題被問到很多次：git pull和git fetch有什麼區別？這個問題你可以請教Ricky，是他告訴我的。

知乎、百度

我感覺知乎、百度等面試過程更注重編碼能力和技術細節的考察，在這裡統一記述。知乎5輪面試，很早就給正式Offer了。百度3輪面試，Special Offer。

CSS 問題：

box-sizing是什麼東西？CSS盒模型有兩種：border-box和content-box，計算寬度的方式不同。
float和absolute布局有啥區別？兩者都會脫離文檔流，但前者仍會佔據位置，後者會覆蓋文檔流中的其他元素。
Node.js是怎麼實現並發的？可以去參考一下libuv、cpio……
Cookie和Session有什麼區別？
大頁面優化、迴流和重繪（通常會和table一起問，它默認並非流式布局）

我簡歷里有AngularJS，所以有一些AngularJS的問題。

知乎也是重度AngularJS用戶。

AngularJS的依賴注入是什麼？雙向綁定是什麼？
Service和Factory有什麼區別？這是框架細節了，這兩個的本質都是Provider的shortcut。

知乎問我AngularJS有讓你不爽的地方嗎？看來AngularJS讓知乎很不爽，此前我們做的Onboard已經實現了完整的Angular單頁App。其實只要合理地控制複雜度、加上優雅的設計、以及代碼風格控制，完全可以很爽。

華為、網易遊戲

除了前端，我還面試了很多C++工程師，包括華為、網易遊戲、還有一些小的遊戲公司。小公司當然都給Offer了，然後我不好意思地拒絕他們（PS：確實剛開始面試不知自己幾斤幾兩騙了好多小Offer）。

網易遊戲是最贊的，面試半天時間，兩天後直接簽發正式Offer。技術終面的面試官直接簽發offer，HR只負責組織流程和維護秩序。

這些公司考察的都是C++和後台相關的題目了，在網上都可以查到大把的答案：

STL熟悉嗎？C11呢？用C11寫一個演算法，找出所有1,000,000以內的質數。
虛函數是怎麼實現動態聯編的？多繼承時虛函數表是怎樣的？
TCP的三次握手和四次握手，為什麼要四次？
IPC有哪些方式？匿名管道為什麼只能讓父子進程共享？
求解最鄰近點對問題、單源最短路徑問題（書上有，分治策略）
還有一些小演算法題記不清了，這些通常不會太難。

一點感悟

感覺面試不同於筆試，正確與否真的不重要。首先一點要保持放鬆，不要慌。不過當你已經被要求做過幾十次自我介紹之後，想必你也不會再慌了（我都想吐了）。其次要保持主動，不要因為不會做就卡在那裡，說說你想到了什麼或者你做過什麼類似的，這樣能夠引導面試官來問你擅長的東西。

比如我被問到如何實現視差滾動時，也懶得寫CSS了，直接拿裝B遊戲的背景山脈來說事。然後就開始扯這個小遊戲了……

另外前端工程師個人博客/網站是很重要的。雖然並不是必須的要求，但你在整個面試過程中讓面試官無聊的時候看看你的作品還是蠻好的。

實習重要麼？重要！實習至少可以保底一家公司，如果你不需要保底的話當然可以不實習。身邊很多同學已經印證了這一點。其實我沒有實習過，是因為我有更重要的事要做。

http://weixin.qq.com/r/50nZwQ-EF1JorUui9xz1 (二維碼自動識別)

前端開發工程師

都不知道你所謂的這個會是什麼境界
這麼說吧你不會用純css畫大白，就先爭取花大白，不會用js寫插件就爭取寫插件這些都會了那我覺得根據工作需要你自己就都會有判斷就不會來知乎問了而且知乎里關於這樣的問題優質的答案一搜一大把

前端開發不就是html css和js嗎。

你如何定義「會」的？這就好比你說我會語數外政史地物化生，請問我如何考上大學。多練多學啊，做項目啊。

我再加兩條吧，做計算機這行當，有些基礎知識你還是要會的，比如面向對象，設計模式，數據結構與演算法等等。

精熟夠了 js框架都是給不會這些人用的 seo都是屎

要學點後台，不然怎麼和後台那幫傢伙撕逼

現在越來越多的公司在招聘的時候，傾向於尋找全棧工程師。

所以，不要只局限於前端，還要多了解學習後端的知識，無論是對你目前的工作的提升，還是在今後的職業路徑的拓展，都很有幫助。

可以看看這個Web全棧架構師，對標百度T6-T7 - 網易雲課堂，學習思路系統清晰，幫助有一定基礎和經驗的前端開發人員，快速提升技術達到百度T6-T7左右水平，可以借鑒。

哎，會後台嘛，不會的話先了解下，說實話，作為前端一提到後台的東西就開始抗拒的那些人，我是挺鄙視的，你要路線，那我就結合自己情況給點建議。

你說你學過這些，HTML+CSS+JS以及jquery和bootstrap。後面兩個框架拿掉，這兩個沒有啥學習成本，但是這也就是說你做基本的靜態頁面沒有問題。

後台可以學習node省去語法的學習成本。模塊化這個思想很早就有了，但是感覺直接從webpack入手就什麼都懂了，既然要入手webpack那就可以入手下react，但是考慮到react官網文檔跨躍性太大，現在已經完全es6語法了，我記得一個月前，還是有es5語法，它本來是簡單到不能再簡單東西，這下好了，估計你學起來就辛苦點，vue文檔寫的好，但是有個缺點，它重視單文件組件化思想，但是這一點給新生的指引太少了，有react經驗的人去看這文檔幸福的不行。沒有經驗的人去看這文檔，那前面api看懂了，一到結合webpack就蒙蔽。所以建議先學react。這又意味著es6語法也要看下，所以是webpack先，react一起，es6語法一起。

這個時候，學react-router也就是單頁應用，已經出到4.0了，4.0api全新改版。建議看3.0的，百度下中文都是。

後台的話，至少得知道react這種前後的分離的開發模式和傳統的後端模版引擎渲染的不同，node又是太重要，node也要學，做前端你逃不掉的。

所以建議路線node+es6-&>webpack-&>react-&>react-router。然後再這個過程中你就學會了很多思想和新東西。這個時候回頭去看什麼sea啊，什麼jquery啊。什麼都是浮雲，然後開始回歸初心，還是原生的好。

一臉懵逼

竟然敢說自己會js……學前端快兩年了都不敢說自己會js……