個人前端學習經歷

寫在以前

從事了三年多前端開發的工做，前先後後學習了不少東西，感受學得愈來愈心累，可好像本身也沒有學到些什麼，也沒有摸清晰前端的思路，想寫篇文章總結一下。

學習過程

1. 原生js/html/css階段

這會兒剛剛畢業實習，一切都不懂，僅僅會的也是在vs裏面拖動按鈕，列表等綁定數據，前端懂得也是點點皮毛的表格嵌套，問我大學學了前端什麼的話，答案是什麼都沒有學到！！！

而後開始了我學習前端摸打滾爬的血路史。

第一個項目（都稱不上項目）是本身設計網站首頁效果圖而後還原。開始熟悉ps,仿着其餘網站本身畫設計，畫得很醜，也一次又一次的修改，最後本身熟練了ps的使用。最深入的收穫仍是帶個人師傅左一遍又一遍告訴個人，「前端一個像素都特別重要，一個像素能影響整個頁面佈局，必定要細心」，這讓我養成了從此嚴謹佈局的習慣。

以後就是還原，基本都是div標籤，都沒有太弄懂各個標籤有啥用處，感受能用就行。css基本都沒有複用，寫完不少css樣式。雖然看完了基礎的js，但本身寫仍是難，真正理解了的getElementById,getElementsByTagName這些，就知道是取元素用的，以後看網上示例實現了banner滾動，無縫滾動之類的。

這算了解點前端三大將，明白了點前端主要是幹嗎的了。

以後本身所有手寫html/css/js模仿一個用戶體驗很好的網站。完成以後對html/css已經有了一些認識，有了些底氣。

憑靠着這兩個不成型的項目（但我今天再去看，我以爲是很認真的，看着很清晰，很舒心）我得到了第一份工做。

2. html5/css3/jquery/js進階 階段

第一份工做是作商城的，大量的出活動頁面，各種頁面佈局。開始使用header、footer、nav等html5標籤，大量的transform、animation、keyframes等css3動畫實現，這個階段鍛鍊了css/html以及html5/css3。固然原生js這時候就很吃力了，jquery拯救了我，那會兒我以爲jquery簡直是上帝。

今後漫長的時間裏面，開始html/css/jquery實現頁面的階段，不斷的取dom操做dom。

比較吃力的時候

• 使用canvas實現移動端簡單小遊戲時候，canvas學習網站
• 本身寫一些公用小插件的時候
• 複雜的活動操做，如刮刮卡、搖一搖之類的

推薦閱讀

• 大量的dom操做綁定,須要用到模板引擎，我使用的是Handlebars和art-template
• 移動端的彈性佈局,阮一峯老師的Flex 佈局教程

pc和m端的佈局

• pc端 設計稿1920px，最小兼容1200px,定位通常基於1200px
• m端 設計稿 640px 或者750px

pc和m端的佈局單位

• pc端 通常使用px和百分比
• m端 m端通常使用rem,px,百分比，活動頁通常使用rem，字體不要用rem,更好的是用flex佈局
• 涉及兼容使用css媒體查詢@media

切圖和圖標

• 切圖拉參考線將切片存成web格式，透明圖片用png,通常使用jpg，調整質量，壓縮圖片大小
• 圖標可設置成字體圖標，如Iconfont-阿里巴巴矢量圖標庫
• 使用2倍圖標，多個圖標整合成一張png圖片，經過background-size取到

3. vue階段

剛開始學習Vue，使用script標籤引入vue1.0，學習vue的語法。實現整個頁面不用操做dom,改變數據會自動操做dom,這個時候感受Vue真牛，代碼也簡潔了不少。

學習Vue的生命週期，Vue的動畫等。

而後學習es6,我看的是阮一峯老師的ECMAScript 6 入門

es6須要掌握：

• class 類的使用的繼承
• let/const 和var 的區別，及他們的使用
• promise 解決回調的問題
• ...擴展運算符實用
• 數組和對象的解構和擴展
• ``模板字符串的使用
• async/await 請求方式

而後接觸單頁頁面，本身嘗試搭建環境，學習webpack的使用,瞭解package.json，webpack.config.js文件北榮，瞭解webpack打包以後是什麼，頁面須要引入什麼。

瞭解組件化是什麼意思，實現組件化後熟悉的html頭部、頁面在哪裏。

最後使用vue的腳手架工具Vue CLI,搭建簡單項目，學會Vue Router,學習vue中數據的管理vuex

4. react 階段

學習react

1.react 中文文檔：doc.react-china.org/

2.React組件生命週期小結：www.jianshu.com/p/4784216b8…

3.React.js小書：huziketang.com/books/react…

react 狀態管理

1.redux: redux.js.org/

2.mobx: cn.mobx.js.org/

3.mobx詳解：www.jianshu.com/p/505d9d9fe…

下一步學習React Native

React Native中文網: reactnative.cn/

5. SVN 和git 的使用

剛開始在項目中都是使用svn,就是簡單的獲取提交和解決衝突。後面慢慢更多的使用git,卻感受git仍是比較複雜的

熟悉的git工做流方式

1. 克隆項目到本地

git clone ssh://user@host/path/to/repo.git

2. 成員A建立一個新的分支

git checkout -b new-branchA # 建立並切換到新分支new-branchA

3. 成員A提交代碼

git status # 查看修改
git add . #提交到暫存區
git commit -m "提交註釋" # 提交文件
git push origin new-branchA # 將提交推送到遠程倉庫
複製代碼

4. 成員A發起一個Pull Request
5. 項目維護者審查pull request，沒問題後Merge pull request
6. 成員A或其餘成員獲取更新

git checkout master # 切換到master分支
git pull origin master #拉取遠程master分支最新代碼合併到本地倉庫
複製代碼

6. 實用工具

1.can i use 查看兼容：caniuse.com/

最後

這篇文章是本身工做中的一些總結，如有不對的地方，歡迎你們指出。