我自學(xué)入行的前端，已經(jīng)是一個(gè)有五年兩家大廠工作經(jīng)驗(yàn)的老司機(jī)了。回顧了一下我的前端自學(xué)入坑的經(jīng)歷~希望能幫到初學(xué)者，少走彎路。

零、入門

大二的時(shí)候斷斷續(xù)續(xù)的看了一些網(wǎng)站開發(fā)的知識(shí)，但是一直學(xué)不會(huì)，門外徘徊。直到某一天，一個(gè)老師找到我?guī)兔S護(hù)一個(gè)學(xué)院的網(wǎng)站，還說(shuō)有錢可以拿。雖然心動(dòng)，然而我啥也不會(huì)呀，但是老師告訴我說(shuō)只需要改改文字和顏色就行，我信了...

從此走上了一條不歸路。迫于答應(yīng)的事情一定要辦到，我每天廢寢忘食的學(xué)習(xí)網(wǎng)站開發(fā)維護(hù)相關(guān)的知識(shí)。大約經(jīng)過(guò)了半個(gè)多月，我覺得自己好像行了。

維護(hù)一個(gè)網(wǎng)站需要學(xué)習(xí)：

服務(wù)器

就是一臺(tái)運(yùn)行在機(jī)房有獨(dú)立公網(wǎng)IP的電腦?，F(xiàn)在，個(gè)人學(xué)習(xí)可以對(duì)應(yīng)云服務(wù)器，阿里云ECS。

域名

想要通過(guò)域名訪問服務(wù)器，需要添加DNS解析

Web服務(wù)

那時(shí)服務(wù)器是windows系統(tǒng)，用的IIS?，F(xiàn)在，主流的就是Linux系統(tǒng)和Nginx了，按照官方文檔安裝好Nginx，使用默認(rèn)配置，基本上一個(gè)Web服務(wù)就跑起來(lái)了。作為一個(gè)前端，學(xué)到這個(gè)程度就夠用很多年了

一門后端語(yǔ)言

當(dāng)時(shí)的網(wǎng)站是一個(gè)學(xué)長(zhǎng)用asp.net開發(fā)的?，F(xiàn)在可以選PHP、Python，還可以選Nodejs

數(shù)據(jù)庫(kù)

當(dāng)時(shí)用Access。對(duì)應(yīng)到現(xiàn)在，可以從MySQL或者M(jìn)ongoDB開始學(xué)習(xí)，增刪改查學(xué)會(huì)就夠用

網(wǎng)頁(yè)開發(fā)相關(guān)

就是HTML、CSS和JavaScript。其中最難的兩個(gè)點(diǎn)大概就是CSS布局和DOM操作，初期這個(gè)是可以從網(wǎng)上CV的

代碼管理

這個(gè)項(xiàng)目連代碼管理工具都沒有，直接一個(gè)文件夾

服務(wù)器和后端的知識(shí)，如果只是了解個(gè)皮毛的話，并不需要花費(fèi)多少時(shí)間。但這些基礎(chǔ)知識(shí)意義重大，可以讓一個(gè)前端開發(fā)者清楚的了解到自己在一個(gè)項(xiàng)目中到底是在做什么，不至于迷路~

自學(xué)方法

看書
搜索引擎
大牛們的技術(shù)博客

當(dāng)時(shí)網(wǎng)絡(luò)上的資源沒現(xiàn)在這么多，主要靠看書。去圖書館借了很多相關(guān)的技術(shù)書，其中大部分書都是又古老又垃圾的，得到一個(gè)結(jié)論，歪果仁寫的技術(shù)書普遍比較有貨。很多大牛們的技術(shù)博客，對(duì)我?guī)椭艽蟆?/p>

迫于資源匱乏和缺少指引，當(dāng)時(shí)走了很多彎路。如果到現(xiàn)在，

書籍的話我推薦只需要一本紅寶書就夠了
網(wǎng)站資源，w3school和MDN Docs這兩個(gè)也足夠了
大致的看一些理論之后，真實(shí)的參與到一個(gè)已有的項(xiàng)目里去，修改和維護(hù)。關(guān)于CSS布局和DOM操作，很多難以理解的理論一下就懂了
學(xué)再多理論和練習(xí)，都不如親自實(shí)現(xiàn)一個(gè)具體的項(xiàng)目

大約達(dá)到這樣一個(gè)狀態(tài)：一般項(xiàng)目的任何需求如果不會(huì)實(shí)現(xiàn)的都能通過(guò)搜索引擎或者翻書來(lái)解決，基本就算入門了。如果不追求去大廠做大項(xiàng)目的話，其實(shí)學(xué)到這就可以開始工作了~

一、關(guān)于實(shí)習(xí)

校招前的暑假里我還去一家小公司實(shí)習(xí)過(guò)兩個(gè)月，雖然也是做網(wǎng)站開發(fā)，每天認(rèn)真干活，但在那家公司幾乎什么都沒學(xué)到，除了各種API用得更熟練了，技術(shù)上零成長(zhǎng)。唯一的收獲大概就是讓我下定決心已定要去一家大公司。當(dāng)然小公司做的產(chǎn)品也并不簡(jiǎn)單，同樣功能俱全，只不過(guò)還是用的比較原始的開發(fā)方式~

看來(lái)很多開發(fā)者工作了幾年沒有任何成長(zhǎng)也是極有可能的。

至此，就可以做一個(gè)普通技術(shù)團(tuán)隊(duì)的主力軍了~

二、校招面試的那一個(gè)多月

校招的過(guò)程基本就是被慘虐的過(guò)程，幸運(yùn)的是我投的公司基本都給了面試機(jī)會(huì)。好多的概念都是第一次在面試上聽說(shuō)，基本前幾次面試都是去聽新概念的。

SEO

搜索引擎優(yōu)化，這個(gè)一聽就能理解，做過(guò)個(gè)人網(wǎng)站的都知道。對(duì)應(yīng)到前端開發(fā)就是使用一些方法，配合搜索引擎錄入網(wǎng)頁(yè)里的信息。

W3C規(guī)范

原來(lái)每天看的那些文檔和書，它們的祖師爺就是W3C。

閉包

這恐怕JavaScript開發(fā)者遇到的第一個(gè)沒有那么直觀就能理解的概念。平時(shí)的個(gè)人小項(xiàng)目開發(fā)里幾乎從沒用到，也沒見過(guò)，一直沒能理解。只能強(qiáng)行背答案了。

性能優(yōu)化

性能優(yōu)化是個(gè)什么鬼，能實(shí)現(xiàn)功能就不錯(cuò)了?；貋?lái)上網(wǎng)查了別人總結(jié)的資料，發(fā)現(xiàn)這么做確實(shí)能優(yōu)化性能，網(wǎng)頁(yè)更快，這個(gè)理解起來(lái)就沒那么難。一些書上面會(huì)有總結(jié)，但都不如網(wǎng)絡(luò)上的八股文來(lái)的直接和完整。

深拷貝淺拷貝

可以理解，但一直沒找到使用場(chǎng)景。

原型鏈

用來(lái)實(shí)現(xiàn)繼承的，沒用過(guò)，而且太麻煩，強(qiáng)行背答案。

事件代理

也叫事件委托，是基于事件冒泡和捕獲來(lái)實(shí)現(xiàn)的一種綁定時(shí)間的方法。練手項(xiàng)目里都是直接綁定事件的，從沒想過(guò)要用事件代理，但是這樣的概念，聽說(shuō)后也就很快理解了。

盒模型、清除浮動(dòng)、居中對(duì)齊

CSS的問題似乎比較少。

正則表達(dá)式

在項(xiàng)目中從未用過(guò)，不過(guò)看看文檔也就知道了。

常用基礎(chǔ)知識(shí)

數(shù)組、字符串的一些常見方法。由于我平時(shí)小項(xiàng)目還是寫的比較多，這些基本用的很熟練了。

ajax和跨域

無(wú)刷新局部更新內(nèi)容，這個(gè)也好理解。

常見算法，時(shí)間復(fù)雜度

這是大廠必問的，當(dāng)時(shí)把常見的幾個(gè)排序算法復(fù)習(xí)了一遍，基本就滿足要求了。

實(shí)現(xiàn)一個(gè)jQuery的$函數(shù)

什么？jQuery還能自己寫...原來(lái)這個(gè)也是可以自己去寫的，好像也不太難。

還有一道記憶深刻的題，某個(gè)產(chǎn)品每天有一個(gè)億的用戶訪問，服務(wù)器扛不住了怎么辦？

我...是來(lái)面前端的呀！

在校招面試這段時(shí)間里主要是對(duì)知識(shí)體系的補(bǔ)充。了解到一些之前從未關(guān)注的概念，然后快速的學(xué)習(xí)，如果理解不了的就先背答案。有了一定基礎(chǔ)后，理解這些概念并不會(huì)太難?，F(xiàn)在網(wǎng)上會(huì)有各種面經(jīng)和文章，上面的這些概念恐怕已經(jīng)問不住現(xiàn)在的畢業(yè)生了?，F(xiàn)在的校招算法問紅黑樹，手寫Promise，競(jìng)爭(zhēng)是越來(lái)越激烈了。

以前問jQuery，現(xiàn)在應(yīng)該就是問React、Vue框架了。歷史在重復(fù)。

三、正式工作

正式工作之后，才發(fā)現(xiàn)雖然同樣是寫JavaScript，但是和以前個(gè)人操作是完全不一樣的。

上班的第一天就深刻理解了從沒理解過(guò)的閉包，因?yàn)轫?xiàng)目代碼里全是閉包。一是為了限定作用域，二是當(dāng)做對(duì)象來(lái)使用?，F(xiàn)在有了ES6場(chǎng)景會(huì)少很多，最能幫助理解的就是節(jié)流函數(shù)和防抖函數(shù)了
公司有自研的框架，涵蓋了jQuery的功能，手寫jQuery也能理解了。所以面試造火箭也不是沒有道理
代碼規(guī)范，單引號(hào)和雙引號(hào)，要分號(hào)還是不要分號(hào)，縮進(jìn)用4個(gè)空格還是2個(gè)，團(tuán)隊(duì)大了，一起維護(hù)項(xiàng)目，這些都是需要約定的
原來(lái)在人多的團(tuán)隊(duì)，SVN的分支和merge功能是這么用的，真香
前后端分離、CDN，靜態(tài)資源和動(dòng)態(tài)內(nèi)容不是放在同一個(gè)服務(wù)器，為了分流，CDN有好幾個(gè)域名
自動(dòng)化的打包工具，代碼打包壓縮和分割都是自動(dòng)化的，而這些工具都是團(tuán)隊(duì)里的大佬用Nodejs開發(fā)的，崇拜
性能監(jiān)控，1s打開網(wǎng)站、性能優(yōu)化這些都是有KPI的
ajax和前端路由基本把Web應(yīng)用的體驗(yàn)提升到極致
安全相關(guān)，防止XSS攻擊，輸入和輸出的內(nèi)容都需要經(jīng)過(guò)處理
表單校驗(yàn)，正則表達(dá)式都是要根據(jù)需求自己實(shí)現(xiàn)的，再也沒法從網(wǎng)上找到答案直接CV了

大部分知識(shí)，如果只是使用的話，其實(shí)沒有什么學(xué)習(xí)成本，見過(guò)了也就知道了。

接下來(lái)就是一段做螺絲釘?shù)慕?jīng)歷了。經(jīng)過(guò)了前面的學(xué)習(xí)和校招的磨礪，道理我都懂，但是真正在一個(gè)大項(xiàng)目里做了第一個(gè)功能，才發(fā)現(xiàn)，原來(lái)100行代碼真的能引發(fā)200個(gè)bug...