摘要：也就正式開始了我的前端之路。在這期間，我還購買并配置了自己的云服務(wù)器，自己的博客系統(tǒng)，自己的還學(xué)會了的基本操作。不必說的是高級程序設(shè)計豆瓣鏈接這本書，也就是大家常說的高程，基本上每個合格的前端程序員都要熟讀很多很多次，每次讀都會有新發(fā)現(xiàn)。

原創(chuàng) 西安前端交流會: 卡農(nóng)  [email protected]  
本文章同步發(fā)表在wdShare西安前端交流會網(wǎng)站、我的個人博客以及segmentFault和掘金。    轉(zhuǎn)載請注明出處

這是西安初級前端群里邊的一次分享，整理出來，分享給大家，希望對大家的學(xué)習(xí)有幫助，也希望大家可以和我多多交流。

Hello，大家好，我是卡農(nóng)。上周Michael兄分享的內(nèi)容機械轉(zhuǎn)行前端，半年零基礎(chǔ)自學(xué)的心路歷程干貨滿滿，非常精彩。本周的分享由我來帶給大家。首先非常感覺杰克哥給我這次機會讓我能夠在這里分享一點學(xué)習(xí)的經(jīng)驗，也非常感謝F7哥提供的這么好的交流平臺讓大家能夠在這里心無旁騖的討論技術(shù)，共同進步。今天我分享的內(nèi)容主要是關(guān)于前端初學(xué)者的學(xué)習(xí)路線和一些建議，還有自己在準(zhǔn)備校招過程中的一點經(jīng)驗。由于我目前還是在校生，所以在某些問題的見解和選擇上可能會更多的偏向于學(xué)生的思維，不一定適合群里的所有人，不足的地方希望大家多多指點，當(dāng)然我會盡量從更大的適用人群的角度去輸出我的經(jīng)驗，希望可以對大家前端學(xué)習(xí)有所幫助。
我會從我的入坑之路、初學(xué)歷程、學(xué)習(xí)路線以及準(zhǔn)備應(yīng)聘過程中的簡歷、知識、心態(tài)準(zhǔn)備幾個方面來給大家分享。

嚴格意義上來說，我學(xué)的專業(yè)并不屬于計算機（智能科學(xué)與技術(shù)），更偏向于一個軟硬件結(jié)合的學(xué)科，而很湊巧的我們學(xué)校在安排我們專業(yè)課的時候把硬件課程放到了一個更重要的位置。所以專業(yè)課里能學(xué)到的知識其實并不多，當(dāng)初也是見到這么霸氣的名字才填的專業(yè)。如果按照我們專業(yè)的路線，我以后應(yīng)該研究的是人工智能、機器學(xué)習(xí)、機器視覺或者自然語言處理這些方向。但是在大二，我很認真的研究了這些可能的方向之后，我很嚴肅的發(fā)現(xiàn)了一個問題。這些看起來很高大上的學(xué)科或者職業(yè)，在我們這種學(xué)校是一個很尷尬的存在。以以我們這種普通學(xué)校本科生的學(xué)力和研究深度，幾乎不太可能在這些方向上找到合適的工作（至少是沒有先例的）,當(dāng)然也有想過做第一個吃螃蟹的人，但是當(dāng)認真審視自己的沒有良好的基礎(chǔ)學(xué)科功底和對這些方向有限的熱情之后，我還是選擇放棄。這樣，唯二的可選項是繼續(xù)深造和選擇別的方向。因為我一直都沒有在國內(nèi)繼續(xù)深造的打算，所以我很果斷的放棄了這個選項。于是在選擇別的方向的路上，很巧合的碰到了學(xué)校計算機學(xué)院（我們專業(yè)被分到自動化學(xué)院）各種實驗室的招新。宣講會聽了一場又一場，發(fā)現(xiàn)我都大二了（對大一學(xué)生的要求比較低），還沒有任何可以拿得出手的作品，也沒有比較熟悉的編程語言，只有對互聯(lián)網(wǎng)和科技行業(yè)滿滿的熱情。最后抱著試試看得心態(tài)，初步選定了前端和產(chǎn)品兩個方向。但是在后來的就業(yè)前景、學(xué)習(xí)路線以及未來的發(fā)展這些綜合考慮之下（信息主要來自知乎），還是選擇了技術(shù)路線的前端。所幸的是那時候，大家的水平都不高，在我挑燈夜讀了大概一周之后，很湊巧的遇到一個非常賞識我的學(xué)姐，讓我進了實驗室的WEB組。也就正式開始了我的前端之路。

對于學(xué)生，我強烈推薦加入學(xué)校的實驗室，這會對你的學(xué)習(xí)之路有極大的幫助，在后面我會提到。
很幸運，我所在的實驗室是一個以項目為驅(qū)動的實驗室。實驗室里有各個方向的人才，嵌入式、安卓開發(fā)、大數(shù)據(jù)、WEB前端、WEB后臺等等，當(dāng)你有一個好的idea很快可以匯集到各個方向的成員去實現(xiàn)它。于是我的第一個項目開始了。就是寫一個簡單的實驗室官網(wǎng)。
當(dāng)然這時候，我才知道自己其實只是了解一點皮毛都算不上的知識，如何開始一個項目，前期的需求分析怎么寫，網(wǎng)站整體怎么設(shè)計，用什么技術(shù)棧，如何規(guī)范代碼，如何寫出健壯可維護的代碼，甚至與還有網(wǎng)站放什么東西，資料哪里來這些問題，一下子全部都出現(xiàn)了。我根本無從下手，不知道從哪里開始。這個時候，有人指導(dǎo)的重要性就凸顯出來了。在學(xué)長學(xué)姐的指導(dǎo)下，我參考了以前的項目計劃書花了一周時間寫出了網(wǎng)站的需求分析，畫出了大體的布局圖，選定了技術(shù)框架用Bootstrap。這個時候我就是在慕課網(wǎng)和官網(wǎng)上看Bootstrap的使用教程，發(fā)現(xiàn)僅僅是使用也沒有什么難度，大概兩周基本上都會了。但是會照著例子敲代碼并沒有什么用，還是什么都做不出來。這個時候，我做了一件很可恥的事情，我把學(xué)校成立比較早的幾家實驗室官網(wǎng)的代碼都扒了下來，看他們的目錄結(jié)構(gòu)、布局以及代碼。很幸運的是大家都沒有在這個靜態(tài)網(wǎng)站上使用太復(fù)雜的技術(shù)，基本上都是我能看得懂的CSS和HTML，JS的部分很少。于是，參考他們的例子和我之前自己設(shè)計的整體布局和結(jié)構(gòu)，我大概寫出了網(wǎng)站的整體框架，雖然很丑，雖然即使是用了Bootstrap還有很多布局上的Bug,但是看到自己設(shè)計并寫出來的第一個網(wǎng)站還是非常激動的。后面的工作就是在實際編寫過程中，不斷的改代碼，改布局，甚至還多次改了需求，歷時大概兩個月加上一個寒假，終于完成了自己的第一個正式上線的作品。在這期間，我還購買并配置了自己的云服務(wù)器，自己的博客系統(tǒng)，自己的Github,還學(xué)會了linux的基本操作。
要知道，在幾個月以前，我是想都沒想過自己能夠親自寫出一個網(wǎng)站并提供給這么多人使用，一是不相信我會有這樣的機會，二是不相信我有這樣的能力。but so what,事實是我真的做出來了這個東西，而且以后我會做出更多更好的東西。我寫這段經(jīng)歷希望和大家分享的就是，dont be shy,勇敢的踏出你的第一步，如果你不給自己一個機會，你永遠都不會知道你到底能做什么，在這之前我完全不知道如何開始并完成一個項目，也不知道什么博客，Github，云服務(wù)器，這些完全是因為在這個項目中會用到，我不得已去學(xué)習(xí)，但是一開始學(xué)習(xí)我才發(fā)現(xiàn)這些東西為我們帶來的便利遠遠超乎我的想象，于是已經(jīng)停不下來了。所以對于剛?cè)胄械某鯇W(xué)者，我強烈的建議你，發(fā)揮你的想象力，嘗試親手去做一個完整的作品，當(dāng)你想去實現(xiàn)一個東西，想去完成一件事情的時候，你會有更充足的熱情和動力去為之學(xué)習(xí)，每一次學(xué)習(xí)都是都會離你的目標(biāo)更進一步，而每一次完成作品中的一個部分你就會更有動力去繼續(xù)，這是一個正向激勵的良性循環(huán)。相信在這種情況下，你會學(xué)的更快更有深度。

很容易看到，對我的整個成長過程，學(xué)校實驗室提供的資源、平臺和氛圍起了很重要的作用。在這里，我可以非常容易找到和自己同方向的學(xué)長學(xué)姐，在這里，我想再次想幫助過我的學(xué)長學(xué)姐們說聲“感謝”，沒有你們當(dāng)初你們的指點，我現(xiàn)在還在泥潭中打滾，沒有方向的亂撞。也很容易有各種機會去做出會被大家使用的產(chǎn)品，同時還有良好的學(xué)習(xí)氛圍.舉個簡單的例子，在沒有加入實驗室之前，我最多學(xué)到九點（因為學(xué)校圖書館九點鐘關(guān)門），而且還要受到各種干擾，在加入實驗室之后，只要去了，我很少有十點之前回宿舍，因為在這個環(huán)境里，大家都在學(xué)習(xí)，都在討論，你很難有其他的想法。而住的更近的同學(xué)院同學(xué)，在保安大爺沒來催人之前，是絕對不會走的。
當(dāng)你可以完整的做一個小項目的時候，我相信常用的技術(shù)你肯定都了解的差不多了，但是用歸用，如果僅僅是會用某項術(shù)，對你的成長幫助是非常有限的。

這個時候我推薦可以花大塊的時間系統(tǒng)學(xué)習(xí)知識點。比如，多久時間學(xué)習(xí)HTML4.1 HTML5 MDN-HTML5CSS2.1,CSS3霧雨漂零CSS手冊,ES5,ES6/ES7阮一峰ES6手冊等等。這個時候的學(xué)習(xí)就是既要有廣度又要有深度。不必說的是JavaScript高級程序設(shè)計豆瓣鏈接這本書，也就是大家常說的高程，基本上每個合格的前端程序員都要熟讀很多很多次，每次讀都會有新發(fā)現(xiàn)。JS最原理性的東西這里面都解釋的很清楚，但是它也有很多不夠深入的地方，這個時候犀牛書就出現(xiàn)了。但是犀牛書（JavaScript權(quán)威指南）豆瓣鏈接講的很細，很深，反正目前我是基本沒怎么看，水平還不夠很多地方理解不了。但是想深入理解JavaScript，這本書也是必讀的。CSS方面，我推薦CSS權(quán)威指南豆瓣鏈接和W3C 大漠老師W3C-PLUS的圖解CSS3豆瓣鏈接,基本看熟這兩本書，在絕大多數(shù)情況下CSS方面的深度和廣度就都夠了。

推薦一些網(wǎng)站，一個百度IFE前端技術(shù)學(xué)院，里面有百度IFE前端團隊為初學(xué)者設(shè)置的循序漸進的前端Tasks,只要按照順序一步一步做出來，你的前端技術(shù)一定會上一個臺階。而且有很多厲害的學(xué)學(xué)員在做同樣的事情，可以盡情參考和評價別人的代碼，可以學(xué)到很多的東西。還有一個是Free Code Camp,應(yīng)該是全世界最火的技術(shù)學(xué)習(xí)網(wǎng)站，和上一個類似，也是任務(wù)形式的，他會提供很多的學(xué)習(xí)資源，然后完成目標(biāo)學(xué)習(xí)任務(wù)，學(xué)習(xí)結(jié)束并完成作品，還可以得到學(xué)習(xí)認證證書。

但是光有這些知識也還是不夠的，現(xiàn)在的前端工程師不是只有HTML、CSS和JavaScript，現(xiàn)在的前端還要求了解網(wǎng)絡(luò)協(xié)議、網(wǎng)絡(luò)請求、瀏覽器運行機制、前端性能優(yōu)化、服務(wù)端等知識，你沒有辦法很系統(tǒng)的全面的去學(xué)習(xí)，學(xué)的太深，可能你會發(fā)現(xiàn)光著一個知識點就夠我研究幾個月了，那么如何判斷學(xué)到什么程度呢？我覺得這個就需要根據(jù)你自己的情況來權(quán)衡，比我我自己，我是在校生，我有大把的時間，而且我以后要面對的是校招，校招是一個很注重基礎(chǔ)知識的面試，而且我也希望能夠深入的了解一些原理性的知識。那么我當(dāng)然可以更深入的去了解這些相對屬于輔助性知識的內(nèi)容，網(wǎng)絡(luò)協(xié)議我可以看HTTP權(quán)威指南豆瓣鏈接，服務(wù)端的知識我可以自己去搭一個服務(wù)器，做一個前后端完全自己完成的項目，但是也有很多人網(wǎng)絡(luò)協(xié)議看一遍博文就夠了，服務(wù)端只是知道Node.js、PHP,但是他也可以很出色的完成前端的任務(wù)，對于這些東西我的建議的如果你有足夠的時間和學(xué)力，你可以學(xué)的更深入一些，相信這些知識無論是對你自己駕馭手中的工作還是以后的發(fā)展都會有很大的幫助。
在這些路線學(xué)完之后，不出意外的話你應(yīng)該有了自己的常用的組件庫，比如輪播圖、模態(tài)框等，還有JS的類庫比如操作Cookie、操作LocalStorage、Ajax等。
接下來，你可以嘗試用這些技術(shù)重構(gòu)之前做的小項目，或者可以嘗試去做一個更復(fù)雜的項目，比如模仿一個知乎、自己動手寫一個博客系統(tǒng)等等。反正，到現(xiàn)在，基本的技術(shù)應(yīng)該都會，只是還不熟練，需要的就是大量的練習(xí)使這些技術(shù)融會貫通。

因為最近一段時間，我都在準(zhǔn)備校招，走了不少彎路，也踩了不少坑，希望也可以把這部分的經(jīng)驗分享給大家。

既然要去面試，簡歷當(dāng)然是最基礎(chǔ)的準(zhǔn)備工作了。對于技術(shù)路線的人來說呢，簡歷需要注意哪些地方呢。簡單說下我的看法。
首先簡歷一定要簡潔明了，不然怎么叫簡歷。簡潔，主要包括排版、配色和字體。一般的建議是主色調(diào)最好用淺色調(diào)，整個簡歷的配色最好不要超過兩種，排版就按照自然文檔流的豎排排版，每個大的區(qū)塊之間有明顯的分界，字體推薦使用微軟雅黑、黑體、宋體等這種常見的字體，一是看起來舒服無壓力，二是常見字體會讓HR產(chǎn)生親切感，當(dāng)然也不是不可以使用其他字體，只是陌生的字體會有很大的風(fēng)險，除非十分有把握，否則不推薦冒險。
其次是簡歷內(nèi)容的書寫，最重要的一點就是盡量寫和你求職意向相關(guān)的內(nèi)容，并且要主次分明。舉個例子，在寫校園經(jīng)歷的時候，A經(jīng)歷是擔(dān)任全校最大社團某某會部長，組織了某某活動，成功吸引到多少人參與，達到了什么效果，B經(jīng)歷是擔(dān)任某某不知名社團社員，完成了社團的網(wǎng)站建設(shè)，組織技術(shù)沙龍，吸引到多少人參與。對于很多同學(xué)，很容易先入為主的放棄B經(jīng)歷而選擇A,理由也很好，A社團是全校聞名的一級社團，人盡皆知，在這樣的社團里組織活動并獲得良好反響是我實力的證明。而B社團，人數(shù)很少，在學(xué)校默默無聞，沒有幾個人知道，沒有什么說服力。這非常對，但是我想問的是A社團證明的你的能力是今天面試官關(guān)心的能力嗎？既然是技術(shù)面試，最關(guān)心的當(dāng)然是技術(shù)能力，而且對于面試官來說他才不會在乎A、B社團那個人多，那個比較有名，在他們眼里都是一樣的社團，他更關(guān)心的是你在里面做了什么、承擔(dān)了什么責(zé)任。很顯然，建設(shè)社團網(wǎng)站、舉辦技術(shù)沙龍這種經(jīng)歷，對技術(shù)面試來說是更加分的。
在寫經(jīng)歷的時候，一定把與技術(shù)相關(guān)的放到最顯眼的位置，同時把自己最得意、最熟悉的項目放在前面，始終記住的是面試的是技術(shù)崗，始終把技術(shù)能力放在第一位，有其他的機會的時候再展示附加的能力。

其實在校招面試中，最注重的還是基礎(chǔ)知識。以我長期以來助攻實驗室學(xué)長學(xué)姐面試的經(jīng)歷來看，問的最多的問題就那么幾類。一個是高程中的基礎(chǔ)知識，比如原型、原型鏈、閉包、對象、繼承等，一個是網(wǎng)絡(luò)協(xié)議、運行機制，比如TCP三次握手、Event Loop、消息隊列等，再就是算法，比如數(shù)組去重、快速排序、冒泡排序等。當(dāng)然還有CSS和HTML相關(guān)的知識，熱點的是Flex，Position，CSS畫各種圖形，如何實現(xiàn)垂直水平居中，常用的瀏覽器Hack代碼等，這些相對比較雜且多，但是需要理解的部分不多基本上過幾次就能知道，復(fù)習(xí)起來非?？臁?br>我的建議是在復(fù)習(xí)這些知識的時候，最好不僅要知道基本的內(nèi)容，還要了解其概念和外延。
舉個例子，posiation有哪幾種屬性，各有什么特點？
絕大多數(shù)人都能回答出static | inherit | relative | absulote | fixed,其中fixed脫離文檔流，相對窗口定位，absulote脫離文檔流，相對最近的一個Position屬性不為static的父元素定位，relative不脫離文檔流，相對元素原來的位置定位。當(dāng)然，這些說的是沒錯的。但是，如果你還可以說出 center | page | sticky 并且知道這幾種定位方式出現(xiàn)的緣由會不會更好，即為什么會有sticky定位，它解決了之前用CSS解決不了的什么問題或者更便捷的實現(xiàn)了之前用CSS需要大段代碼才能實現(xiàn)的效果。如果你還能說出目前的兼容性如何，都用在哪些地方，會不會更好。而由Position有經(jīng)驗的面試官又會很容易的引出脫離文檔流的問題，如何脫離文檔流，不同的脫離文檔流的方式各有什么特點等等。
簡單的說就是在準(zhǔn)備面試過程中，對熱點的知識點需要全面深入的了解，而不僅僅是了解其基本屬性和用法，同時面試中常用提問方式和技巧也要有所了解，在準(zhǔn)備的時候就以面試官的思維去問自己問題。
在復(fù)習(xí)知識的時候，我非常推薦大家自己總結(jié)，寫成博客。因為要發(fā)到網(wǎng)上被大家審閱的文章，潛意識會寫的更加嚴謹、認真，會整理的相對完善并且準(zhǔn)確。
我的習(xí)慣遇到比較大的知識點的時候會整理成一篇博文，在整理的過程中會參考很多的文章、查基本不同的書，很多時候你會發(fā)現(xiàn)同一個知識點在不同的博主筆下完全是不同的調(diào)調(diào)。有的甚至是有錯的。我比較推薦的阮一峰和張鑫旭老師的博文，大都寫得很完整且案例豐富。
下面就是我做過的部分整理和總結(jié)，有一些已經(jīng)同步到博客，有些還在繼續(xù)整理。

找工作和招員工本來就是一個互相選擇的過程，沒有最優(yōu)秀，只有最合適。
對于水平很好，有明確目標(biāo)的人，要做的就是做好準(zhǔn)備工作，充分了解目標(biāo)公司，提高嗅覺，捕捉每一分信息。舉個例子，我對A公司非常感興趣，而且知道每年都會校招。那么你要做就是關(guān)注A公司的招聘官網(wǎng)、微信，加入A公司的招聘社群，同時積極利用已有的校友資源捕捉第一手信息，同時在技術(shù)上關(guān)注A公司技術(shù)團隊的微博、博客，及時了解A公司的技術(shù)動向，認真研究其使用的技術(shù)棧，分析其技術(shù)路線和口味。
而對于技術(shù)一般，沒有明確目標(biāo)的同學(xué)。要做就是廣投簡歷，積累面試經(jīng)驗，提高被選中的概率。這是很簡單的數(shù)學(xué)題，在同樣分子的情況下（技術(shù)水平），分母越大（面試公司），結(jié)果越好（offer越多）。而且面試本來就是一個打怪升級的過程，通過面試積累經(jīng)驗，補足短板，最后拿到名企offer的案例屢見不鮮，重要的善于總結(jié)，面試沒有回答上來的問題，出來快速用手機記下來，下來一定要好好總結(jié)，想想面試官想考察什么，為什么這個知識我不知道，是因為知識點太偏，還是因為屬于非知識性的內(nèi)容，還是因為不熟練，針對不同的問題用不同方式來補足，還有考慮一下如果回答上來了下一步他可能問什么。還是那句話，從面試官的角度去問自己問題。

最后，借用知乎上很有名的一句話共勉。以大多數(shù)人的努力程度之低，根本輪不到拼天賦。所以，拼命努力吧，各位小伙伴們，希望大家都能在前端這條路上越走越遠。
也希望西安前端群越來越專業(yè)，越來越開放有活力。
最后的最后，我要提一下我的學(xué)校西安郵電大學(xué)和我的實驗室ThoughtCoding實驗室，這是一個很棒的學(xué)校和一個很開放包容的實驗室。我很感謝在我的成長路上能夠遇到他們。
同時再次感謝杰克哥和F7哥提供這么好的交流機會和交流平臺，還有西安前端群的各位小伙伴的指點，從你們身上也學(xué)到了很多的東西，大家可以一起進步。

下面是我的Blog、Github和郵箱，歡迎有興趣的小伙伴和我一起討論問題，共同進步。

博客：ovenzeze.coding.me

Github：github.com/ovenzeze

郵箱：[email protected]