鑒于時(shí)不時(shí)，有同學(xué)私信問(wèn)我怎么學(xué)前端的問(wèn)題。
這里統(tǒng)一回復(fù)一下，如下次再遇到問(wèn)我此問(wèn)題同學(xué)，就直接把本文鏈接地址發(fā)給你了。

首先說(shuō)句題外話。關(guān)于有人管我叫大神的事情。
個(gè)人感覺(jué)這跟你買(mǎi)東西時(shí)，人家管你叫帥哥一樣，你答應(yīng)與否都無(wú)妨。

正題開(kāi)始，前端怎么學(xué)，應(yīng)該因人而異，別人的方法未必適合自己。
就說(shuō)說(shuō)我的學(xué)習(xí)方法吧。
我把大部分時(shí)間放在學(xué)習(xí)js上了。因?yàn)檫@個(gè)js的學(xué)習(xí)曲線，先平后陡。
項(xiàng)目實(shí)踐和練習(xí)啥的，我不說(shuō)了，主要說(shuō)下工作之外的時(shí)間利用問(wèn)題。
我是怎么學(xué)的呢，看書(shū)，分析源碼。
個(gè)人這幾天統(tǒng)計(jì)了一下，前端書(shū)籍目前看了50多本吧。大部分都是js的。市面上的書(shū)基本，差不多都看過(guò)。

第一個(gè)問(wèn)題是，看書(shū)有啥好處？
好處應(yīng)該是不言而明的，書(shū)看多了，基礎(chǔ)會(huì)逐漸夯實(shí)起來(lái)。
看多了，自己的判斷力，自然就上來(lái)了。
看別人的文章，就能很快判斷出，對(duì)方每塊兒講得對(duì)不對(duì)，哪塊兒又是自己不清楚的，模棱兩可的。
當(dāng)然也為看源碼，分析源碼提供了基礎(chǔ)。

10本書(shū)讀2遍的好處，應(yīng)該大于一本書(shū)讀20遍。
10本書(shū)的交集，那就是基礎(chǔ)知識(shí)的核心，而并集那就是所有的知識(shí)。
好書(shū)當(dāng)然要多讀，反復(fù)讀。但是只讀一本是不行的。
因?yàn)槊勘緯?shū)的側(cè)重點(diǎn)都不一樣。從不同的側(cè)面，去理解一個(gè)知識(shí)點(diǎn)，是很有意義的。
所以特別佩服印度人，他跟你講英文，你一個(gè)詞語(yǔ)沒(méi)聽(tīng)懂，他會(huì)蹦出n個(gè)同一意思的單詞，你聽(tīng)懂一個(gè)，就ok了。
看書(shū)也是這樣的，某一塊講得不透徹，不用擔(dān)心，其他書(shū)籍可以幫助你來(lái)了解。

第二個(gè)問(wèn)題是，書(shū)籍推薦。
個(gè)人覺(jué)得不錯(cuò)的，沒(méi)事可以翻翻的。書(shū)籍如下：

>《javascript面向?qū)ο缶幊讨改稀?，風(fēng)格輕松易懂，比較適合初學(xué)者，原型那塊兒講得透徹，12種繼承方式呢。

>《js權(quán)威指南》、《js高級(jí)程序設(shè)計(jì)》，這兩本書(shū)經(jīng)典是經(jīng)典，但是太厚，適合把其中任意一章都當(dāng)成一本書(shū)來(lái)讀。洋洋灑灑，很難一口氣看完。比較適合當(dāng)做參考書(shū)。

>《你不知道的javascript》狙擊js核心細(xì)節(jié)，閉包、原型、this講得都還清楚。目前《中冊(cè)》也出了，還在看。

>《js設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》js設(shè)計(jì)模式也是要學(xué)的，此書(shū)把js的設(shè)計(jì)模式講得非常清晰，一點(diǎn)不晦澀，看起來(lái)沒(méi)多少難度。

>《正則指引》，分析源碼時(shí)，如果正則表達(dá)式不懂，沒(méi)法進(jìn)行下去的。此書(shū)相對(duì)來(lái)說(shuō)講得比較清晰。

>《基于MVC的JavaScript Web富應(yīng)用開(kāi)發(fā)》，看完后，基本能寫(xiě)出自己的mvc框架了。是本好書(shū)。

>《javascript函數(shù)式編程》，js是一門(mén)函數(shù)式語(yǔ)言，此書(shū)是函數(shù)式編程一個(gè)入門(mén)，函數(shù)是一等公民那是非常重要的。

>《js忍者秘籍》，jq作者寫(xiě)的，沒(méi)有傳說(shuō)中的那么難讀，話說(shuō)就算你看完并理解所有知識(shí)點(diǎn)，也不會(huì)達(dá)到世界高手級(jí)別的。因?yàn)槟氵€沒(méi)有做到隨心所欲。

>《javascript框架設(shè)計(jì)》，如果初看此書(shū)，會(huì)覺(jué)得此書(shū)有羅列代碼之嫌。在我看來(lái)，此書(shū)講究的是框架的全局觀。

以上書(shū)籍是我認(rèn)為是成就高手之路上必須看的，也需要反復(fù)看。

css相關(guān)的書(shū)籍，說(shuō)實(shí)話我看得比較少，總共有六七本吧。有兩本必須推薦一下：

>《css權(quán)威指南》，css基礎(chǔ)知識(shí)點(diǎn)那是講得非常清楚的。什么層疊優(yōu)先級(jí)、line-height啥的。不是隨便一本書(shū)都敢叫“權(quán)威指南”的。

>《css揭秘》此書(shū)我也是不斷的看，此書(shū)才不屑于全面講css3各屬性呢。css規(guī)范文檔能講的，它只會(huì)講你最不在意的。此書(shū)解決的47問(wèn)題，解決思路和解決方案同等重要，很有啟發(fā)性。以上各書(shū)你都可以不買(mǎi)，至少買(mǎi)本此書(shū)吧。

第三個(gè)問(wèn)題，怎么看。

想必很多同學(xué)，都想看書(shū)，但是很難看下去。
文字部分相對(duì)來(lái)說(shuō)還能看看，一遇到代碼，頭皮就發(fā)麻了。
此問(wèn)題一開(kāi)始時(shí)我也遇到的。

說(shuō)一個(gè)學(xué)習(xí)理論。
比如說(shuō)學(xué)英語(yǔ)，有個(gè)開(kāi)水理論。
詞匯量必須達(dá)到6000才行，如果沒(méi)達(dá)到，英文水平不會(huì)上去的，
這跟燒開(kāi)水一樣，沒(méi)事燒燒，放著涼涼，從來(lái)沒(méi)燒到100度，那么此水是永遠(yuǎn)不能喝的。
一旦煮沸過(guò)，就可以隨時(shí)喝了。

20本書(shū)你看不下去，說(shuō)明什么呢？

任何一本書(shū)，你都沒(méi)看完過(guò)。熟悉的，永遠(yuǎn)只是前三章。別笑，我原先也是這樣的。
那么現(xiàn)在的問(wèn)題是，怎么把一本書(shū)看完呢？
很簡(jiǎn)單，敲。
《基于MVC的JavaScript Web富應(yīng)用開(kāi)發(fā)》這本書(shū)我看時(shí)，就是這樣，終于有一天，我下定決心要把此書(shū)從頭到尾敲一遍。
文字加代碼都敲，然后就一章一章得看完了。代碼敲一遍后，你會(huì)發(fā)現(xiàn)，沒(méi)之前看起來(lái)的那么難。
如果你屬于一看書(shū)就犯困那種同學(xué)。強(qiáng)烈建議你把《javascript面向?qū)ο缶幊讨改稀反藭?shū)從頭到尾敲一遍。
堅(jiān)持看完一本書(shū)后，信心就上來(lái)了。先保證看完一本再說(shuō)。看完3本后，基本應(yīng)該能做到幾天就能看一本了。萬(wàn)事開(kāi)頭難，加油吧。

第四個(gè)問(wèn)題，看書(shū)的層次問(wèn)題。

書(shū)看完后，要自己總結(jié)，要與其他書(shū)籍對(duì)比看。有同學(xué)同時(shí)對(duì)比著看《權(quán)威指南》和《高設(shè)》來(lái)的。
隨便拿出個(gè)知識(shí)點(diǎn)，你都能閉著眼睛說(shuō)得頭頭是道，說(shuō)明水平夠了。

下一塊就是源碼的學(xué)習(xí)了。
看框架源碼之前，想說(shuō)一件事情：dom的api不懂，沒(méi)問(wèn)題，你可以百度。但是正則一定要先研究研究。
不然大多數(shù)人去嘗試分析源碼時(shí)，遇到的挫折都在于此。

怎么去閱讀源碼呢？

敲，照著敲。

有哪些代碼值得去敲呢？
優(yōu)秀框架或者庫(kù)的源碼都值得你去敲。
但是拿jq來(lái)敲，來(lái)入門(mén)，那不行的。原因：太他么長(zhǎng)了。八九千行呢??！

個(gè)人覺(jué)得underscore.js庫(kù)是不錯(cuò)的第一個(gè)選擇。原因都是工具方法，敲完以后自己的水平應(yīng)該略有小成吧。
其實(shí)有一些api的實(shí)現(xiàn)，你要把它當(dāng)成getElementById一樣，深深的印在腦海里。比如extend方法，必須張口就來(lái)。
敲完underscore庫(kù)后，可以考慮去看看《javascript函數(shù)式編程》這本書(shū)了。

jq的源碼不好敲。那么zepto的源碼比較少1800多行，敲一天應(yīng)該敲完了。
敲幾遍后，把所有不懂的地方，都百度清楚，然后就可以寫(xiě)自己的類(lèi)jq的庫(kù)了。
然后就可以作為一項(xiàng)技能寫(xiě)進(jìn)自己的簡(jiǎn)歷里。比如“創(chuàng)建過(guò)自己的jquery庫(kù)”。
當(dāng)然敲的過(guò)程，還能幫助自己對(duì)jq的api認(rèn)識(shí)。

然后是backbone.js，因?yàn)榇丝蚣苁且灶?lèi)jq和underscore為基礎(chǔ)的mvc框架。代碼也沒(méi)多少行。敲吧。
spine.js與backbone類(lèi)似?？梢栽谇闷渲?，先看看那本《基于MVC的JavaScript Web富應(yīng)用開(kāi)發(fā)》。
希望你的簡(jiǎn)歷可以添加這么一筆，“創(chuàng)建過(guò)自己的mvc框架”。

其他的，我也敲過(guò)一些。包括jq.validate.js，包括一些插件。
如果你愿意的話，bootstrap你可以去敲敲啊。源碼挺多的，可以按插件逐個(gè)來(lái)敲。
分析明白了，輪播、分頁(yè)、下拉框等等的插件那還不是分分鐘隨手就寫(xiě)一個(gè)了。
最起碼看看人家api接口是怎么設(shè)計(jì)的也是極好的。話說(shuō)個(gè)人在閱讀其css代碼中，也學(xué)到了不少東西。
說(shuō)到插件，有兩個(gè)必須提提，一個(gè)是表格插件，一個(gè)是樹(shù)。都敲完，簡(jiǎn)歷里可以這么寫(xiě)上，“創(chuàng)建過(guò)自己的UI框架”。

當(dāng)然了，你也可以敲你喜歡的框架代碼，重要的是明白其實(shí)現(xiàn)原理，最好理解其為啥那么設(shè)計(jì)，如果對(duì)設(shè)計(jì)模式比較熟悉的話，會(huì)經(jīng)常發(fā)現(xiàn)原來(lái)是這么回事。。。
照著敲只是分析源碼的入門(mén)，用途也是為了學(xué)習(xí)，最后能用在自己的項(xiàng)目中，那是才是正道。
就算沒(méi)啥用，也是打發(fā)時(shí)間的好方式，比看電視劇強(qiáng)多了。我閑著無(wú)聊時(shí)，就背著敲underscore源碼。

最后說(shuō)句，如果你簡(jiǎn)歷上能如期寫(xiě)上那幾句話后，必須是大神。加油吧。

后記：寫(xiě)本文的最初目的，正如文章開(kāi)頭說(shuō)的那樣，方便自己回復(fù)大家的提問(wèn)。
本站的任何一篇分享學(xué)習(xí)經(jīng)驗(yàn)的文章，基本都會(huì)引起共鳴，這確實(shí)是一個(gè)值得討論的話題。
這里再說(shuō)說(shuō)幾個(gè)事情。

>有人問(wèn)我前端工作經(jīng)驗(yàn)事情。

沒(méi)幾年。三年多。

>初學(xué)者或新手（beginner）怎么辦？

看書(shū)和分析源碼是重要的提高方式，但不適合新手。
新手需要的是能快速的入門(mén)和入行，能快速的上手工作。
一種快捷的學(xué)習(xí)方式就是看視頻。正如有的同學(xué)說(shuō)得那樣，知道有哪些東西，怎么用就可以了。

看視頻是有好處的，首先它是一種被動(dòng)學(xué)習(xí)方式。
我最開(kāi)始的入門(mén)也是看視頻來(lái)的，只需要看就行了。
一遍沒(méi)懂，再放一遍，我基本上是1.5倍數(shù)去看的。
而讀書(shū)是一種主動(dòng)方式，需要自己一頁(yè)一頁(yè)翻。需要自己主動(dòng)的去理解。
而很多東西，也許只是視頻老師一句話，就能突出的重點(diǎn)，需要我們自己去解讀。
還有另一件事情是，比如發(fā)現(xiàn)自己某個(gè)知識(shí)點(diǎn)不太清楚，可以單獨(dú)去百度。
比如this，文章很多的。這種學(xué)習(xí)方式也是快速掌握知識(shí)點(diǎn)的好辦法。

書(shū)籍需要技術(shù)評(píng)審，那么看文章一定要看看評(píng)論。不過(guò)視頻就不好說(shuō)了，視頻一般都不會(huì)講得太深入，偶爾也有講錯(cuò)的。
當(dāng)年我也曾被一些視頻誤導(dǎo)過(guò)，建議找不錯(cuò)的視頻看看。各大網(wǎng)站培訓(xùn)機(jī)構(gòu)的免費(fèi)視頻挺多的。

>看書(shū)和分析源碼的時(shí)機(jī)
但已經(jīng)工作一年半載時(shí)，正是提高的好時(shí)候，此時(shí)可以去看書(shū)了。全面系統(tǒng)的梳理知識(shí)點(diǎn)，掃清自己的盲區(qū)。
如果只是靠項(xiàng)目經(jīng)驗(yàn)是不夠的，通過(guò)項(xiàng)目來(lái)學(xué)習(xí)，那肯定是必須的，工作本身就是一個(gè)學(xué)習(xí)的過(guò)程。
但是工作三年不看書(shū)的話，學(xué)又能學(xué)到多少呢？更何況每個(gè)項(xiàng)目都很類(lèi)似，一直處在舒適區(qū)，那真就是5年經(jīng)驗(yàn)重復(fù)第一年的了。
所以我不認(rèn)同這句話：面試時(shí)強(qiáng)調(diào)自己的學(xué)習(xí)能力是工作能力不強(qiáng)的表現(xiàn)。
3年經(jīng)驗(yàn)的水平，完全有可能超過(guò)5年的。

>沒(méi)有時(shí)間去學(xué)習(xí)？

如果你還沒(méi)畢業(yè)，就已經(jīng)天天在本站混了。其實(shí)你領(lǐng)先了一大步。
都是混過(guò)大學(xué)的。天天充斥著lol和電視劇的陪伴，我只想說(shuō)進(jìn)入社會(huì)是要還的。
最可怕的是什么呢？該還、還不還（這幾個(gè)字別念錯(cuò)了）。時(shí)間是有的，就看你愿意付出不。
下班后學(xué)習(xí)，周末學(xué)習(xí)，節(jié)假日別人玩的時(shí)候，在家敲代碼。這樣才能領(lǐng)先別人。

>興趣問(wèn)題？

興趣和擅長(zhǎng)是一個(gè)良性迭代循環(huán)。你擅長(zhǎng)某件事情，就會(huì)越喜歡它，越喜歡，就越愿意花時(shí)間，進(jìn)而越擅長(zhǎng)。
此道理都懂，只是缺乏一個(gè)trigger。如果你喜歡玩游戲的話，其實(shí)你可能非常適合做前端。
玩游戲就是一個(gè)反饋機(jī)制，前端工作的反饋，相對(duì)其他工作來(lái)說(shuō)也是非常及時(shí)的。代碼一改，網(wǎng)頁(yè)一刷，就看到效果了。
擅長(zhǎng)、優(yōu)越感、成就感通常都是連在一起的。每看完一本書(shū)，我都覺(jué)得很有成就感。每敲完一個(gè)庫(kù)，也有成就感。

以上純屬一家之言，每個(gè)人的學(xué)習(xí)習(xí)慣、方式、態(tài)度都不一樣。先端正態(tài)度、找到自己的學(xué)習(xí)方法，進(jìn)而養(yǎng)成堅(jiān)持下去的習(xí)慣。
最后說(shuō)一句，你我共勉：只要你走在正確的道路上，不管、走得多慢，都是前進(jìn)！
本文完。

以上就是本文的全部?jī)?nèi)容，謝謝作者的分享，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。