大前端学习路线（持续更新）

大前端学习路线

导语：

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）年终回顾，为你汇总一份「前端技术清单」

总结：

转载于:https://juejin.im/post/5c6ed230f265da2db3055277