大前端學習路線（持續更新）

大前端學習路線

導語：

Hi，你好呀！爲了讓你在學習 大前端 的路上少走彎路，咱們準備了這份指南。讓咱們開始吧！

開發前準備

代碼編輯器

工欲善其事，必先利其器

• WebStom

  WebStorm 是 jetbrains 公司旗下一款JavaScript 開發工具。目前已經被廣大中國JS開發者譽爲「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。與 IntelliJ IDEA 同源，繼承了IntelliJ IDEA強大的JS部分的功能。

• Sublime text

  Sublime Text 是一個跨平臺的編輯器，同時支持Windows、Linux、Mac OS X等操做系統。它具備漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書籤，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。

• Visual Studio Code

  Visual Studio Code 是微軟推出的一款輕量開源編輯器，採起了和VS相同的UI界面，搭配合適的插件能夠優化前端開發的體驗。

代碼調試

• Chrome Dev Tools

  Chrome Dev Tools 淺析：成爲更高效的開發人員 - 文章 - 伯樂在線

版本管理

• Git

  深刻淺出Git教程

  Git圖形解剖

  Pro Git（中文版）

• SVN

編程基礎

算法

數據結構

設計模式

HTML

HTML基礎

• HTML教程

HTML語義

• HTML與CSS進階教程

CSS

CSS基礎

• CSS教程

Grid

• CSS網格佈局指南

Flex

• Flex 佈局教程：語法篇

響應式設計和媒體查詢

• Bootstrap

CSS 預處理

• Less

• Sass

JavaScript

ECMAScript

• MDN web 文檔

• ECMAScript® 2015 Language Specification

DOM

BOM

ES6

• ECMAScript 6 入門

核心

• 函數：一等公民

• 內存機制

  JavaScript 工做原理（一）——內存管理與四種常見內存泄漏的處理方法；

  Java內存區域模型、對象建立過程、常見OOM； Java 棧和棧幀

  什麼是堆和棧，它們在哪兒？--堆棧 Java虛擬機的堆、棧、堆棧如何去理解？

  Java中的堆和棧的區別

• 編譯

  詞法分析

  語法分析

  語義分析

• 運行時

  執行環境（執行上下文）

  做用域鏈

  this

  閉包

• 異步機制

• 高階函數

  高階函數 - 廖雪峯

  如何在 JS 代碼中消滅 for 循環

• 原型 && 原型鏈 && 原型

  深刻連接 JavaScript，這一篇就夠了

函數式編程

• 《JS 函數式編程指南》

前端框架（React && React Native）

框架基礎

• 搭建環境

• JSX 語法

• Props && State

• 生命週期函數

• React 官網；

• React Native 中文網；

狀態管理

• Redux

• dva

頁面跳轉

• 路由：react-route

• 導航堆棧：react-navigation

Virtual DOM（虛擬 DOM） && diff 算法

靜態類型檢測

PropTypes

• 使用 PropTypes 進行類型檢查

Flow

• 官網

TypeScript

• 官網

代碼規範

ESLint

• 官網

TSLint

JavaScript 編程規範

• Airbnb

React 編程規範

• Airbnb React

JS工具庫

classnames

moment

axios

jquery

immutable

lodash

RxJS

ramda

測試

單元測試

• Jest

• Enzyme

• Mocha

集成測試

• Karma

端到端測試

• Selenium

• Webdriver

項目構建

Webpack

npm

yarn

Jenkins

gulp

代碼維護

Bugly

Sentry

熱更新

博客推薦

JavaScript

• 每一個JavaScript工程師都應懂的33個概念

React

• React 開發者指南

前端綜合

• 收集優秀的中文前端博客

• （2018）年終回顧，爲你彙總一份「前端技術清單」

總結：