前端小白需要學(xué)到什么程度可以找工作？
點(diǎn)擊上方 前端瓶子君，關(guān)注公眾號
回復(fù)算法，加入前端編程面試算法每日一題群
我自學(xué)入行的前端，已經(jīng)是一個有五年兩家大廠工作經(jīng)驗(yàn)的老司機(jī)了?；仡櫫艘幌挛业那岸俗詫W(xué)入坑的經(jīng)歷~希望能幫到初學(xué)者，少走彎路。
零、入門
大二的時候斷斷續(xù)續(xù)的看了一些網(wǎng)站開發(fā)的知識，但是一直學(xué)不會，門外徘徊。直到某一天，一個老師找到我?guī)兔S護(hù)一個學(xué)院的網(wǎng)站，還說有錢可以拿。雖然心動，然而我啥也不會呀，但是老師告訴我說只需要改改文字和顏色就行，我信了...
從此走上了一條不歸路。迫于答應(yīng)的事情一定要辦到，我每天廢寢忘食的學(xué)習(xí)網(wǎng)站開發(fā)維護(hù)相關(guān)的知識。大約經(jīng)過了半個多月，我覺得自己好像行了。
維護(hù)一個網(wǎng)站需要學(xué)習(xí)：
服務(wù)器
就是一臺運(yùn)行在機(jī)房有獨(dú)立公網(wǎng)IP的電腦?，F(xiàn)在，個人學(xué)習(xí)可以對應(yīng)云服務(wù)器，阿里云ECS。
域名
想要通過域名訪問服務(wù)器，需要添加DNS解析
Web服務(wù)
那時服務(wù)器是windows系統(tǒng)，用的IIS?，F(xiàn)在，主流的就是Linux系統(tǒng)和Nginx了，按照官方文檔安裝好Nginx，使用默認(rèn)配置，基本上一個Web服務(wù)就跑起來了。作為一個前端，學(xué)到這個程度就夠用很多年了
一門后端語言
當(dāng)時的網(wǎng)站是一個學(xué)長用asp.net開發(fā)的?，F(xiàn)在可以選PHP、Python，還可以選Nodejs
數(shù)據(jù)庫
當(dāng)時用Access。對應(yīng)到現(xiàn)在，可以從MySQL或者M(jìn)ongoDB開始學(xué)習(xí)，增刪改查學(xué)會就夠用
網(wǎng)頁開發(fā)相關(guān)
就是HTML、CSS和JavaScript。其中最難的兩個點(diǎn)大概就是CSS布局和DOM操作，初期這個是可以從網(wǎng)上CV的
代碼管理
這個項(xiàng)目連代碼管理工具都沒有，直接一個文件夾
服務(wù)器和后端的知識，如果只是了解個皮毛的話，并不需要花費(fèi)多少時間。但這些基礎(chǔ)知識意義重大，可以讓一個前端開發(fā)者清楚的了解到自己在一個項(xiàng)目中到底是在做什么，不至于迷路~
自學(xué)方法
-
看書 -
搜索引擎 -
大牛們的技術(shù)博客
當(dāng)時網(wǎng)絡(luò)上的資源沒現(xiàn)在這么多，主要靠看書。去圖書館借了很多相關(guān)的技術(shù)書，其中大部分書都是又古老又垃圾的，得到一個結(jié)論，歪果仁寫的技術(shù)書普遍比較有貨。很多大牛們的技術(shù)博客，對我?guī)椭艽蟆?/p>
迫于資源匱乏和缺少指引，當(dāng)時走了很多彎路。如果到現(xiàn)在，
-
書籍的話我推薦只需要一本紅寶書就夠了 -
網(wǎng)站資源，w3school和MDN Docs這兩個也足夠了 -
大致的看一些理論之后，真實(shí)的參與到一個已有的項(xiàng)目里去，修改和維護(hù)。關(guān)于CSS布局和DOM操作，很多難以理解的理論一下就懂了 -
學(xué)再多理論和練習(xí)，都不如親自實(shí)現(xiàn)一個具體的項(xiàng)目
大約達(dá)到這樣一個狀態(tài)：一般項(xiàng)目的任何需求如果不會實(shí)現(xiàn)的都能通過搜索引擎或者翻書來解決，基本就算入門了。如果不追求去大廠做大項(xiàng)目的話，其實(shí)學(xué)到這就可以開始工作了~
一、關(guān)于實(shí)習(xí)
校招前的暑假里我還去一家小公司實(shí)習(xí)過兩個月，雖然也是做網(wǎng)站開發(fā)，每天認(rèn)真干活，但在那家公司幾乎什么都沒學(xué)到，除了各種API用得更熟練了，技術(shù)上零成長。唯一的收獲大概就是讓我下定決心已定要去一家大公司。當(dāng)然小公司做的產(chǎn)品也并不簡單，同樣功能俱全，只不過還是用的比較原始的開發(fā)方式~
-
看來很多開發(fā)者工作了幾年沒有任何成長也是極有可能的。
至此，就可以做一個普通技術(shù)團(tuán)隊的主力軍了~
二、校招面試的那一個多月
校招的過程基本就是被慘虐的過程，幸運(yùn)的是我投的公司基本都給了面試機(jī)會。好多的概念都是第一次在面試上聽說，基本前幾次面試都是去聽新概念的。
SEO
搜索引擎優(yōu)化，這個一聽就能理解，做過個人網(wǎng)站的都知道。對應(yīng)到前端開發(fā)就是使用一些方法，配合搜索引擎錄入網(wǎng)頁里的信息。
W3C規(guī)范
原來每天看的那些文檔和書，它們的祖師爺就是W3C。
閉包
這恐怕JavaScript開發(fā)者遇到的第一個沒有那么直觀就能理解的概念。平時的個人小項(xiàng)目開發(fā)里幾乎從沒用到，也沒見過，一直沒能理解。只能強(qiáng)行背答案了。
性能優(yōu)化
性能優(yōu)化是個什么鬼，能實(shí)現(xiàn)功能就不錯了。回來上網(wǎng)查了別人總結(jié)的資料，發(fā)現(xiàn)這么做確實(shí)能優(yōu)化性能，網(wǎng)頁更快，這個理解起來就沒那么難。一些書上面會有總結(jié)，但都不如網(wǎng)絡(luò)上的八股文來的直接和完整。
深拷貝淺拷貝
可以理解，但一直沒找到使用場景。
原型鏈
用來實(shí)現(xiàn)繼承的，沒用過，而且太麻煩，強(qiáng)行背答案。
事件代理
也叫事件委托，是基于事件冒泡和捕獲來實(shí)現(xiàn)的一種綁定時間的方法。練手項(xiàng)目里都是直接綁定事件的，從沒想過要用事件代理，但是這樣的概念，聽說后也就很快理解了。
盒模型、清除浮動、居中對齊
CSS的問題似乎比較少。
正則表達(dá)式
在項(xiàng)目中從未用過，不過看看文檔也就知道了。
常用基礎(chǔ)知識
數(shù)組、字符串的一些常見方法。由于我平時小項(xiàng)目還是寫的比較多，這些基本用的很熟練了。
ajax和跨域
無刷新局部更新內(nèi)容，這個也好理解。
常見算法，時間復(fù)雜度
這是大廠必問的，當(dāng)時把常見的幾個排序算法復(fù)習(xí)了一遍，基本就滿足要求了。
實(shí)現(xiàn)一個jQuery的$函數(shù)
什么？jQuery還能自己寫...原來這個也是可以自己去寫的，好像也不太難。
還有一道記憶深刻的題，某個產(chǎn)品每天有一個億的用戶訪問，服務(wù)器扛不住了怎么辦？
我...是來面前端的呀！
在校招面試這段時間里主要是對知識體系的補(bǔ)充。了解到一些之前從未關(guān)注的概念，然后快速的學(xué)習(xí)，如果理解不了的就先背答案。有了一定基礎(chǔ)后，理解這些概念并不會太難?，F(xiàn)在網(wǎng)上會有各種面經(jīng)和文章，上面的這些概念恐怕已經(jīng)問不住現(xiàn)在的畢業(yè)生了?，F(xiàn)在的校招算法問紅黑樹，手寫Promise，競爭是越來越激烈了。
以前問jQuery，現(xiàn)在應(yīng)該就是問React、Vue框架了。歷史在重復(fù)。
三、正式工作
正式工作之后，才發(fā)現(xiàn)雖然同樣是寫JavaScript，但是和以前個人操作是完全不一樣的。
-
上班的第一天就深刻理解了從沒理解過的閉包，因?yàn)轫?xiàng)目代碼里全是閉包。一是為了限定作用域，二是當(dāng)做對象來使用?，F(xiàn)在有了ES6場景會少很多，最能幫助理解的就是節(jié)流函數(shù)和防抖函數(shù)了 -
公司有自研的框架，涵蓋了jQuery的功能，手寫jQuery也能理解了。所以面試造火箭也不是沒有道理 -
代碼規(guī)范，單引號和雙引號，要分號還是不要分號，縮進(jìn)用4個空格還是2個，團(tuán)隊大了，一起維護(hù)項(xiàng)目，這些都是需要約定的 -
原來在人多的團(tuán)隊，SVN的分支和merge功能是這么用的，真香 -
前后端分離、CDN，靜態(tài)資源和動態(tài)內(nèi)容不是放在同一個服務(wù)器，為了分流，CDN有好幾個域名 -
自動化的打包工具，代碼打包壓縮和分割都是自動化的，而這些工具都是團(tuán)隊里的大佬用Nodejs開發(fā)的，崇拜 -
性能監(jiān)控，1s打開網(wǎng)站、性能優(yōu)化這些都是有KPI的 -
ajax和前端路由基本把Web應(yīng)用的體驗(yàn)提升到極致 -
安全相關(guān)，防止XSS攻擊，輸入和輸出的內(nèi)容都需要經(jīng)過處理 -
表單校驗(yàn)，正則表達(dá)式都是要根據(jù)需求自己實(shí)現(xiàn)的，再也沒法從網(wǎng)上找到答案直接CV了
大部分知識，如果只是使用的話，其實(shí)沒有什么學(xué)習(xí)成本，見過了也就知道了。
接下來就是一段做螺絲釘?shù)慕?jīng)歷了。經(jīng)過了前面的學(xué)習(xí)和校招的磨礪，道理我都懂，但是真正在一個大項(xiàng)目里做了第一個功能，才發(fā)現(xiàn)，原來100行代碼真的能引發(fā)200個bug...
總結(jié)
至此，就是一個專業(yè)前端開發(fā)團(tuán)隊的新力軍了~
從小項(xiàng)目到大項(xiàng)目，流程的要求變高、方案要求變高、代碼規(guī)范要求變高，性能的要求變高，用戶體驗(yàn)的要求變高，需要解決的問題跟著變多，但是Web開發(fā)技術(shù)的基礎(chǔ)并沒有變，還是HTML、CSS和JavaScript。
來自:Simba同學(xué)
https://juejin.cn/post/6953159480087429134