到今天，前端學(xué)習(xí)剛好滿一年。我也順利從非計(jì)算機(jī)專業(yè)轉(zhuǎn)到前端。對(duì)于前端學(xué)習(xí)，自己也是摸著石頭過(guò)河，中間也有過(guò)困惑和迷茫。本文主要講述自己一年來(lái)對(duì)于前端學(xué)習(xí)的心得體會(huì)，希望能對(duì)學(xué)習(xí)前端的人提供一些幫助。

?

　　前端主要分為三部分：html，css，js。

?

　　html：首先得了解標(biāo)簽的含義，用在哪里，常用的用多了就知道了。另外H5也要去了解，對(duì)于H5的學(xué)習(xí)可以自己動(dòng)手做一個(gè)H5的動(dòng)畫場(chǎng)景。這里面涉及比較多的是css3樣式以及canvas。

?

　　css: 關(guān)于css還是推薦看書系統(tǒng)的學(xué)下。單看網(wǎng)上的，你可能只知道怎么用，卻不知道他這樣用所隱藏的含義。還有就是容易產(chǎn)生混亂，所以還是建議看書系統(tǒng)學(xué)一學(xué)。有些概念還是要掌握的，不然面試很容易懵逼。

?

　　js: 這個(gè)是最復(fù)雜的。首先建議先看書了解基本語(yǔ)法。但是只看不動(dòng)手是不行的。很多人沒(méi)有項(xiàng)目也不知道從何練起。我個(gè)人是推薦百度前端技術(shù)學(xué)院題目，每一個(gè)題目后面都提供了解決這個(gè)問(wèn)題所需要的知識(shí)點(diǎn)的鏈接。題目難度是逐漸增加的，越到后面越難。我自己也沒(méi)有做完，看個(gè)人情況。我把我自己做的放在了github上，可以下載查看當(dāng)做參考。之后再繼續(xù)看書，繼續(xù)學(xué)習(xí)。

?

其他　　

　　框架：這個(gè)等你有了一定的JavaScript基礎(chǔ)后在開(kāi)始學(xué)比較好。推薦入門jQuery, 這個(gè)比較簡(jiǎn)單，容易建立信心。之后再學(xué)其他的框架，react, vue, angular. 學(xué)習(xí)框架建議先看框架文檔，一般配有簡(jiǎn)單入門教程。現(xiàn)在用的比較多的都有中文版的教程的，所以不懂英文的可以看中文的。后期可以在github上找些項(xiàng)目練手。能夠加深你對(duì)這些框架的理解。

?

　　項(xiàng)目：最好去實(shí)習(xí)，參與一些項(xiàng)目。如果沒(méi)有實(shí)習(xí)經(jīng)驗(yàn)的，也可以自己找項(xiàng)目做。比如簡(jiǎn)單的游戲，網(wǎng)站模仿等等，另外也可以網(wǎng)上搜，自己跟著做一個(gè)出來(lái)。我個(gè)人是在實(shí)習(xí)后又花了10多天搞了一個(gè)簡(jiǎn)單web論壇，采用PHP, jQuery和mysql源碼參見(jiàn)：https://github.com/huanshen/web-bbs。這個(gè)可以參看《PHP和MySQL Web開(kāi)發(fā)》，這本書能夠讓你知道前端后臺(tái)是如何一起工作的。這個(gè)項(xiàng)目在面試中發(fā)揮了蠻大的作用。問(wèn)我項(xiàng)目難點(diǎn)的時(shí)候都說(shuō)它。因?yàn)榍岸瞬糠值碾y點(diǎn)感覺(jué)叫不上難點(diǎn)（就個(gè)人實(shí)習(xí)做的項(xiàng)目而言，也可能自己的實(shí)習(xí)比較水，畢竟小公司）。個(gè)人面經(jīng)參看：2017年秋招前端招聘面經(jīng)，另外自己也總結(jié)了一些前端面試常問(wèn)的問(wèn)題，含答案。

前端面試筆試知識(shí)匯總1（含答案）；

前端面試筆試知識(shí)匯總2（含答案）；

前端面試筆試知識(shí)匯總3（含答案）；

?

　　nodejs: 這個(gè)很有必要去學(xué)習(xí)，具體可以看網(wǎng)上的教程《包教不包會(huì)》（https://github.com/huanshen/node-lessons）,但是不是很系統(tǒng)，最好是找本書籍看看。第一遍比較難理解，你就照著寫就好，不理解也沒(méi)關(guān)系。可以看看nodejs相關(guān)文章或者書籍，以后有空再來(lái)一遍，慢慢你就會(huì)理解了。

?

　　ES6: 現(xiàn)在很多人都用ES6，所以還是推薦各位去了解一下。推薦阮一峰老師寫的書籍：http://es6.ruanyifeng.com/ 。我自己也根據(jù)上面的教程做了一些總結(jié)。參看：http://www.cnblogs.com/huansky/tag/ES6/??。

?

　　自動(dòng)化構(gòu)建工具：屬于加分項(xiàng)，你不懂也可以，懂更好。沒(méi)必要都了解，選一種去學(xué)習(xí)，有時(shí)間再去了解其他的，之前自己也 寫過(guò)gulp學(xué)習(xí)筆記。對(duì)于webpack,暫時(shí)還沒(méi)有去接觸。

建議：

　　基礎(chǔ)：面試最看重的還是基礎(chǔ)，所以一定要把基礎(chǔ)打好。書還是要多看的。《JavaScript高級(jí)程序設(shè)計(jì)》《JavaScript啟示錄》《JavaScript語(yǔ)言精粹》《JavaScript設(shè)計(jì)模式》等。總之要多看書。還有記得，書是一定要看多遍的 ！看完記得總結(jié)。

?

　　讀源碼：建議先讀underscore.js。代碼總共1600多行（包含注釋說(shuō)明），相比其他比較簡(jiǎn)單，就是一個(gè)函數(shù)庫(kù)。讀源碼可以先看看網(wǎng)上的源碼的文章，后面自己在對(duì)著說(shuō)明文檔讀源碼。盡可能讀懂每個(gè)函數(shù)的含義（讀不懂也不必太糾結(jié)）。后面再?gòu)拇蠓较蚍治鲎髡邽槭裁匆@么寫，包含其中一些細(xì)節(jié)的處理啊。然后思考如果是你，你會(huì)怎么寫等等。后面也可以閱讀jQuery或者其他的。

?

　　后臺(tái)：很多人說(shuō)如今前后端分離，沒(méi)有必要再去學(xué)習(xí)后臺(tái)或者。個(gè)人認(rèn)為這是錯(cuò)誤的。首先，你把前后端一刀切斷，這個(gè)本身就不對(duì)了，這只會(huì)讓你的路越走越窄；其次你懂后臺(tái)，遇到問(wèn)題方便和后臺(tái)交流；再者，編程語(yǔ)言是相通的，你多學(xué)了一門語(yǔ)言，肯定會(huì)在無(wú)形之間提升了你自己的能力。最后，哪一個(gè)牛逼的程序猿只懂一門語(yǔ)言啊。

?

　　學(xué)習(xí)方法：每個(gè)人學(xué)習(xí)方法不一樣，但是最重要的一點(diǎn)是要總結(jié)，然后慢慢摸索出適合自己的學(xué)習(xí)方法。個(gè)人覺(jué)得，你可以注冊(cè)一個(gè)博客，將自己平時(shí)學(xué)到的，看到的，記錄下來(lái)，沒(méi)事也可以瀏覽下自己寫的。無(wú)聊的時(shí)候看看別人寫的博客，你會(huì)從中學(xué)到很多的。

?

　　遇到困難：如果學(xué)習(xí)中遇到不理解的，建議先百度谷歌，一般都能夠得到解答的。還是不懂再去問(wèn)別人，沒(méi)人可問(wèn)也可以先跳過(guò)，繼續(xù)學(xué)習(xí)后面的。過(guò)段時(shí)間再來(lái)看一遍，你會(huì)發(fā)現(xiàn)有些問(wèn)題已經(jīng)不是問(wèn)題了。還有一點(diǎn)最重要的就是要學(xué)會(huì)堅(jiān)持。不要三天打魚，兩天曬網(wǎng)。既然選擇了前端，就風(fēng)雨兼程。

?

　　最后預(yù)祝大家在前端道路上越走越遠(yuǎn)。

轉(zhuǎn)載于:https://www.cnblogs.com/huansky/p/5990991.html

總結(jié)

以上是生活随笔為你收集整理的总结一年来的前端学习心得的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。