从前端菜鸟到大神，看这一篇就够了
結(jié)合個(gè)人經(jīng)歷總結(jié)的前端入門(mén)方法，總結(jié)從零基礎(chǔ)到具備前端基本技能的道路、學(xué)習(xí)方法、資料。由于能力有限，不能保證面面俱到，只是作為入門(mén)參考，面向初學(xué)者，讓初學(xué)者少走彎路。
互聯(lián)網(wǎng)的快速發(fā)展和激烈競(jìng)爭(zhēng)，用戶體驗(yàn)成為一個(gè)重要的關(guān)注點(diǎn)，導(dǎo)致專業(yè)前端工程師成為熱門(mén)職業(yè)，各大公司對(duì)前端工程師的需求量都很大，要求也越來(lái)越高，優(yōu)秀的前端工程師更是稀缺。個(gè)人感覺(jué)前端入門(mén)相對(duì)容易，但是也需要系統(tǒng)地認(rèn)真學(xué)習(xí)，在打好基礎(chǔ)后堅(jiān)持學(xué)習(xí)，成為優(yōu)秀前端工程師也只是時(shí)間問(wèn)題。
學(xué)習(xí)任何知識(shí)最重要的都是興趣，如果經(jīng)過(guò)一段時(shí)間的學(xué)習(xí)感覺(jué)不喜歡，那可能強(qiáng)迫自己學(xué)習(xí)是很痛苦的，效果也不會(huì)好，畢竟這很可能就是以后很多年生存的技能。不過(guò)隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，前端必然是Web開(kāi)發(fā)人員需要學(xué)習(xí)的知識(shí)，有時(shí)候是沒(méi)有專業(yè)前端工程師一起合作的，所以即使不做專門(mén)的前端工程師，掌握基本的前端技能為工作帶來(lái)方便。
后期邀請(qǐng)了一些同學(xué)分享學(xué)習(xí)經(jīng)歷。如果有同學(xué)愿意分享,歡迎push
必備基礎(chǔ)技能
前端技能匯總（https://github.com/JacksonTian/fks）這個(gè)項(xiàng)目詳細(xì)記錄?了前端工程師牽涉到的各方面知識(shí)。在具備基本技能之后可以在里面找到學(xué)習(xí) 的方向，完善技能和知識(shí)面。
frontend-dev-bookmarks（https://github.com/dypsilon/frontend-dev-bookmarks）是老外總結(jié)的前端開(kāi)發(fā)資源。覆蓋面非常廣。包括各種知識(shí)點(diǎn)、工具、技術(shù)，非常全面。
以下是個(gè)人覺(jué)得入門(mén)階段應(yīng)該熟練掌握的基礎(chǔ)技能：
HTML4，HTML5語(yǔ)法、標(biāo)簽、語(yǔ)義
CSS2.1，CSS3規(guī)范，與HTML結(jié)合實(shí)現(xiàn)各種布局、效果
Ecma-262定義的javascript的語(yǔ)言核心，原生客戶端javascript，DOM操作，HTML5新增功能
一個(gè)成熟的客戶端javascript庫(kù)，推薦jquery
一門(mén)服務(wù)器端語(yǔ)言：如果有服務(wù)器端開(kāi)發(fā)經(jīng)驗(yàn)，使用已經(jīng)會(huì)的語(yǔ)言即可，如果沒(méi)有服務(wù)器端開(kāi)發(fā)經(jīng)驗(yàn)，熟悉Java可以選擇Servlet，不熟悉的可以選PHP，能實(shí)現(xiàn)簡(jiǎn)單登陸注冊(cè)功能就足夠支持前端開(kāi)發(fā)了，后續(xù)可能需要繼續(xù)學(xué)習(xí)，最基本要求是實(shí)現(xiàn)簡(jiǎn)單的功能模擬，
HTTP
在掌握以上基礎(chǔ)技能之后，工作中遇到需要的技術(shù)也能快速學(xué)習(xí)。
基本開(kāi)發(fā)工具
恰當(dāng)?shù)墓ぞ吣苡行岣邔W(xué)習(xí)效率，將重點(diǎn)放在知識(shí)本身，在出現(xiàn)問(wèn)題時(shí)能快速定位并 解決問(wèn)題，以下是個(gè)人覺(jué)得必備的前端開(kāi)發(fā)工具：
文本編輯器：推薦Sublime Text，支持各種插件、主題、設(shè)置，使用方便
瀏覽器：推薦Google Chrome，更新快，對(duì)前端各種標(biāo)準(zhǔn)提供了非常好的支持
調(diào)試工具：推薦Chrome自帶的Chrome develop tools，可以輕松查看DOM結(jié)構(gòu)、樣式，通過(guò)控制臺(tái)輸出調(diào)試信息，調(diào)試javascript，查看網(wǎng)絡(luò)等
輔助工具：PhotoShop編輯圖片、取色，fireworks量尺寸，AlloyDesigner對(duì)比尺寸，以及前面的到的Chrome develop tools，
翻墻工具：lantern, 壁虎漫步
學(xué)習(xí)方法和學(xué)習(xí)目標(biāo)
方法：
入門(mén)階段反復(fù)閱讀經(jīng)典書(shū)籍的中文版，書(shū)籍中的每一個(gè)例子都動(dòng)手實(shí)現(xiàn)并在瀏覽器中查看效果
在具備一定基礎(chǔ)之后可以上網(wǎng)搜各種教程、demo，了解各種功能的實(shí)際用法和常見(jiàn)功能的實(shí)現(xiàn)方法
閱讀HTML，CSS，Javascript標(biāo)準(zhǔn)全面完善知識(shí)點(diǎn)
閱讀前端牛人的博客、文章提升對(duì)知識(shí)的理解
善用搜索引擎
目標(biāo)：
熟記前面知識(shí)點(diǎn)部分的重要概念，結(jié)合學(xué)習(xí)經(jīng)歷得到自己的理解
熟悉常見(jiàn)功能的實(shí)現(xiàn)方法，如常見(jiàn)CSS布局，Tab控件等。
入門(mén)之路
以下是入門(mén)階段不錯(cuò)的書(shū)籍和資料
HTML先看《HTML & CSS: Design and Build Websites》1-9章，然后《HTML5: The Missing Manual》1-4章。
CSS先看《CSS: The Missing Manual》，然后《CSS權(quán)威指南》
javascript先看《javascript高級(jí)程序設(shè)計(jì)》，然后《javascript權(quán)威指南》
HTTP看HTTP權(quán)威指南
在整個(gè)學(xué)習(xí)過(guò)程中HTML CSS JavaScript會(huì)有很多地方需要互相結(jié)合，實(shí)際工作中也是這樣，一個(gè)簡(jiǎn)單的功能模塊都需要三者結(jié)合才能實(shí)現(xiàn)。
動(dòng)手是學(xué)習(xí)的重要組成部分，書(shū)籍重點(diǎn)講解知識(shí)點(diǎn)，例子可能不是很充足，這就需要利用搜索引擎尋找一些簡(jiǎn)單教程，照著教程實(shí)現(xiàn)功能。以下是一些比較好的教程網(wǎng)址
可以搜索各大公司前端校招筆試面試題作為練習(xí)題或者他人總結(jié)的前端面試題還有個(gè)人總結(jié)的面試題（帶參考答案）
http://code.tutsplus.com有各種各樣的教程
MDN也有很多教程，更重要的是里面有詳細(xì)的文檔，需要查找某個(gè)功能時(shí)在Google搜索：xxx site:https://developer.mozilla.org
http://www5rocks.com/zh/也有很多優(yōu)質(zhì)教程
http://www.sitepoint.com/
http://alistapart.com/
原生javascript是需要重點(diǎn)掌握的技能，在掌握原生javascript的基礎(chǔ)上推薦熟練掌握jQuery，在實(shí)際工作中用處很大，這方面的書(shū)籍有《Learning jQuery》或者去jQuery官網(wǎng)
建一個(gè)https://github.com/賬號(hào)，保存平時(shí)學(xué)習(xí)中的各種代碼和項(xiàng)目。
有了一定基礎(chǔ)之后可以搭建一個(gè)個(gè)人博客，記錄學(xué)習(xí)過(guò)程中遇到的問(wèn)題和解決方法，方便自己查閱也為其他人提供了幫助。也可以去http://www.cnblogs.com/或者h(yuǎn)ttp://www.csdn.net/這樣的網(wǎng)站注冊(cè)賬號(hào)，方便實(shí)用
經(jīng)常實(shí)用Google搜索英文資料應(yīng)該經(jīng)常找到來(lái)自http://stackoverflow.com/的高質(zhì)量答案，與到問(wèn)題可以直接在這里搜索，如果有精力，注冊(cè)一個(gè)賬號(hào)為別人解答問(wèn)題也能極大提高個(gè)人能力。
經(jīng)典書(shū)籍熟讀之后，可以打開(kāi)前面必備基礎(chǔ)技能部分的鏈接。認(rèn)真讀對(duì)應(yīng)標(biāo)準(zhǔn)，全面掌握知識(shí)
繼續(xù)提高
有了前面的基礎(chǔ)之后，前端基本算是入門(mén)了，這時(shí)候可能每個(gè)人心中都有了一些學(xué)習(xí)方向，如果還是沒(méi)有。 可以參考前面必備技能部分提到的那兩個(gè)項(xiàng)目，從里面選一些進(jìn)行發(fā)展學(xué)習(xí)。以下是一些不錯(cuò)的方面：
Grunt：前端自動(dòng)化工具，提高工作效率
less css：優(yōu)秀的CSS預(yù)處理器
bootstrap：優(yōu)秀的CSS框架，對(duì)沒(méi)有設(shè)計(jì)師的團(tuán)隊(duì)很不錯(cuò)，與less結(jié)合使用效果完美
requirejs：AMD規(guī)范的模塊加載器，前端模塊化趨勢(shì)的必備工具
Node.js：JavaScript也可以做后臺(tái)，前端工程師地位更上一步
AngularJS：做Single Page Application的好工具
移動(dòng)端web開(kāi)發(fā)：智能手機(jī)的普及讓移動(dòng)端的流量正在逐步趕超PC端
Javascript內(nèi)存管理：SPA長(zhǎng)期運(yùn)行需要注意內(nèi)存泄露的問(wèn)題
High Performance JavaScript(Build Faster Web Application Interfaces)
Best Practices for Speeding Up Your Web Site：重要技能
一些個(gè)人經(jīng)歷
LingyuCoder的學(xué)習(xí)經(jīng)歷
上面的大神都總結(jié)得差不多了，我這里就胡扯一些吧
工具
chrome dev tools：前端開(kāi)發(fā)調(diào)試?yán)?#xff0c;著重注意幾個(gè)功能：
console（廢話）
elements:元素樣式調(diào)整，很常用
sources：代碼中添加斷點(diǎn)，單步調(diào)試，以及單步調(diào)試過(guò)程中查看內(nèi)存中的對(duì)象
watch expression：通過(guò)表達(dá)式查看當(dāng)前內(nèi)存中的值
call stack：查看調(diào)用棧，開(kāi)啟async，可以看異步調(diào)用棧（這個(gè)非常有用，尤其是ajax調(diào)試的時(shí)候）
scope variables：作用域鏈上的變量，非常有用
network：抓包查看每個(gè)請(qǐng)求，非常重要，前后端聯(lián)調(diào)必備
timeline：分析渲染、js執(zhí)行等等各個(gè)階段，性能優(yōu)化利器
emulation：模擬移動(dòng)端環(huán)境，mobile頁(yè)面開(kāi)發(fā)必備
一些插件:
liveload: 修改頁(yè)面后自動(dòng)刷新，不用按F5
dimensions：直接在頁(yè)面上測(cè)量的利器
livestyle：css樣式修改后自動(dòng)起效果，不需要刷新，elements修改后也能同步到代碼中
image tool：測(cè)量，取色
UC二維碼：移動(dòng)端調(diào)試掃碼必備
pagespeed，YSlow：頁(yè)面性能分析和優(yōu)化插件
馬克飛象：優(yōu)秀的在線markdown編輯器，快速寫(xiě)周報(bào)，做記錄
sublime text2：編碼方便，插件多，速度快，性能好
emmet：提升html編碼速度必備
sublimelinter + 各種語(yǔ)言的lint和hint：代碼糾錯(cuò)
一些snippets：自動(dòng)補(bǔ)全，提升開(kāi)發(fā)效率
Intellij IDEA和WebStorm：集成開(kāi)發(fā)環(huán)境，集成了各種功能，開(kāi)發(fā)比sublime要方便，但會(huì)比較吃性能
Mark Men：測(cè)量、取色、標(biāo)注利器，拿到視覺(jué)稿之后第一個(gè)打開(kāi)的軟件
GFW Fucker：我用紅杏，可以的話買(mǎi)個(gè)虛擬服務(wù)器當(dāng)梯子
iHosts：非常優(yōu)秀的hosts管理軟件，輕松修改hosts，開(kāi)發(fā)調(diào)試必備
Charles：Mac 平臺(tái)最好用的抓包分析工具
Rythem：AlloyTeam出品的代理抓包軟件，非常輕量，安裝簡(jiǎn)單，移動(dòng)端（真機(jī)）開(kāi)發(fā)調(diào)試很好用
Wunderlist：一個(gè)非常不錯(cuò)的Todo List，任務(wù)、需求多的時(shí)候管理起來(lái)很方便
技能
前端的技能其實(shí)除了JavaScript（包括NodeJS）、HTML、CSS以外，還有很多。其實(shí)前端的技能樹(shù)很大，這里只能列一些我開(kāi)發(fā)中見(jiàn)到的說(shuō)一說(shuō)
語(yǔ)言基礎(chǔ)
JavaScript：
作用域鏈、閉包、運(yùn)行時(shí)上下文、this
原型鏈、繼承
NodeJS基礎(chǔ)和常用API
CSS：
選擇器
瀏覽器兼容性及常見(jiàn)的hack處理
CSS布局的方式和原理（盒子模型、BFC、IFC等等）
CSS 3，如animation、gradient、等等
HTML：
語(yǔ)義化標(biāo)簽
進(jìn)階
JavaScript:
異步控制（Promise、ES6 generator、Async）
模塊化的開(kāi)發(fā)方式（AMD、CMD、KMD等等）
JavaScript解釋器的一些相關(guān)知識(shí)
異步IO實(shí)現(xiàn)
垃圾回收
事件隊(duì)列
常用框架使用及其原理
jQuery：基于選擇器的框架，但個(gè)人認(rèn)為不能叫框架，應(yīng)該算工具庫(kù)，因?yàn)椴痪邆淠K加載機(jī)制，其中源碼很適合閱讀鉆研
AngularJS/Avalon等MVVM框架：著重理解MVVM模式本身的理念和雙向綁定的實(shí)現(xiàn)，如何解耦
underscore：優(yōu)秀的工具庫(kù)，方便的理解常用工具代碼片段的實(shí)現(xiàn)
polymer/React: 組件化開(kāi)發(fā)，面向未來(lái)，理解組件化開(kāi)發(fā)的原理
CSS和HTML：主要是CSS3的特性和HTML5的特性，以及瀏覽器處理的流程和繪制原理
DOM樹(shù)、CSSOM樹(shù)、渲染樹(shù)的構(gòu)建流程及頁(yè)面渲染的過(guò)程
解析HTML、CSS、JavaScript時(shí)造成的阻塞
HTML5相關(guān)
SVG及矢量圖原理
Canvas開(kāi)發(fā)及動(dòng)畫(huà)原理（幀動(dòng)畫(huà)）
Video和Audio
flex box布局方式
icon fonts的使用
常用NodeJs的package：
koa
express
underscore
async
gulp
grunt
connect
request
一些理念：
響應(yīng)式Web
優(yōu)雅降級(jí)、漸進(jìn)增強(qiáng)
dont make me think
網(wǎng)頁(yè)可用性、可訪問(wèn)性、其中的意義
SEO搜索引擎優(yōu)化，了解搜索引擎的原理
SPA的好處和問(wèn)題
性能優(yōu)化：
減少請(qǐng)求數(shù)量（sprite、combo）
善用緩存（application cache、http緩存、CDN、localstorage、sessionstorage，備忘錄模式）
減少選擇器消耗（從右到左），減少DOM操作（DOM和JavaScript解釋器的分離）
CSS的回流與重繪
項(xiàng)目
版本管理：首推Git，用過(guò)Git都不會(huì)想用SVN了
Git：本地版本管理的機(jī)制
SVN：遠(yuǎn)程中心的版本管理機(jī)制
自動(dòng)化構(gòu)建：主要就是less、模板、coffee等的預(yù)處理以及對(duì)代碼壓縮和合并
Gulp：基于流構(gòu)建，速度快、模塊質(zhì)量好
Grunt：獨(dú)立任務(wù)構(gòu)建，速度慢，配置蛋疼，靈活性高
預(yù)處理和模板引擎
less：語(yǔ)法簡(jiǎn)單，但功能有限
jade、ejs、velocity等模板引擎，各有各的長(zhǎng)處
coffee：python工程師最愛(ài)，我沒(méi)用過(guò)
環(huán)境搭建：主要是將線上代碼映射到本地，并在本地啟動(dòng)一個(gè)demo服務(wù)器，至于模擬數(shù)據(jù)的mock，見(jiàn)仁見(jiàn)智了
本地代理：ihosts
自動(dòng)化測(cè)試：在業(yè)務(wù)較為穩(wěn)定的情況下，可以通過(guò)自動(dòng)化測(cè)試來(lái)減少測(cè)試的事件，但需求較多的時(shí)候，維護(hù)測(cè)試用例的成本會(huì)很高，可能用自動(dòng)化測(cè)試會(huì)起到反效果
jasmine
mocha
生態(tài)系統(tǒng)
npm
bower
spm
搭建一個(gè)屬于自己的博客
git pages
hexo
jekyll
未來(lái)
Web Componets：面向未來(lái)的組件化開(kāi)發(fā)方式
HTML模板
Shadow DOM
Custom Elements
HTML Import
移動(dòng)端Native開(kāi)發(fā)：這也是需要了解的，以后前端工程師會(huì)經(jīng)常地和webview打交道，也要了解native開(kāi)發(fā)
其他
有些東西不是考敲碼就能弄好的，我參與實(shí)習(xí)的時(shí)候感受到了很多，這些是我遇到的也是我感覺(jué)自己做的不好的地方
對(duì)于業(yè)務(wù)的思考：我個(gè)人這方面非常欠缺，所以放在最前面，在敲碼前要多思考業(yè)務(wù)
交流和溝通能力：這個(gè)非常重要，前端同時(shí)需要與項(xiàng)目經(jīng)理、產(chǎn)品、交互、后臺(tái)打交道，溝通不善會(huì)導(dǎo)致很多無(wú)用功，延緩項(xiàng)目
知識(shí)管理、時(shí)間管理：input和output的平衡，output是最好的input。如何做好分享，參與社區(qū)，做好交流，作好記錄
對(duì)新技術(shù)的渴望，以及敢于嘗試
入門(mén)書(shū)
入門(mén)可以通過(guò)啃書(shū)，但書(shū)本上的東西很多都已經(jīng)過(guò)時(shí)了，在啃書(shū)的同時(shí)，也要持續(xù)關(guān)注技術(shù)的新動(dòng)態(tài)。這里推幾本我覺(jué)著不錯(cuò)的書(shū)：
《JavaScript高級(jí)編程》：可以作為入門(mén)書(shū)籍，但同時(shí)也是高級(jí)書(shū)籍，可以快速吸收基礎(chǔ)，等到提升再回來(lái)重新看
《JavaScript權(quán)威指南》：不太適合入門(mén)，但是必備，不理解的地方就去查閱一下，很有幫助
《編寫(xiě)可維護(hù)的JavaScript》和：
《Node.js開(kāi)發(fā)指南》：不錯(cuò)的Nodejs入門(mén)書(shū)籍
《深入淺出Node.js》：Nodejs進(jìn)階書(shū)籍，必備
《JavaScript異步編程》：理解JS異步的編程理念
《JavaScript模式》和《JavaScript設(shè)計(jì)模式》：JavaScript的代碼模式和設(shè)計(jì)模式，將開(kāi)發(fā)思維轉(zhuǎn)變到JavaScript，非常好的書(shū)
《JavaScript框架設(shè)計(jì)》：在用輪子同時(shí)，應(yīng)當(dāng)知道輪子是怎么轉(zhuǎn)起來(lái)的，講解很詳細(xì)，從源碼級(jí)別講解框架的各個(gè)部分的實(shí)現(xiàn)，配合一個(gè)現(xiàn)有框架閱讀，可以學(xué)到很多東西
《Dont make me think》：網(wǎng)頁(yè)設(shè)計(jì)的理念，了解用戶行為，非常不錯(cuò)
《CSS禪意花園》：經(jīng)久不衰的一部著作，同樣傳遞了網(wǎng)頁(yè)設(shè)計(jì)中的理念以及設(shè)計(jì)中需要注意的問(wèn)題
《高性能JavaScript》和《高性能HTML5》：強(qiáng)調(diào)性能的書(shū)，其中不只是性能優(yōu)化，還有很多原理層面的東西值得學(xué)習(xí)
《HTML5 Canvas核心技術(shù)》：我正在讀的一本書(shū)，對(duì)于canvas的使用，動(dòng)畫(huà)的實(shí)現(xiàn)，以及動(dòng)畫(huà)框架的開(kāi)發(fā)都非常有幫助
《HTTP權(quán)威指南》：HTTP協(xié)議相關(guān)必備，前端開(kāi)發(fā)調(diào)試的時(shí)候也會(huì)經(jīng)常涉及到其中的知識(shí)
《響應(yīng)式Web設(shè)計(jì)》：技術(shù)本身不難，重要的是響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)理念，以及移動(dòng)先行的思想
《JavaScript語(yǔ)言精粹》：老道的書(shū)，也是普及JavaScript的開(kāi)發(fā)思維的一本好書(shū)，非常適合入門(mén)
一些不錯(cuò)的網(wǎng)站
github：沒(méi)啥好說(shuō)的，多閱讀別人的源碼，多上傳自己的源碼，向世界各地的大牛學(xué)習(xí)
codepen：感受前端之美的必選之地，里面有很多酷炫的效果和優(yōu)秀的插件
echojs：快速了解js新資訊的網(wǎng)站
stackoverflow和segmentfault：基本上各種問(wèn)題都能在上面獲得解答
google web fundamentals：每篇文章都適合仔細(xì)閱讀
static files：開(kāi)放的CDN，很好用
iconfont：阿里的矢量圖標(biāo)庫(kù)，非常不錯(cuò)，支持CDN而且支持項(xiàng)目
html5 rocks: 一個(gè)不錯(cuò)的網(wǎng)站，很多瀏覽器的新特性以及前沿的技術(shù)，都能在這上面找到文章
css tricks：如何活用CSS，以及了解CSS新特性，這里可以滿足你
JavaScript 秘密花園 JavaScript初學(xué)必看，非常不錯(cuò)
w3cplus：一個(gè)前端學(xué)習(xí)的網(wǎng)站，里面的文章質(zhì)量都挺不錯(cuò)的
node school：一個(gè)不錯(cuò)的node學(xué)習(xí)網(wǎng)站
learn git branch：一個(gè)git學(xué)習(xí)網(wǎng)站，交互很棒
前端亂燉：一個(gè)前端文章分享的社區(qū)，有很多優(yōu)秀文章
正則表達(dá)式：一個(gè)正則表達(dá)式入門(mén)教程，非常值得一看
阮一峰的博客和張?chǎng)涡竦牟┛?#xff1a;快速了解某些知識(shí)的捷徑，但是如果需要深挖，還需要其他的資源
各路大牛的博客：這個(gè)太多了，就不貼了，知乎上有很全的
各種規(guī)范的官方網(wǎng)站，不懂得時(shí)候讀規(guī)范
歷程
以前是做Java SSH的，半路出家做的前端，所以水平比較弱，遇到問(wèn)題也比較多。基本上入門(mén)靠看書(shū)和W3C School上的教程，以及一些前端博客，如湯姆大叔的博客。以前也只是使用jQuery，原生js也沒(méi)有太多的鉆研，后來(lái)逐漸看了很多本動(dòng)物書(shū)，比如老道的語(yǔ)言精粹等等。從這些書(shū)中學(xué)到了很多語(yǔ)言層面的知識(shí)。但這顯然是不夠的，所以我經(jīng)常會(huì)去社區(qū)上看看大家在談?wù)撌裁?#xff0c;然后去看看相關(guān)的資料，感興趣就會(huì)多找些資料看看，或者寫(xiě)一寫(xiě)demo。學(xué)CSS主要就是通過(guò)這種方式。后來(lái)開(kāi)始更多的關(guān)注各路大牛的博客和一些比較深的書(shū)籍，以及關(guān)注一些新的知識(shí)和框架，并且不斷地練手提交代碼到github，這樣也學(xué)到了很多知識(shí)。在實(shí)習(xí)的過(guò)程中，切身參與到實(shí)際項(xiàng)目開(kāi)發(fā)之中，能學(xué)到很多在學(xué)校學(xué)不到的理念和思維，這點(diǎn)也有很大的幫助。不說(shuō)了，我要去搬磚求offer了…
MrRaindrop的學(xué)習(xí)經(jīng)歷
應(yīng)qiu神的邀請(qǐng)分享一下前端學(xué)習(xí)經(jīng)驗(yàn)，這里對(duì)前端知識(shí)體系架構(gòu)就不做總結(jié)了，各位大神們的總結(jié)已經(jīng)相當(dāng)?shù)轿涣?#xff0c;我就貢獻(xiàn)幾個(gè)個(gè)人認(rèn)為還比較有用的鏈接大家研究研究就好，然后主要分享一下我在前端學(xué)習(xí)過(guò)程中遇到的問(wèn)題和總結(jié)的經(jīng)驗(yàn)教訓(xùn)吧，如果能幫到想要入門(mén)的FE初學(xué)者（我就姑且假定為本文的讀者受眾類型了），讓他們少走點(diǎn)彎路，每走一步都知道自己下一步的方向，這是最好了。各位大神的總結(jié)和分享詳見(jiàn)qiu神整理的FE-learning。
先說(shuō)下，前端這個(gè)東西每個(gè)人都可以有適合自己的學(xué)習(xí)方法，這篇僅作參考，寫(xiě)的有點(diǎn)亂，各位湊合看。
緣起
我是屬于誤打誤撞進(jìn)了前端，之前一直往做游戲的方向去來(lái)著，搞過(guò)游戲網(wǎng)站，玩過(guò)游戲引擎，比如unity，unreal這種商業(yè)引擎，搗鼓了幾個(gè)游戲原型，不過(guò)自打研一進(jìn)了實(shí)驗(yàn)室，直接就被導(dǎo)師派去寫(xiě)了js，導(dǎo)師給了我半個(gè)月時(shí)間讓我寫(xiě)個(gè)基于百度地圖api的數(shù)據(jù)展示頁(yè)面，雖然這個(gè)時(shí)間還是相當(dāng)寬裕的，不過(guò)之前沒(méi)怎么寫(xiě)過(guò)js，也不會(huì)用地圖api，于是我就一邊啃著《Javascript權(quán)威指南》（犀牛書(shū)）一邊參考實(shí)驗(yàn)室前人留下的“代碼”，總算是把功能都寫(xiě)出來(lái)了。那個(gè)頁(yè)面算我的js入門(mén)作了，也是我前端學(xué)習(xí)路線的開(kāi)始。
現(xiàn)在想來(lái)，雖然指派了去做前端，但是一直做下去并做好還是得靠興趣維持，當(dāng)然前端是一個(gè)趣味性十足的技術(shù)領(lǐng)域，而且社區(qū)每天都很“熱鬧”。
項(xiàng)目，下一個(gè)項(xiàng)目
我個(gè)人認(rèn)為前端的學(xué)習(xí)，初學(xué)階段你可以完全脫離開(kāi)書(shū)本，以項(xiàng)目驅(qū)動(dòng)。雖然我個(gè)人是從犀牛書(shū)開(kāi)始啃的，不過(guò)如果你沒(méi)有充足的時(shí)間，或者覺(jué)得啃大部頭乏而無(wú)味的話，還是別像我這樣。當(dāng)然了如果決定啃書(shū)最好是把書(shū)里的例子都跟著敲一遍的。我上研之前沒(méi)接觸過(guò)js，4月份還沒(méi)開(kāi)學(xué)呢就被直接被導(dǎo)師甩了個(gè)百度地圖api的項(xiàng)目到臉上，接著就是各種ERP，地圖數(shù)據(jù)展示，雖然換著花樣來(lái)一點(diǎn)不重樣，不過(guò)基本上都是前端的活，SSH和android開(kāi)發(fā)也打過(guò)醬油，整個(gè)實(shí)驗(yàn)室就我一個(gè)人寫(xiě)前端敢信？富客戶端SPA時(shí)代的后端就是一個(gè)restful接口，代碼量基本都在前端啊，寫(xiě)的我一個(gè)人怎一個(gè)爽字了得…期間跟著導(dǎo)師感受了一把創(chuàng)業(yè)，每天從7點(diǎn)搞到晚上10點(diǎn)，也算是經(jīng)歷了一段快速成長(zhǎng)期。
掌握一門(mén)技術(shù)先掌握它的大體框架，想一個(gè)能實(shí)現(xiàn)的點(diǎn)子，做一個(gè)能跑就行的demo，再去完善它的細(xì)節(jié)，等到demo完成了，對(duì)這門(mén)技術(shù)有了一個(gè)感性的認(rèn)識(shí)，再去啃書(shū)，收獲會(huì)大很多。我從開(kāi)始原生js寫(xiě)到j(luò)query，再到extjs，再到angularjs，從導(dǎo)師指定技術(shù)，到自己做技術(shù)選型，一個(gè)項(xiàng)目接著一個(gè)項(xiàng)目的練，就跟打怪升級(jí)似的。當(dāng)然沒(méi)有項(xiàng)目就去自己創(chuàng)造項(xiàng)目，動(dòng)手實(shí)現(xiàn)自己的想法是件有樂(lè)趣和成就感的事。
收集癖和知識(shí)管理
前端學(xué)習(xí)有個(gè)特點(diǎn)，很多東西都很零碎，分散，需要你自己去整理、歸納和總結(jié)。在微博、知乎上follow了眾多的大神，你不僅僅是為了聽(tīng)八卦，大神們的只言片語(yǔ)有時(shí)候留下的是無(wú)盡的余味，很有可能一個(gè)不經(jīng)意提到的一個(gè)詞就成為你下一個(gè)學(xué)習(xí)的目標(biāo)。收集這些信息，善用google，提問(wèn)，思考。就像游戲里的收集要素，前端學(xué)習(xí)也是充滿搜集要素的一個(gè)“游戲”，只不過(guò)你需要一個(gè)知識(shí)管理工具來(lái)充當(dāng)物品欄和倉(cāng)庫(kù)，我所知道的大牛們無(wú)一不是知識(shí)管理工具的重度使用者。以前用的oneNote，那時(shí)候還沒(méi)綁定到云存儲(chǔ)，現(xiàn)在基本上用evernote，筆記已經(jīng)累計(jì)到1200+篇。書(shū)簽一直打算用delicious，因?yàn)樗腔趖ag管理的，但一直沒(méi)用起來(lái)。當(dāng)然重點(diǎn)不在于這些工具，但是趁手的工具可以提高你的學(xué)習(xí)效率。最關(guān)鍵當(dāng)然是隨時(shí)保持旺盛的學(xué)習(xí)欲望，你的目標(biāo)是了解有關(guān)前端的一切（當(dāng)然不是所有都要掌握，因?yàn)楫吘鼓愕木τ邢?#xff0c;而且現(xiàn)實(shí)的說(shuō)這也不太可能）。
跟對(duì)神
這個(gè)可控性貌似不大…跟對(duì)老大這個(gè)就不多說(shuō)了，一定程度要看造化。不過(guò)話說(shuō)回來(lái)，多跟身邊的高手交流是王道，這個(gè)高手不一定要多高，但是一定要對(duì)技術(shù)有熱情。研一的時(shí)候熱情高漲，每天7點(diǎn)進(jìn)實(shí)驗(yàn)室門(mén)，然后發(fā)現(xiàn)有個(gè)家伙居然比我還早到。后來(lái)發(fā)現(xiàn)這家伙上午就走了，下午又來(lái)了，而且導(dǎo)師對(duì)此習(xí)以為常，原來(lái)這家伙晚上不睡覺(jué)通宵寫(xiě)代碼，上午才跑回去睡。后來(lái)經(jīng)常和這位神討論問(wèn)題，每次感覺(jué)經(jīng)驗(yàn)值蹭蹭蹭的往上漲。然后實(shí)驗(yàn)室還有一位神，被前面這位通宵神形容為“只能望其項(xiàng)背，一直在追趕，從來(lái)沒(méi)趕上”，兩位神的特點(diǎn)都是什么都了解一點(diǎn)，所以什么都能跟你討論得起來(lái)，我有段時(shí)間做了個(gè)讀書(shū)計(jì)劃，從c/c++到vc/mfc再到unix網(wǎng)絡(luò)編程，最后一路看到j(luò)ava核心技術(shù)和MSDN上的C#編程指南，和神們也能扯得很high了。
總之就是這兩位神把我拉進(jìn)了坑，或者說(shuō)從一個(gè)坑跳進(jìn)另一坑，雖然兩位神都不是搞前端的，不過(guò)技術(shù)之間總有相通之處。
讀書(shū)
讀書(shū)，多讀書(shū)，讀好書(shū)。在劉未鵬的博客里看到過(guò)一個(gè)公式，你第一個(gè)月的工資等于之前買(mǎi)過(guò)（讀過(guò)）的技術(shù)書(shū)價(jià)格總和（這里說(shuō)的技術(shù)書(shū)指那些經(jīng)典的公認(rèn)的好書(shū)）。討論這個(gè)公式的正確性似乎沒(méi)什么意義，然而它的合理性是毋庸置疑的，那就是多讀經(jīng)典技術(shù)書(shū)。最極端的一個(gè)例子，google的徐宥在我的大學(xué)里面說(shuō)他掃蕩了圖書(shū)館的整個(gè)TP312書(shū)架…對(duì)于前端的經(jīng)典書(shū)籍，后面列了一個(gè)我收集的前端書(shū)列（如果有遺漏的前端經(jīng)典好書(shū)，還請(qǐng)留言告訴我），有條件可以嘗試刷一遍這些書(shū)，我也是在找完整的時(shí)間去啃完它們。之前說(shuō)的，前端知識(shí)點(diǎn)松散，收集零散的知識(shí)點(diǎn)，從博客里快速學(xué)習(xí)等，這些只是前端學(xué)習(xí)的一個(gè)方面，如果你要想深入理解一個(gè)知識(shí)體系，了解它的來(lái)龍去脈，對(duì)它建立系統(tǒng)認(rèn)識(shí)，讀經(jīng)典書(shū)還是必不可少的。
我從最開(kāi)始啃完犀牛書(shū)，然后接著去看了其他一些和前端干系不大的經(jīng)典技術(shù)書(shū)，再后來(lái)通過(guò)實(shí)驗(yàn)室的項(xiàng)目和自己弄的一些小項(xiàng)目逐漸對(duì)前端領(lǐng)域比較上路以后，又看了《Javascript模式》、《Javascript設(shè)計(jì)模式》、《編寫(xiě)可維護(hù)的Javascript》，后來(lái)了解到node并開(kāi)始用node搞點(diǎn)小玩意兒，又看了本《NodeJS up and run》和《Mongodb權(quán)威指南》，不過(guò)感覺(jué)前者略坑。那會(huì)兒樸靈那本深入淺出（曬書(shū)么么噠）還沒(méi)出，后來(lái)出了就去圖書(shū)館借來(lái)看完，這么看下來(lái)感覺(jué)還不錯(cuò)，不過(guò)感覺(jué)看的還是偏少了，還需要繼續(xù)刷（參照上面的書(shū)列）。
前端的定位
前端的定位關(guān)乎到你需要吸收什么樣的知識(shí)和技能，決定在技術(shù)世界里你對(duì)什么需要格外敏感。如果你認(rèn)為前端僅僅停留在切頁(yè)面，實(shí)現(xiàn)交互和視覺(jué)的要求，那你對(duì)前端的認(rèn)識(shí)還停留在初級(jí)階段。阿里終面的時(shí)候我問(wèn)了考官這么個(gè)問(wèn)題：前端技術(shù)日新月異，范圍越擴(kuò)越寬，標(biāo)準(zhǔn)越來(lái)越豐富，似乎任何一個(gè)觸角都能伸出很遠(yuǎn)。怎么給前端一個(gè)合適的定位？考官給我分析了半天，然后總結(jié)成一句話，就是用戶和網(wǎng)站的聯(lián)結(jié)者，用戶體驗(yàn)的創(chuàng)造者（原話不是這樣，但大體是這個(gè)意思）。也就是說(shuō)前端的終極目標(biāo)其實(shí)就是創(chuàng)造用戶體驗(yàn)，提升用戶體驗(yàn)，以用戶體驗(yàn)為中心。不管你是從交互設(shè)計(jì)上下手，還是從性能優(yōu)化出發(fā)，或者改進(jìn)工作流提升工作流效率，最終都是為了創(chuàng)造和提升用戶體驗(yàn)，最終都要體現(xiàn)到用戶體驗(yàn)這一點(diǎn)上來(lái)。我認(rèn)為這個(gè)總結(jié)非常有道理（當(dāng)然“用戶體驗(yàn)”這個(gè)詞太寬泛了，并且不僅僅是前端工程師的范疇，比如開(kāi)發(fā)后臺(tái)的時(shí)候?qū)σ粋€(gè)數(shù)據(jù)處理過(guò)程進(jìn)行優(yōu)化，提升了整體性能，這也是對(duì)用戶體驗(yàn)的一個(gè)提升）。
現(xiàn)在的前端工程師做到一定階段不可避免會(huì)接觸到很多比切頁(yè)面、實(shí)現(xiàn)視覺(jué)要求、實(shí)現(xiàn)交互等更深入的問(wèn)題，比如前端自動(dòng)化、圖像編程、性能優(yōu)化等等，再往后推一點(diǎn)就是PHP/JSP/ASP/nodeJs，過(guò)去后端模板一般屬于后端的范疇，現(xiàn)在隨著前端架構(gòu)的演進(jìn)，可能會(huì)讓你去寫(xiě)后端模板的代碼，需要用到后端語(yǔ)言（PHP/Java/C#等），這就是所謂大前端（然而這與前端的定位并不是相背離的，大前端處理的依然是與用戶接觸的部分，仍然是對(duì)用戶體驗(yàn)的優(yōu)化）。可能最常見(jiàn)或者被談?wù)撟疃嗟木褪莕ode，其實(shí)這幾種技術(shù)選型都可以，bat三家據(jù)說(shuō)百度用PHP比較多，阿里用node比較多。
玉伯在他的博客里提過(guò)所謂全端是橫向的，全棧是縱向的。全端即所有的終端說(shuō)白了都是前端，因?yàn)槎缄P(guān)乎到用戶體驗(yàn)，直接和用戶接觸。適應(yīng)多終端的開(kāi)發(fā)，要求你在web前端的基礎(chǔ)上，可能還要去擴(kuò)展android開(kāi)發(fā)和ios開(kāi)發(fā)的知識(shí)，好在由于hybrid開(kāi)發(fā)方式的流行，對(duì)使用native語(yǔ)言開(kāi)發(fā)的技能會(huì)要求的不那么深入。
全棧可以說(shuō)是最適合初創(chuàng)公司的一種發(fā)展類型，廣義上認(rèn)為是從前端干到后端，從開(kāi)發(fā)干到運(yùn)維，這種就不說(shuō)了，一般人應(yīng)該不會(huì)想要去往這個(gè)方向發(fā)展，想要成為這種意義上的full-stack dev的，可能用不著來(lái)看我這篇文章了；而狹義上的全棧特指使用js語(yǔ)言從前端寫(xiě)到架設(shè)在nodeJs上的后端，前后端統(tǒng)一語(yǔ)言，統(tǒng)一編程模型，甚至公用同一套代碼。更多了解全棧開(kāi)發(fā)可以看看玉伯這篇說(shuō)說(shuō)全棧工程師。
以上是我對(duì)前端以及衍生出來(lái)的技術(shù)路線的一些淺薄理解，學(xué)習(xí)一個(gè)領(lǐng)域掌握它的整體上的走向和趨勢(shì)還是挺重要的。另外如果想要對(duì)前端學(xué)習(xí)方向、職業(yè)成長(zhǎng)路徑有一個(gè)整體的認(rèn)識(shí)，推薦看看拔赤總結(jié)的這篇前端開(kāi)發(fā)十日談。
最后
“我自己是一名從事了5年前端的老程序員，辭職目前在做講師，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端干貨，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5到各種框架都有整理，送給每一位前端小伙伴，這里是小白聚集地，歡迎初學(xué)和進(jìn)階中的小伙伴。"
加QQ群：931661106（招募中）
關(guān)注公眾號(hào)：蝌蚪前端
每晚7點(diǎn)直播講課，送前端學(xué)習(xí)資料，從基礎(chǔ)到框架，專業(yè)的老師為你指導(dǎo)
加微?：QD_666_QD
貢獻(xiàn)幾個(gè)對(duì)前端學(xué)習(xí)、面試有幫助的鏈接：
前端面試問(wèn)題合集（Front-end-Developer-Interview-Questions）（https://github.com/darcyclarke/Front-end-Developer-Interview-Questions）
前端技能匯總（JacksonTian）（https://github.com/JacksonTian/fks）
另一張前端技能匯總圖（http://www.f2er.info/）
前端那點(diǎn)事兒（書(shū)列）（http://book.douban.com/doulist/13701898/）
byr論壇yiyizym的建議
與grunt相比，學(xué)習(xí)gulp會(huì)比較簡(jiǎn)單
做SPA的話，推薦backbone.js和 backbone.marionette.js
翻墻不用折騰，花十塊錢(qián)買(mǎi)一個(gè)月的 紅杏。
把基礎(chǔ)打扎實(shí)了再學(xué)這些都沒(méi)問(wèn)題。
html 沒(méi)什么好說(shuō)的，有空學(xué)學(xué)html5。
css 盡量看文檔 ，因?yàn)楹芏嘀形馁Y料都各執(zhí)一辭，看多了反而會(huì)糊涂。
有個(gè)網(wǎng)站可以查找html/css標(biāo)簽、屬性在各個(gè)瀏覽器中的支持情況，挺好用的。
javascript 就看 javascript高級(jí)程序設(shè)計(jì) 。不過(guò)這么厚的書(shū)看過(guò)就會(huì)忘。對(duì)javascript核心概念的講解：對(duì)象/原型鏈/ 構(gòu)造函數(shù)/執(zhí)行上下文/作用域鏈/閉包/this，這里有篇不錯(cuò)的文章。
有閑情可以看看 ecmascript 6，計(jì)劃明年6月就發(fā)布啦。阮一峰的網(wǎng)站有入門(mén)資料。
jquery 有很多 API,這個(gè)網(wǎng)站可以方便查到。有時(shí)間弄清楚jquery deferred 的用法。
多給 sublimetext 裝插件，比如說(shuō)檢查代碼錯(cuò)誤的，新建目錄文件的，整理代碼的。
轉(zhuǎn)載于:https://my.oschina.net/u/4085667/blog/3037235
總結(jié)
以上是生活随笔為你收集整理的从前端菜鸟到大神，看这一篇就够了的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 从前端菜鸟到大神！都经历了些什么？
- 下一篇： 前端方向-学习指路