我的前端學習經歷

leinizisky發表於2018-10-08
前端

寫在之前

從事了三年多前端開發的工作，前前後後學習了很多東西，感覺學得越來越心累，可好像自己也沒有學到些什麼，也沒有摸清晰前端的思路，想寫篇文章總結一下。

學習過程

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學習網站
  • 自己寫一些公用小外掛的時候
  • 複雜的活動操作，如刮刮卡、搖一搖之類的

推薦閱讀

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

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

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

  1. 成員A提交程式碼
git status # 檢視修改
git add . #提交到暫存區
git commit -m "提交註釋" # 提交檔案
git push origin new-branchA # 將提交推送到遠端倉庫
複製程式碼
  1. 成員A發起一個Pull Request
  2. 專案維護者審查pull request，沒問題後Merge pull request
  3. 成員A或其他成員獲取更新
git checkout master # 切換到master分支
git pull origin master #拉取遠端master分支最新程式碼合併到本地倉庫
複製程式碼

6. 實用工具

1.can i use 檢視相容：caniuse.com/

最後

這篇文章是自己工作中的一些總結，若有不對的地方，歡迎大家指出。

相關文章