【F2E】2021大前端学习路线

2021大前端学习路线

好长时间没有进行技术总结了，今天在与老同学闲聊中被问到前端相关的学习资料，也是时候对大前端相关技术做一个梳理了，说干就干。前端生态丰富多彩，要学的东西很多，自己不懂的也很多，有些技术栈也是浅尝辄止，以下内容为个人见解并基于优先级排序。

web 发展历程

前端发展经历了一个比较漫长的发展过程，大致历程可以分为以下几个阶段：上古时代、铁器时代、小前端时代、全能前端时代

• HTML 起源
• HTML 2.0 规范发布
• 万维网联盟 W3C（World Wide Web Consortium）成立
• 网景推出 JavaScript
• 第一次浏览器战争
• XHTML
• 动态页面的崛起
• AJAX 的流行
• 第二次浏览器大战
• HTML 5
• Node.js 的爆发
• 前端 MVVM 架构
• 移动 Web 和 Hybrid App
• 前端为王时代

HTML5 + CSS3

HTML5 是构建 Web 内容的一种语言描述方式，CSS3 是 CSS（层叠样式表）技术的升级版本

• HTML 基本标签和属性
• HTML5 新标签和属性
• CSS 样式（选择器、常用属性...）
• CSS3 新特性（过渡、动画、2D/3D 转换、边框、圆角、背景、渐变...）
• DIV 布局（盒模型、flex 布局、瀑布流、圣杯布局、双飞翼布局...）
• 表单验证
• 音视频基本操作
• Canvas 基础（动画、游戏...）

JavaScript 基础

一种具有函数优先的轻量级，解释型或即时编译型的编程语言

• 语法及语句
• 内置对象
• 函数、事件
• 变量、作用域
• DOM、BOM
• OOP（面向对象）
• 闭包
• 数据结构
• 常见算法
• ES6+
• Ajax（同源策略及处理）
• jQuery
• 设计模式
• 常用正则

ES6+ 基础

既是一个历史名词,也是一个泛指

• 变量及常量
• 箭头函数
• 模板字符串
• 解构赋值（数组解构、对象解构、赋值解构...）
• 扩展运算符（对象、数组、函数扩展...）
• Promise 异步编程
• generator 生成器函数
• async/await
• JavaScript 异步发展历程
• Class（JavaScript 中的类）
• 接口的制作和引用

web 及移动端

移动端 Web 其实指的是 World Wide We 全球广域网网页

• web 基本布局及移动端布局
• @media 媒体查询
• flex 弹性布局
• 响应式布局
• 移动端事件
• zepto.js
• 终端设备检测
• 性能优化

Node.js 基础

一个基于 Chrome V8 引擎的 JavaScript 运行环境

• node 发展历程
• 常用模块
• 基础服务搭建
• npm 包管理器
• 事件驱动
• 非阻塞异步 I/O
• npm 包管理器
• 事件循环及消息队列

webpack

一个模块打包器

• 基础配置（入口、出口...）
• 服务及热更新
• 文件打包相关
• 图片打包
• webpack 模块化
• 第三方库打包
• webpack 打包原理
• 前端工程化
• CommonJS/AMD/ES Module 规范

Git

一个开源的分布式版本控制系统

• Git 基础命令及使用场景
• 版本推送、回退、管理、撤销、删除...
• 远端操作
• 分支管理

Vue.js

一套用于构建用户界面的渐进式 JavaScript 框架

• Vue 发展历程
• MVVM 原理及相较于 MVC 的区别
• 虚拟 DOM 及 diff 算法
• 组件化思想
• 生命周期
• 响应式原理
• 事件处理
• Vue 全家桶
• Vuex 状态管理模式
• vue-router 路由
• 常用组件库（element、iview、Ant Design Vue...）
• Nuxt.js 服务端渲染框架

小程序开发

一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想

• 小程序发展历程
• 开发环境搭建
• 常用 API
• 基础组件
• 列表及条件渲染
• 数据绑定
• 组件与生命周期
• 路由与事件
• 小程序原生业务（付款、授权...）
• uniapp 多端框架

React.js

用于构建用户界面的 JavaScript 库，起源于 Facebook 的内部项目

• React 发展历程
• 虚拟 DOM 及 diff 算法
• JSX
• 事件处理
• 生命周期
• 组件分类及编写
• Redux 状态管理模式
• React Hooks
• 常用组件库（Ant Design、Bulma、Chakra UI、Material UI、Semantic UI...）
• Next.js 服务端渲染框架
• Taro 多端框架

Node.js 深入

使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效

• Node 爬虫
• Node 服务与高并发处理
• Express 进阶
• Koa 进阶
• MySQL 关系型数据库
• MongoDB 非关系型数据库
• Egg/Nest 框架

ReactNative

使用 React 来编写原生应用的框架

• RN 发展历程
• 开发环境搭建
• RN 布局
• 列表组件
• 导航相关操作

TypeScript 基础

TypeScript 是微软开发的一个开源的编程语言，通过在 JavaScript 的基础上添加静态类型定义构建而成

• TypeScript 发展历程
• 原始数据类型
• 任意值
• 类型推论
• 联合类型
• 对象的类型-接口
• 数组的类型
• 函数的类型
• 类型断言
• 声明文件
• 内置对象

TypeScript 进阶

TypeScript 通过 TypeScript 编译器或 Babel 转译为 JavaScript 代码，可运行在任何浏览器，任何操作系统。

• 类型别名
• 字符串字面量类型
• 元组
• 枚举
• 类
• 类与接口
• 泛型
• 声明合并

Flutter

由 Google 的工程师团队打造，用于创建高性能、跨平台的移动应用

• Dart 基础
• Flutter 开发环境搭建
• Flutter 常用组件
• Flutter 布局
• 导航及其他扩展...

Linux 运维基础

与研发、测试、系统管理同为互联网产品技术支撑的 4 大部门

• Linux 安装及配置
• Linux 基础知识和命令
• 远程连接及 SSH
• 文本编辑及版本控制
• 网络安全
• Shell 脚本编写
• 服务器管理
• 内存与磁盘管理
• Nginx 服务器配置

前端测试

写一些代码来验证所谓的可以交付的代码是所预期的设计

• 单元测试
• 性能测试
• 大规模并发测试
• 接口测试

编程相关

技多不压身

• OOP/AOP
• 数据结构与算法
• 设计模式

计算机相关

技多不压身

• 软件工程/软件测试原理
• 编译原理
• 计算机原理
• 计算机网络
• 操作系统
• 算法原理

代码组织相关

技多不压身

• 类库模块化（CommonJS/AMD/ES Module/YUI3 模块）
• 业务逻辑模块化（Bower/Component）
• 文件加载（LABjs/SeaJS/Require.js）
• 模块化预处理器（Browserify）

可视化相关

技多不压身

• SVG/Canvas/VML
• SVG: D3/Raphael/Snap.svg/DataV
• Canvas: CreateJS/KineticJS
• WebGL/Three.JS

网络安全相关

技多不压身

• CSRF/XSS
• CSP
• Same-origin policy
• ADsafe/Caja/Sandbox

性能相关

技多不压身

• JSPerf
• YSlow 35 rules
• PageSpeed
• HTTPWatch
• DynaTrace's Ajax

部署相关

技多不压身

• YUI Compressor
• Google Clousure Complier
• UglifyJS
• CleanCSS
• JSDoc

书籍推荐

腹有诗书气自华

• 《JavaScript 语言精粹》
• 《JavaScript 高级程序设计（第 3 版）》
• 《JavaScript 高级程序设计（第 4 版）》
• 《JavaScript 权威指南》
• 《你不知道的 JavaScript》
• 《学习 JavaScript 数据结构与算法》
• 《Web 性能权威指南》
• 《深入浅出 Node.js》

Keep Learning