新手如何系統地學習前端開發

02-03

借用一段話來開頭：古代小說里，高手如雲，人們為了生存，要掌握一套保命武功。其中，我最喜歡的是輕功，畢竟三十六計走為上策（狡詐的一笑）。說到底，武功和技術一樣，都是為了生存。問題是，現實一點來說，一個武者，很難掌握所有的武功秘籍，因為臣妾做不到啊；所以如果有一種武功，能夠遠攻和近攻，能逃跑能單挑，那就極好了。

玩「農藥」也一樣，我發現英雄們各有優缺點，但你又不可能什麼英雄都練，因為臣妾也做不到啊，畢竟上場時就一個英雄，所以就需要選擇，我選擇的是呂布和趙雲，他倆在遊戲故事設定中是情敵，其實貂蟬喜歡的是趙雲，我之所以選這兩個情敵成為基友，是因為符文一樣，這點很重要，五級符文真mde難攢，呂布和趙雲戰鬥力都很棒，我基本就練這兩個，現在的級別是永久鑽石，雖然不是最厲害的，但在王者的世界，確有一席之地。

技術也是一樣，我通過一套技術，每天用這套技術開發，不斷磨練，好過啥都學，啥都不深入，因為之所以深入，是因為你不斷去用，很多時候，一個技術名出來，就買書學，其實很傻很天真，因為技術是手段，目的是解決開發問題，如果用不上，就毫無意義。明白了學習技術的意義，我們來扯扯怎麼系統的來學習前端。

學習前端是個很龐雜的工程。一定要學會分析，每個階段怎樣去學習不能一股腦的看別人是怎麼樣你就怎麼樣。

把前端學習分為三部分來學習：

一、HTML和CSS

注重學習的是布局方式，鍛煉基本思維。

1. HTML基礎，CSS基礎，CSS核心屬性

2. CSS樣式層疊，繼承，盒模型

3. 容器，溢出及元素類型

4. 瀏覽器兼容與寬高自適應

5. 定位，錨點與透明

6. 圖片整合

7. 表格，CSS屬性與濾鏡

8. HTML5新增的元素與屬性

9. 表單域增強元素

10. CSS3選擇器

11. 文字字體相關樣式

12. CSS3位移與變形處理

13. CSS3 2D轉換與過度動畫

14. CSS3 3D轉換與關鍵幀動畫

15. 彈性盒模型

16. 媒體查詢

17. 響應式設計

開始對於有些人來說，可能有點兒困難，但隨著不斷的重複性的練習，和對常用布局結構的熟悉和常用CSS屬性的熟悉，慢慢就好了。這部分知識貴在堅持。

二、JavaScript

主要鍛煉的是邏輯能力，和對基礎知識的掌握程度。千萬不要想當然覺得自己會了，結果過幾天就什麼都忘記。寫一個效果，要看之前代碼好幾遍。

1. 基本語法、循環語句、函數與數組

2. String與Date、BOM與DOM、事件、cookie存儲

3. 正則表達式、Ajax、面向對象基礎、運動與遊戲開發、Promise/A+

4. 設計模式（觀察者模式等）、原型鏈、構造函數、執行上下文棧與執行上下文、變數對象與活動對象

5. 作用域鏈、閉包、this、ES5、ES6、ajax大概先列舉這麼多吧！這個裡面重點學習的是面向對象和設計模式。最後找個例子來練習，比如微信打飛機等等。

三、工具類的學習和常用框架

1. Gulp

2. Webpack

3. NPM

4. Git/SVN

這些東西，是工作中必不可少的，所以必須要學習

Vue.js的學習裡面重點學習以下知識點：

1) Vue.js基礎、模塊化、單文件組件

2) 路由、伺服器通信、狀態管理

3) 單元測試與生產發布、服務端渲染SSR與Nuxt.js、Mint UI, Element UI

其實還有很多，不一一列舉了，框架的學習只要認真掌握一個，其他的上手非常快。最後，還有就是微信小程序、node.js這塊多看看。