|
|
|
|
# 前端学习路线
|
|
|
|
|
|
|
|
|
|
> 这份学习路线并不完美,也不会有最终形态,正如前端不可预见、永无止境的未来。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
💂 + 💻 = 👴🏽
|
|
|
|
|
|
|
|
|
|
建议先观看视频导读:https://www.bilibili.com/video/BV1nh411e7oG/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 路线特点
|
|
|
|
|
|
|
|
|
|
1. 一份全面的前端知识点大梳理和汇总
|
|
|
|
|
2. 分阶段学习,每个阶段给出学习目标
|
|
|
|
|
3. 使用符号对知识点的重要程度做了区分,按需学习
|
|
|
|
|
4. 知识点附有描述和资源链接
|
|
|
|
|
5. 提供一份清晰的个人顺序学习路线方法
|
|
|
|
|
6. 提供大量优质学习资源
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 符号表
|
|
|
|
|
|
|
|
|
|
可根据知识点前的符号按需选学,并获取知识点描述和学习资源。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- ⭐️ 必学(追求速成)
|
|
|
|
|
|
|
|
|
|
- ✅ 建议学(重要知识)
|
|
|
|
|
|
|
|
|
|
- ❗ 面试重点
|
|
|
|
|
|
|
|
|
|
- ❌ 一般没必要学习
|
|
|
|
|
|
|
|
|
|
- 💬 描述
|
|
|
|
|
- 📚 资源
|
|
|
|
|
- 🎯 目标
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 大纲
|
|
|
|
|
|
|
|
|
|
1. 前言 - 学编程需要的特质
|
|
|
|
|
2. 前端学习七阶段
|
|
|
|
|
1. 前端入门
|
|
|
|
|
2. 巩固基础
|
|
|
|
|
3. 前端工程化
|
|
|
|
|
4. 前端优化
|
|
|
|
|
5. 前端生态
|
|
|
|
|
6. 前端求职
|
|
|
|
|
7. 前端未来
|
|
|
|
|
3. 我的前端学习路线
|
|
|
|
|
4. 尾声 - 持续学习
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 前言 - 学编程需要的特质
|
|
|
|
|
|
|
|
|
|
相信自己有能力,那么你就真的会有!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- 兴趣
|
|
|
|
|
- 坚持
|
|
|
|
|
- 付出
|
|
|
|
|
- 心态
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 一、前端入门
|
|
|
|
|
|
|
|
|
|
- 💬 描述:学习前端基础三件套,建议从实战开始,边学边练,培养兴趣,快速入门。
|
|
|
|
|
- 📚 资源
|
|
|
|
|
- freeCodecamp 在线编程:https://www.freecodecamp.org/
|
|
|
|
|
- 阿里云前端实战学习:https://edu.aliyun.com/roadmap/frontend
|
|
|
|
|
- W3Cschool 编程入门实战:https://www.w3cschool.cn/codecamp/
|
|
|
|
|
- pink老师前端入门教程:https://www.bilibili.com/video/BV14J4114768
|
|
|
|
|
|
|
|
|
|
- 🎯 目标:了解和实践各语言的基础语法,并能使用开发工具来独立开发一个留言板网站。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ⭐️ 开发工具
|
|
|
|
|
|
|
|
|
|
- 💬 描述:工欲善其事,必先利其器。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 浏览器
|
|
|
|
|
|
|
|
|
|
- ⭐️ Chrome
|
|
|
|
|
- ✅ Edge
|
|
|
|
|
- ✅ Firefox
|
|
|
|
|
- ❌ Opera
|
|
|
|
|
- Safari
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 编辑器
|
|
|
|
|
|
|
|
|
|
- ⭐️ VSCode
|
|
|
|
|
- ✅ WebStorm
|
|
|
|
|
- Atom
|
|
|
|
|
- ⭐️ Sublime Text
|
|
|
|
|
- HBuilder X
|
|
|
|
|
- 记事本
|
|
|
|
|
- 在线 IDE
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 文档笔记
|
|
|
|
|
|
|
|
|
|
- ✅ Markdown 语法
|
|
|
|
|
- ✅ Typora
|
|
|
|
|
- 在线笔记
|
|
|
|
|
- 语雀
|
|
|
|
|
- 腾讯文档
|
|
|
|
|
- 石墨文档
|
|
|
|
|
- 印象笔记
|
|
|
|
|
- Mdnice
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ⭐️ HTML
|
|
|
|
|
|
|
|
|
|
- 💬 描述:用于定义一个网页结构的基本技术。
|
|
|
|
|
- 📚 资源:https://developer.mozilla.org/zh-CN/docs/Learn/HTML
|
|
|
|
|
|
|
|
|
|
- ⭐️ 基本语法
|
|
|
|
|
- ⭐️ 标签
|
|
|
|
|
- 分区 div
|
|
|
|
|
- 标题 h1 ~ h6
|
|
|
|
|
- 段落 p
|
|
|
|
|
- 图像 img
|
|
|
|
|
- 列表 ul / ol
|
|
|
|
|
- 超链接 a
|
|
|
|
|
- 表单 form
|
|
|
|
|
- 表格 table
|
|
|
|
|
- 框架 iframe
|
|
|
|
|
- ⭐️ 属性
|
|
|
|
|
- ✅ HTML5 特性
|
|
|
|
|
- 语义化标签
|
|
|
|
|
- 浏览器支持
|
|
|
|
|
- 多媒体标签
|
|
|
|
|
- Canvas 画布
|
|
|
|
|
- ❌ 内联 SVG
|
|
|
|
|
- 本地存储
|
|
|
|
|
- localStorage
|
|
|
|
|
- sessionStorage
|
|
|
|
|
- ❌ Web SQL
|
|
|
|
|
- Web Workers
|
|
|
|
|
- 应用缓存(Cache Manifest)
|
|
|
|
|
- 无障碍
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ⭐️ CSS
|
|
|
|
|
|
|
|
|
|
- 💬 描述:层叠样式表,用于设计风格和布局。
|
|
|
|
|
- 📚 资源:https://developer.mozilla.org/zh-CN/docs/Learn/CSS
|
|
|
|
|
|
|
|
|
|
- ⭐️ 基本语法
|
|
|
|
|
- ⭐️ 引入方式
|
|
|
|
|
- 行内样式
|
|
|
|
|
- 内部样式表
|
|
|
|
|
- 外部样式表
|
|
|
|
|
- ⭐️ 选择器
|
|
|
|
|
- 通用选择器
|
|
|
|
|
- 标签选择器
|
|
|
|
|
- id 选择器
|
|
|
|
|
- class 选择器
|
|
|
|
|
- 属性选择器
|
|
|
|
|
- 派生选择器
|
|
|
|
|
- 后代选择器
|
|
|
|
|
- 子元素选择器
|
|
|
|
|
- 相邻兄弟选择器
|
|
|
|
|
- 组合选择器
|
|
|
|
|
- 伪选择器
|
|
|
|
|
- 选择器优先级
|
|
|
|
|
- ⭐️ 属性
|
|
|
|
|
- 单位
|
|
|
|
|
- px
|
|
|
|
|
- em
|
|
|
|
|
- rem
|
|
|
|
|
- vw
|
|
|
|
|
- vh
|
|
|
|
|
- 背景
|
|
|
|
|
- 文本
|
|
|
|
|
- 字体
|
|
|
|
|
- 列表
|
|
|
|
|
- 表格
|
|
|
|
|
|
|
|
|
|
- ⭐️ 文档流
|
|
|
|
|
- 标准流
|
|
|
|
|
- 浮动流
|
|
|
|
|
- 定位流
|
|
|
|
|
- ⭐️ 内联元素 / 块状元素
|
|
|
|
|
- ⭐️ 盒子模型
|
|
|
|
|
- content
|
|
|
|
|
- padding
|
|
|
|
|
- border
|
|
|
|
|
- margin
|
|
|
|
|
- ⭐️ 浮动
|
|
|
|
|
- 设置浮动 float
|
|
|
|
|
- 清除浮动 clear
|
|
|
|
|
- ⭐️ 定位
|
|
|
|
|
- static
|
|
|
|
|
- absolute
|
|
|
|
|
- fixed
|
|
|
|
|
- relative
|
|
|
|
|
- sticky
|
|
|
|
|
- ⭐️ 层叠规则
|
|
|
|
|
- ❗ BFC 和 IFC 机制
|
|
|
|
|
|
|
|
|
|
- CSS3
|
|
|
|
|
- ⭐️ 响应式布局
|
|
|
|
|
- 媒体查询
|
|
|
|
|
- Flex 布局
|
|
|
|
|
- Grid 布局
|
|
|
|
|
- 瀑布流
|
|
|
|
|
- 动画
|
|
|
|
|
- 过渡
|
|
|
|
|
- 渐变
|
|
|
|
|
- 背景
|
|
|
|
|
- 边框
|
|
|
|
|
- 圆角
|
|
|
|
|
- 字体
|
|
|
|
|
- 2D / 3D 转换
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ⭐️ JavaScript
|
|
|
|
|
|
|
|
|
|
- 💬 描述:具有函数优先的轻量级,解释型或即时编译型的编程语言。
|
|
|
|
|
- 📚 资源:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
|
|
|
|
|
|
|
|
|
|
- ⭐️ 基本语法
|
|
|
|
|
- ⭐️ 数据类型
|
|
|
|
|
- 值类型
|
|
|
|
|
- 字符串 String
|
|
|
|
|
- 数组 Number
|
|
|
|
|
- 布尔 Boolean
|
|
|
|
|
- 空值 Null
|
|
|
|
|
- 未定义 Undefined
|
|
|
|
|
- Symbol
|
|
|
|
|
- 引用类型
|
|
|
|
|
- 对象 Object
|
|
|
|
|
- 数组 Array
|
|
|
|
|
- 函数 Function
|
|
|
|
|
- ✅ 数据类型转换
|
|
|
|
|
- ✅ 函数
|
|
|
|
|
- ⭐️ 概念
|
|
|
|
|
- ⭐️ 自定义函数
|
|
|
|
|
- 调用方式
|
|
|
|
|
- ⭐️ 全局调用
|
|
|
|
|
- 构造函数调用
|
|
|
|
|
- ⭐️ 函数方法调用
|
|
|
|
|
- apply
|
|
|
|
|
- call
|
|
|
|
|
- ✅❗ 闭包
|
|
|
|
|
- ✅ 对象
|
|
|
|
|
- 概念
|
|
|
|
|
- this
|
|
|
|
|
- 原型链和继承
|
|
|
|
|
- 常用对象
|
|
|
|
|
- 数字 Number
|
|
|
|
|
- 字符串 String 对象
|
|
|
|
|
- 日期 Date 对象
|
|
|
|
|
- 数组 Array
|
|
|
|
|
- 布尔 Boolean
|
|
|
|
|
- 算数 Math
|
|
|
|
|
- 自定义对象
|
|
|
|
|
- ✅❗ 作用域(作用域链)
|
|
|
|
|
- ✅ BOM API
|
|
|
|
|
- ⭐️ DOM API
|
|
|
|
|
- ⭐️ JSON
|
|
|
|
|
- ⭐️ Ajax
|
|
|
|
|
- ✅ JavaScript 执行机制
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ✅ ES6+ 特性
|
|
|
|
|
|
|
|
|
|
- 💬 描述:新引入的 JavaScript 语法特性。
|
|
|
|
|
- 📚 资源:ES6 入门教程 https://es6.ruanyifeng.com/
|
|
|
|
|
|
|
|
|
|
- let 和 const
|
|
|
|
|
- 变量解构赋值
|
|
|
|
|
- 对象扩展和新增方法
|
|
|
|
|
- Symbol
|
|
|
|
|
- Set 和 Map 数据结构
|
|
|
|
|
- ⭐️❗ Promise & async / await 异步编程
|
|
|
|
|
- Generator 函数异步编程
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 二、巩固基础
|
|
|
|
|
|
|
|
|
|
- 💬 描述:学习前端、计算机、软件开发相关基础知识,并复习巩固上阶段学到的前端三件套。
|
|
|
|
|
- 📚 资源
|
|
|
|
|
- 《JavaScript 高级程序设计》:https://www.code-nav.cn/rd/?rid=28ee4e3e606b1e1a0e3cfd8952d172cf
|
|
|
|
|
- 《JavaScript 忍者秘籍》:https://www.code-nav.cn/rd/?rid=28ee4e3e606b16c00e3c5b18609e3dc2
|
|
|
|
|
|
|
|
|
|
- 🎯 目标:熟悉前端三件套语法,尤其是 JavaScript,并了解互联网、域名、浏览器、服务器等,扎实前端程序员的基本功,为下面进入实战开发做准备。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 前端基础知识
|
|
|
|
|
|
|
|
|
|
- ✅ 互联网
|
|
|
|
|
|
|
|
|
|
- ⭐️ 域名
|
|
|
|
|
|
|
|
|
|
- ⭐️ DNS
|
|
|
|
|
|
|
|
|
|
- ⭐️ 服务器
|
|
|
|
|
|
|
|
|
|
- ✅ 浏览器
|
|
|
|
|
|
|
|
|
|
- 浏览器 DOM 事件流 / 事件委托
|
|
|
|
|
- ⭐️ 浏览器加载顺序
|
|
|
|
|
- ⭐️ 浏览器渲染过程
|
|
|
|
|
- 浏览器事件循环
|
|
|
|
|
- 浏览器同源策略
|
|
|
|
|
- ❗ 跨域解决方案
|
|
|
|
|
- 浏览器缓存
|
|
|
|
|
- 控制台调试技巧
|
|
|
|
|
|
|
|
|
|
- ✅ HTTP
|
|
|
|
|
|
|
|
|
|
- ❗ HTTP 请求过程
|
|
|
|
|
- 常见 HTTP 协议
|
|
|
|
|
- HTTP 1.0
|
|
|
|
|
- ⭐️ HTTP 1.1
|
|
|
|
|
- HTTP 2
|
|
|
|
|
- HTTP 3
|
|
|
|
|
- ⭐️ HTTP 请求类别
|
|
|
|
|
- ⭐️ 常见状态码
|
|
|
|
|
- 1xx 信息
|
|
|
|
|
- 2xx 成功
|
|
|
|
|
- 3xx 重定向
|
|
|
|
|
- 4xx 客户端错误
|
|
|
|
|
- 5xx 服务器错误
|
|
|
|
|
- WebSocket
|
|
|
|
|
- ⭐️ Cookie
|
|
|
|
|
- Session
|
|
|
|
|
- ⭐️ HTTPS
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 计算机基础
|
|
|
|
|
|
|
|
|
|
#### ✅ 算法和数据结构
|
|
|
|
|
|
|
|
|
|
- ⭐️ 时间 / 空间复杂度分析
|
|
|
|
|
|
|
|
|
|
- 数据结构
|
|
|
|
|
- 数组
|
|
|
|
|
- 字符串
|
|
|
|
|
- 队列
|
|
|
|
|
- 栈
|
|
|
|
|
- 链表
|
|
|
|
|
- 集合
|
|
|
|
|
- 哈希表
|
|
|
|
|
- 二叉树
|
|
|
|
|
- 算法
|
|
|
|
|
- 排序
|
|
|
|
|
- 双指针
|
|
|
|
|
- 查找
|
|
|
|
|
- 分治
|
|
|
|
|
- 动态规划
|
|
|
|
|
- 递归
|
|
|
|
|
- 回溯
|
|
|
|
|
- 贪心
|
|
|
|
|
- 位运算
|
|
|
|
|
- DFS
|
|
|
|
|
- BFS
|
|
|
|
|
- 图
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ✅ 计算机网络
|
|
|
|
|
|
|
|
|
|
- HTTP 协议
|
|
|
|
|
- 网络模型
|
|
|
|
|
- UDP / TCP 协议
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ✅ 操作系统
|
|
|
|
|
|
|
|
|
|
- 进程、线程
|
|
|
|
|
- 进程 / 线程间通讯方式
|
|
|
|
|
- 进程调度算法
|
|
|
|
|
- 进程 / 线程状态
|
|
|
|
|
- 死锁
|
|
|
|
|
- 内存管理
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 软件开发基础
|
|
|
|
|
|
|
|
|
|
#### ✅ 设计模式
|
|
|
|
|
|
|
|
|
|
- 单例模式
|
|
|
|
|
- 代理模式
|
|
|
|
|
- 工厂模式
|
|
|
|
|
- 装饰者模式
|
|
|
|
|
- 观察者模式
|
|
|
|
|
- 策略模式
|
|
|
|
|
- 门面模式
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ⭐️ Git 版本控制
|
|
|
|
|
|
|
|
|
|
- 常用命令
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ✅ Linux 服务器
|
|
|
|
|
|
|
|
|
|
- 常用命令
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ✅ 正则表达式
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 三、前端工程化
|
|
|
|
|
|
|
|
|
|
- 💬 描述:前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化,其主要目的为了提高开发过程中的开发效率,减少不必要的重复工作时间。
|
|
|
|
|
- 📚 资源
|
|
|
|
|
- 什么是前端工程化?https://www.zhihu.com/question/433854153/answer/1713597311
|
|
|
|
|
|
|
|
|
|
- 🎯 目标:至少学会一门主流的前端开发框架(Vue / React),并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站,可以试着仿一些知名站点。要求遵循企业开发规范,将项目代码提交到代码仓库中,并独立发布上线,供他人访问。此外,建议抓住机会参与一些团队项目,感受团队开发模式和前端工程化的优势。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ⭐️ 研发流程
|
|
|
|
|
|
|
|
|
|
1. 技术选型
|
|
|
|
|
2. 初始化
|
|
|
|
|
3. 开发
|
|
|
|
|
4. 本地测试
|
|
|
|
|
5. 代码提交
|
|
|
|
|
6. 编译、打包、构建
|
|
|
|
|
7. 部署
|
|
|
|
|
8. 集成测试
|
|
|
|
|
9. 发布上线
|
|
|
|
|
10. 监控运维
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ⭐️ 代码托管
|
|
|
|
|
|
|
|
|
|
- 💬 描述:集中存储、备份你的代码,还能和团队成员协作开发。
|
|
|
|
|
|
|
|
|
|
- ⭐️ GitHub
|
|
|
|
|
- Gitee
|
|
|
|
|
- GitLab
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ Node.JS
|
|
|
|
|
|
|
|
|
|
- 💬 描述:一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具!
|
|
|
|
|
- 📚 资源
|
|
|
|
|
- Node.js 官方教程:http://nodejs.cn/learn
|
|
|
|
|
- Node.js 入门:https://cnodejs.org/getstart
|
|
|
|
|
|
|
|
|
|
#### ⭐️ 包管理
|
|
|
|
|
|
|
|
|
|
- 💬 描述:用于安装 Node.js 的扩展、工具等。
|
|
|
|
|
|
|
|
|
|
- ⭐️ npm
|
|
|
|
|
- ⭐️ yarn
|
|
|
|
|
- ❌ bower
|
|
|
|
|
- ✅ npx
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 开发框架
|
|
|
|
|
|
|
|
|
|
- Express
|
|
|
|
|
- Koa
|
|
|
|
|
- Egg
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 开发框架
|
|
|
|
|
|
|
|
|
|
- 💬 描述:解决特定的问题,提高*开发*效率、简化我们的代码复杂度。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ⭐️ CSS 框架
|
|
|
|
|
|
|
|
|
|
- ✅ BootStrap
|
|
|
|
|
- ⭐️ Tailwind CSS
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ⭐️ JavaScript 框架
|
|
|
|
|
|
|
|
|
|
##### ⭐️ Vue
|
|
|
|
|
|
|
|
|
|
- Vue Router
|
|
|
|
|
- Vuex
|
|
|
|
|
|
|
|
|
|
##### ⭐️ React
|
|
|
|
|
|
|
|
|
|
- React DOM
|
|
|
|
|
- React Router
|
|
|
|
|
- Redux
|
|
|
|
|
- MobX
|
|
|
|
|
- React Hooks
|
|
|
|
|
|
|
|
|
|
##### ❌ Angular
|
|
|
|
|
|
|
|
|
|
- RxJS
|
|
|
|
|
- NgRx
|
|
|
|
|
|
|
|
|
|
##### ✅ Svelte
|
|
|
|
|
|
|
|
|
|
##### ✅ UmiJS
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 封装库
|
|
|
|
|
|
|
|
|
|
#### ⭐️ 组件库
|
|
|
|
|
|
|
|
|
|
- ✅ LayUI
|
|
|
|
|
- ⭐️ ElementUI(Vue)
|
|
|
|
|
- ✅ VantUI(Vue)
|
|
|
|
|
- ⭐️ Ant Design(React)
|
|
|
|
|
- Material UI
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 数据可视化
|
|
|
|
|
|
|
|
|
|
- ✅ AntV
|
|
|
|
|
- Apache ECharts
|
|
|
|
|
- HighCharts
|
|
|
|
|
- D3.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 组件(插件)
|
|
|
|
|
|
|
|
|
|
- 富文本编辑器
|
|
|
|
|
- 弹窗
|
|
|
|
|
- 轮播图
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 工具库
|
|
|
|
|
|
|
|
|
|
- ✅ jQuery
|
|
|
|
|
- ✅ Lodash
|
|
|
|
|
- ✅ Axios
|
|
|
|
|
- 时间处理 Moment.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 动效库
|
|
|
|
|
|
|
|
|
|
- ✅ Animate.css
|
|
|
|
|
- Ant Motion
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 字体图标库
|
|
|
|
|
|
|
|
|
|
- ⭐️ IconFont
|
|
|
|
|
- IconPark
|
|
|
|
|
- Font Awesome
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ⭐️ 脚手架
|
|
|
|
|
|
|
|
|
|
- 💬 描述:快速生成新项目的目录模板,提升开发效率和开发舒适性。
|
|
|
|
|
- 📚 资源:https://www.jianshu.com/p/25ce8cf2e6a7
|
|
|
|
|
|
|
|
|
|
- Vue CLI
|
|
|
|
|
|
|
|
|
|
- create-react-app
|
|
|
|
|
- ✅ Yeoman
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ⭐️ 前端架构设计
|
|
|
|
|
|
|
|
|
|
- 💬 描述:一系列工具和流程的集合,旨在提升前端代码的质量,并实现高效可持续的工作流。
|
|
|
|
|
|
|
|
|
|
- 模块化
|
|
|
|
|
- 组件化
|
|
|
|
|
- ✅ MVVM
|
|
|
|
|
- 设计原则
|
|
|
|
|
- ⭐️ SPA 单页应用
|
|
|
|
|
- ⭐️ 多页应用
|
|
|
|
|
- ✅ 前端路由
|
|
|
|
|
- PWA
|
|
|
|
|
- 有损服务
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ✅ 服务端渲染
|
|
|
|
|
|
|
|
|
|
- 💬 描述:在服务端渲染 HTML 页面的模式。
|
|
|
|
|
- 📚 资源:https://www.zhihu.com/question/379563505
|
|
|
|
|
|
|
|
|
|
- Next.js(React)
|
|
|
|
|
- Nuxt.js(Vue)
|
|
|
|
|
- ❌ Universal(Angular)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### BFF
|
|
|
|
|
|
|
|
|
|
- 💬 描述:Backend For Frontend(服务于前端的后端),就是服务器设计 API 时会考虑前端的使用,并在服务端直接进行业务逻辑的处理。
|
|
|
|
|
- 📚 资源:https://www.jianshu.com/p/eb1875c62ad3
|
|
|
|
|
|
|
|
|
|
- GraphQL
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ✅ 微前端
|
|
|
|
|
|
|
|
|
|
- 💬 描述:将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块,从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。
|
|
|
|
|
- 📚 资源:https://zhuanlan.zhihu.com/p/96464401
|
|
|
|
|
|
|
|
|
|
- qiankun
|
|
|
|
|
- single-spa
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### CSS in JS
|
|
|
|
|
|
|
|
|
|
- 💬 描述:用 JavaScript 来写 CSS。
|
|
|
|
|
- 📚 资源:http://www.ruanyifeng.com/blog/2017/04/css_in_js.html
|
|
|
|
|
|
|
|
|
|
- 内联样式
|
|
|
|
|
- 声明样式
|
|
|
|
|
- 引入样式
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ⭐️ CSS 模块化
|
|
|
|
|
|
|
|
|
|
- ⭐️ CSS Modules
|
|
|
|
|
- ✅ styled-components
|
|
|
|
|
- ✅ Styled JSX
|
|
|
|
|
- Emotion
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ 开发调试
|
|
|
|
|
|
|
|
|
|
- 💬 描述:本地开发时热更新,提升开发效率。
|
|
|
|
|
|
|
|
|
|
- webpack-dev-server
|
|
|
|
|
- serve
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 内网穿透
|
|
|
|
|
|
|
|
|
|
- 💬 描述:将内网外网通过 nat 隧道打通,让内网的网站、数据让外网可以访问。
|
|
|
|
|
|
|
|
|
|
- Ngrok
|
|
|
|
|
- NATAPP
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ⭐️ CSS 预编译
|
|
|
|
|
|
|
|
|
|
- 💬 描述:使用新的扩展语言以增强 CSS 的能力,并通过预编译的方式将其转换为浏览器认识的 CSS 代码。
|
|
|
|
|
|
|
|
|
|
- ⭐️ SASS
|
|
|
|
|
- ✅ PostCSS
|
|
|
|
|
- Stylus
|
|
|
|
|
- ❌ LESS
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 测试
|
|
|
|
|
|
|
|
|
|
#### 测试分类
|
|
|
|
|
|
|
|
|
|
- ⭐️ UT 单元测试
|
|
|
|
|
- SIT 系统集成测试
|
|
|
|
|
- E2E 端到端测试
|
|
|
|
|
- UAT 用户验收测试
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ✅ Mock
|
|
|
|
|
|
|
|
|
|
- 💬 描述:通过随机数据,模拟各种场景,增加单元测试的真实性。
|
|
|
|
|
|
|
|
|
|
- Mock.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### ✅ 测试框架
|
|
|
|
|
|
|
|
|
|
- ✅ Jest
|
|
|
|
|
- Enzyme
|
|
|
|
|
- ✅ Puppeteer(Headless Browser)
|
|
|
|
|
- Mocha
|
|
|
|
|
|
|
|
|
|
- Jasmine
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ 代码质量
|
|
|
|
|
|
|
|
|
|
#### 开发规范
|
|
|
|
|
|
|
|
|
|
- 💬 描述:依照规范写出的代码会更加合理。
|
|
|
|
|
- 📚 资源:Airbnb 代码规范 https://github.com/BingKui/javascript-zh
|
|
|
|
|
|
|
|
|
|
- CSS Style Guide
|
|
|
|
|
- JavaScript Style Guide
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 类型校验
|
|
|
|
|
|
|
|
|
|
- TypeScript
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 代码检查
|
|
|
|
|
|
|
|
|
|
- ESLint
|
|
|
|
|
- StyleLint
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 代码风格
|
|
|
|
|
|
|
|
|
|
- 💬 描述:根据配置自动格式化代码,统一格式。
|
|
|
|
|
|
|
|
|
|
- Prettier
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 提交规范
|
|
|
|
|
|
|
|
|
|
- 约定式提交
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 提交检查
|
|
|
|
|
|
|
|
|
|
- 💬 描述:在提交代码时触发一些操作,比如检查代码的风格等。
|
|
|
|
|
|
|
|
|
|
- pre-commit
|
|
|
|
|
- husky
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 构建工具
|
|
|
|
|
|
|
|
|
|
#### 自动化构建
|
|
|
|
|
|
|
|
|
|
- 💬 描述:按照配置好的流程自动打包构建项目,提高团队的开发效率,降低项目的维护难度。
|
|
|
|
|
|
|
|
|
|
- Gulp
|
|
|
|
|
- ✅ npm script
|
|
|
|
|
- Grunt
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 打包工具
|
|
|
|
|
|
|
|
|
|
- 💬 描述:将各种零散的📚 资源文件打包为可在浏览器等环境运行的代码。
|
|
|
|
|
|
|
|
|
|
- ⭐️ Webpack
|
|
|
|
|
- ✅ Rollup
|
|
|
|
|
- ✅ Vite
|
|
|
|
|
- Parcel
|
|
|
|
|
- Snowpack
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### CI / CD
|
|
|
|
|
|
|
|
|
|
- 💬 描述:通过在应用开发阶段引入自动化来频繁向客户交付应用。
|
|
|
|
|
- GitLab CI
|
|
|
|
|
- ✅ Jenkins
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 部署
|
|
|
|
|
|
|
|
|
|
#### ⭐️ Web 服务器
|
|
|
|
|
|
|
|
|
|
##### ⭐️ Nginx
|
|
|
|
|
|
|
|
|
|
- 💬 描述:高性能的 HTTP 和反向代理 web 服务器。
|
|
|
|
|
- 📚 资源:腾讯云动手实验室 https://cloud.tencent.com/developer/labs/gallery
|
|
|
|
|
|
|
|
|
|
- 反向代理
|
|
|
|
|
- 解决跨域
|
|
|
|
|
- 改写请求
|
|
|
|
|
|
|
|
|
|
##### ✅ Apache
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 容器
|
|
|
|
|
|
|
|
|
|
##### ✅ Docker
|
|
|
|
|
|
|
|
|
|
- 💬 描述:容器是一个标准化的软件单元,它将代码及其所有依赖关系打包,以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切:代码,运行时间,系统工具,系统库和设置。
|
|
|
|
|
- 📚 资源:Docker 从入门到实践 https://vuepress.mirror.docker-practice.com/
|
|
|
|
|
|
|
|
|
|
- Dockerfile
|
|
|
|
|
|
|
|
|
|
##### Kubernetes
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 部署策略
|
|
|
|
|
|
|
|
|
|
- 全量发布
|
|
|
|
|
- 蓝绿部署
|
|
|
|
|
- 滚动发布
|
|
|
|
|
- 灰度发布
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 监控告警
|
|
|
|
|
|
|
|
|
|
- 前端埋点
|
|
|
|
|
- 错误监控
|
|
|
|
|
- 性能监控
|
|
|
|
|
- 行为监控
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 四、前端优化
|
|
|
|
|
|
|
|
|
|
- 💬 描述:通过分析和优化手段,提高网站的性能和用户体验。
|
|
|
|
|
|
|
|
|
|
- 🎯 目标:实践前端优化方法,从多个方面优化自己做过的项目,最好能将优化后的网站与原网站进行对比,得到一些数据和体验上的明显提升。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ 性能优化
|
|
|
|
|
|
|
|
|
|
#### 性能指标
|
|
|
|
|
|
|
|
|
|
- 💬 描述:用于衡量一个 Web 页面的性能。
|
|
|
|
|
- 📚 资源:https://juejin.cn/post/6844904153869713416
|
|
|
|
|
|
|
|
|
|
- FP(First Paint)
|
|
|
|
|
- 💬 描述:从开始加载到浏览器首次绘制像素到屏幕上的时间,也就是页面在屏幕上首次发生视觉变化的时间。
|
|
|
|
|
- FCP(First Contentful Paint)
|
|
|
|
|
- 💬 描述:浏览器首次绘制来自 DOM 的内容的时间。
|
|
|
|
|
- FMP(First Meaningful Paint)
|
|
|
|
|
- 💬 描述:页面的主要内容绘制到屏幕上的时间。
|
|
|
|
|
- FSP(First Screen Paint)
|
|
|
|
|
- 💬 描述:页面从开始加载到首屏内容全部绘制完成的时间,用户可以看到首屏的全部内容。
|
|
|
|
|
- TTI(Time to Interactive)
|
|
|
|
|
- 💬 描述:表示网页第一次完全达到可交互状态的时间点,浏览器已经可以持续性的响应用户的输入。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 优化手段
|
|
|
|
|
|
|
|
|
|
- 性能监控
|
|
|
|
|
- Performance API
|
|
|
|
|
- 样式优化
|
|
|
|
|
- JavaScript 优化
|
|
|
|
|
- 防抖
|
|
|
|
|
- 节流
|
|
|
|
|
- 代码分割
|
|
|
|
|
- 📚 资源压缩
|
|
|
|
|
- 打包优化
|
|
|
|
|
- 服务器优化
|
|
|
|
|
- 缓存优化
|
|
|
|
|
- Service Worker
|
|
|
|
|
- 动画性能
|
|
|
|
|
- dns-prefetch
|
|
|
|
|
- Lazy loading
|
|
|
|
|
- 优化启动性能
|
|
|
|
|
- 异步化
|
|
|
|
|
- 渲染优化
|
|
|
|
|
- 网络优化
|
|
|
|
|
- 移动端性能优化
|
|
|
|
|
- ✅ CDN
|
|
|
|
|
|
|
|
|
|
- 💬 描述:内容分发网络,是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。
|
|
|
|
|
- 📚 资源:BootCDN https://www.bootcdn.cn/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 用户体验
|
|
|
|
|
|
|
|
|
|
- 设计系统
|
|
|
|
|
- 骨架屏
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ 兼容性
|
|
|
|
|
|
|
|
|
|
#### 浏览器兼容性
|
|
|
|
|
|
|
|
|
|
- normalize.css
|
|
|
|
|
- html5shiv.js
|
|
|
|
|
- respond.js
|
|
|
|
|
- Babel
|
|
|
|
|
- Polyfill
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 屏幕分辨率兼容性
|
|
|
|
|
|
|
|
|
|
#### 跨平台兼容性
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### SEO
|
|
|
|
|
|
|
|
|
|
- 💬 描述:搜索引擎优化,利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
|
|
|
|
|
- 📚 资源:百度搜索📚 资源平台 https://ziyuan.baidu.com/cooperateresource/index
|
|
|
|
|
|
|
|
|
|
- robots.txt
|
|
|
|
|
- description
|
|
|
|
|
- keywords
|
|
|
|
|
- SiteMap
|
|
|
|
|
- HTML 标签优化
|
|
|
|
|
- 站内链接建设
|
|
|
|
|
- 友情链接
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ 安全
|
|
|
|
|
|
|
|
|
|
- ⭐️ XSS
|
|
|
|
|
- CSRF
|
|
|
|
|
- 反爬虫
|
|
|
|
|
- SQL 注入
|
|
|
|
|
- DDoS
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 五、前端生态
|
|
|
|
|
|
|
|
|
|
- 💬 描述:如今,前端领域的范围越来越广,出现了更多前端工程师需要了解和关注的技术。
|
|
|
|
|
|
|
|
|
|
- 🎯 目标:能用学到的前端技术去做更多的事情,比如开发个人博客、文档网站、小程序、APP 等。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ⭐️ 静态站点构建
|
|
|
|
|
|
|
|
|
|
#### 开发
|
|
|
|
|
|
|
|
|
|
- React Static
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 博客
|
|
|
|
|
|
|
|
|
|
- ✅ Gatsby.js
|
|
|
|
|
- ✅ Docusaurus
|
|
|
|
|
- Hugo
|
|
|
|
|
- Hexo
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 文档
|
|
|
|
|
|
|
|
|
|
- JekyII
|
|
|
|
|
- ⭐️ Docsify
|
|
|
|
|
- VuePress
|
|
|
|
|
- ✅ Dumi
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ 大前端
|
|
|
|
|
|
|
|
|
|
💬 描述:前端技术的融合更加紧密,应用的领域也更加广泛,前端领域的内容呈现多样化,除了网站外,还可以用前端技术跨平台开发 Android、iOS、小程序、虚拟现实、增强现实等。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 移动应用
|
|
|
|
|
|
|
|
|
|
- Hybrid
|
|
|
|
|
- WebView
|
|
|
|
|
- React Native
|
|
|
|
|
- Flutter
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 移动应用打包
|
|
|
|
|
|
|
|
|
|
- Weex
|
|
|
|
|
- Cordova
|
|
|
|
|
- Phonegap
|
|
|
|
|
- Ionic
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 桌面应用
|
|
|
|
|
|
|
|
|
|
- Electron
|
|
|
|
|
- NW.js
|
|
|
|
|
- Proton Native
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 小程序
|
|
|
|
|
|
|
|
|
|
- 原生
|
|
|
|
|
- WebView
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 跨端开发框架
|
|
|
|
|
|
|
|
|
|
- ✅ uni-app
|
|
|
|
|
- ✅ Taro
|
|
|
|
|
- Flutter
|
|
|
|
|
- Chameleon
|
|
|
|
|
- Wepy
|
|
|
|
|
- Rax
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 移动端调试
|
|
|
|
|
|
|
|
|
|
- Chrome Dev Tools
|
|
|
|
|
- Android Simulator
|
|
|
|
|
- IOS Simulator
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ Serverless
|
|
|
|
|
|
|
|
|
|
- 💬 描述:一种构建和管理基于微服务架构的完整流程,允许你在服务部署级别而不是服务器部署级别来管理你的应用部署,你甚至可以管理某个具体功能或端口的部署,这就能让开发者快速迭代,更快速地开发软件。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ 云开发
|
|
|
|
|
|
|
|
|
|
- 💬 描述:云端一体化的后端云服务 ,采用 Serverless 架构,免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具(CLI)、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 App 等应用。
|
|
|
|
|
|
|
|
|
|
- ✅ 腾讯云云开发
|
|
|
|
|
- 阿里云云开发
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 低代码
|
|
|
|
|
|
|
|
|
|
- 💬 描述:无需编码(零代码)或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法,使具有不同经验水平的开发人员可以通过图形化的用户界面,使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。
|
|
|
|
|
|
|
|
|
|
- 腾讯云低码
|
|
|
|
|
- 阿里宜搭
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 六、前端求职
|
|
|
|
|
|
|
|
|
|
- 💬 描述:求职是一个漫长的过程,建议拉长战线,尽早准备。
|
|
|
|
|
|
|
|
|
|
- 🎯 目标:找到理想的工作。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 流程
|
|
|
|
|
|
|
|
|
|
- 2020 秋招面经汇总:https://www.nowcoder.com/discuss/205497
|
|
|
|
|
|
|
|
|
|
### 简历
|
|
|
|
|
|
|
|
|
|
- 超级简历
|
|
|
|
|
|
|
|
|
|
### 面试题库
|
|
|
|
|
|
|
|
|
|
- 牛客前端工程师面试宝典:https://www.nowcoder.com/tutorial/96/f5212664ab664984882b00635066ded2
|
|
|
|
|
- 前端面试每日 3+1:https://github.com/haizlin/fe-interview
|
|
|
|
|
- React 面试题目 & 题解:https://github.com/sudheerj/reactjs-interview-questions
|
|
|
|
|
|
|
|
|
|
### 面经
|
|
|
|
|
|
|
|
|
|
- 前端面经汇总:https://www.nowcoder.com/discuss/experience?tagId=644
|
|
|
|
|
|
|
|
|
|
### 面试实战
|
|
|
|
|
|
|
|
|
|
- AI 模拟面试:https://www.nowcoder.com/interview/ai/cover?jobTagId=644
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 七、前端未来
|
|
|
|
|
|
|
|
|
|
- 💬 描述:前端未来可能的发展趋势和热门技术。
|
|
|
|
|
|
|
|
|
|
- 🎯 目标:关注前沿,持续进步。
|
|
|
|
|
|
|
|
|
|
- WebAssembly
|
|
|
|
|
|
|
|
|
|
- 智能 UI
|
|
|
|
|
|
|
|
|
|
- React Server Component
|
|
|
|
|
|
|
|
|
|
- CSS Houdini
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### WebComponents
|
|
|
|
|
|
|
|
|
|
- HTML templates(HTML模板)
|
|
|
|
|
- Custom elements(自定义元素)
|
|
|
|
|
- Shadow DOM(影子DOM)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 我的前端学习路线
|
|
|
|
|
|
|
|
|
|
虽然上面整理的学习路线知识点非常多,但是大家也别太担心,其实按照一定顺序和方法来学习,并不会很难,聊聊我的学习经历。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 快速入门,培养兴趣
|
|
|
|
|
|
|
|
|
|
刚开始学习前端时,一定要以培养兴趣、快速入门为目标。我入门前端时,由于没有基础、啥都不懂,因此选择在线实战教程网站来学习,跟着教程案例一行行把代码敲下来,实时浏览显示效果,很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时,我对看过的知识点没有什么印象,基本是看了就忘,当我想要自己写一个网站,也根本无从下手。
|
|
|
|
|
|
|
|
|
|
于是,我开始试着死记硬背代码,结果发现背了之后还是不会写。那干脆一不做二不休,直接打开编辑器和教程网站,把之前在线实战时敲过的代码复制粘贴到编辑器中,然后再修改保存,到浏览器中打开文件。这样虽然要在编辑器和浏览器中来回切换,但起码能看到自己的网页文件运行的效果了。后来,我利用浏览器开发者工具提升了自己开发网站的调试效率,敲出的代码达不到满意的效果时,就再去查,再改,再浏览,最后终于完成了一个留言板网站!
|
|
|
|
|
|
|
|
|
|
通过这件事,我明白了一个道理,既然记不住知识,那就先别强行记忆,上手多写,忘了就去查不就好了?不要担心自己知识不够做不出来,只要你去试,都一定能实现。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 多看多写,巩固基础
|
|
|
|
|
|
|
|
|
|
在这种操作下,我虽然能使用基础三件套开发简易网站了,但做的很慢,还老出问题。于是,我开始完整地看了几本前端入门和项目实战书籍,有三件套入门的,也有响应式网站设计的,还有 JavaScript 综合讲解的,以及一套完整的视频教程,通过这些来复习巩固之前学过的知识,打好了基础,并且了解了更多实战教程上没见到的知识。
|
|
|
|
|
|
|
|
|
|
看书和视频的过程中,我跟着做了几个简易的网站,也是边看边做。在这之后,我发现自己渐渐地能够脱离文档来写网站了!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 框架学习,学以致用
|
|
|
|
|
|
|
|
|
|
但是,总感觉开发网站时,什么都要自己写,重复的代码写一大堆,很麻烦。于是,我试着上网搜了解决这些问题的方法,发现可以用组件库减少重复编写 HTML 和 CSS 代码,于是学了 LayUI,其实和之前一样的,就是打开官网找到要用的组件,然后复制到项目中修改就行了,写的多了竟然还真记住了一些(虽然这个没必要记)。
|
|
|
|
|
|
|
|
|
|
界面和样式代码简化了,但是 JavaScript 写的我依旧头疼。于是我决定进入下一个阶段的学习,当时先看了本书叫《锋利的 jQuery》来学习 jQuery,学会之后使用它趁热打铁做了几个网站,发现的确能大大简化繁琐的 JavaScript DOM 操作,让我尝到了甜头,又有了继续学习前端的动力。
|
|
|
|
|
|
|
|
|
|
在那之后大概半年,我开始学习主流前端框架 Vue,也是跟着视频教程学,并且结合 ElementUI 组件库开发了一个响应式网站。不得不说,习惯了用原生 JavaScript 和 jQuery 开发后,再去用 Vue 开发,真的是爽飞了,小有成就感。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 根据需要,自主学习
|
|
|
|
|
|
|
|
|
|
在那之后,我就是通过不断地做项目来积累经验,既然编程知识太多学不完,那我就随需随学,逐渐拓宽自己的知识面。举个例子,我要做一个移动端 H5 页面,那就去搜 Vue 的移动端组件库,学会了 MintUI、VantUI 等;项目中要处理日期,那我就去搜日期处理库,学会了 Moment.js;项目重复文件和代码太多,我就去网上搜一些组件化、模块化的最佳实践;项目代码太大、加载太慢,我就去网上搜一些前端压缩、性能优化的方式;要把开发好的项目变成 APP,那我就去网上搜到了 Cordova 等打包工具;跟其他同学一起做项目时比较混乱、开发效率低,我就去搜了一些代码规范、前端工程化等;遇到 Bug 时,也是自己去网上搜索解决方案,并且还要看看有没有知识点是我遗漏的,我会再去弥补学习。通过不断实践、不断遇到问题和自主解决问题,我始终保持着学习的积极性,学到了越来越多前端的知识,并通过归纳总结来加深印象。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 5. 渐入佳境,拓宽视野
|
|
|
|
|
|
|
|
|
|
在那之后,我学前端技术非常快了,像 React、TypeScript、Redux、Dva、Umi、Lerna 等等都随用随学,随学随用。此外,我不仅仅关注前端网页开发本身,还同时关注前端的生态和发展,学习了微前端、Serverless、云开发、低代码等技术,因此个人的能力提升也很大。如今在鹅厂工作中也是,面对各种不同技术栈的前端项目,我都能迎难而上,毕竟不会就学嘛!
|
|
|
|
|
|
|
|
|
|
哦,写的渐入佳境,我都忘了,自己是一名后端工程师,还搁这儿吹牛逼呢( 所以本路线难免会有不专业的地方,请大家见谅~
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 6. 总结
|
|
|
|
|
|
|
|
|
|
总结一下,学前端的路线其实就一句话:基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野。还有一个学任何编程技术都要注意的点,全程多敲代码!多敲代码!多敲代码!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 尾声 - 持续学习
|
|
|
|
|
|
|
|
|
|
### 优秀前端人的特质
|
|
|
|
|
|
|
|
|
|
- 深厚的功底
|
|
|
|
|
|
|
|
|
|
- 良好的编码习惯
|
|
|
|
|
|
|
|
|
|
- 发现问题的洞察力
|
|
|
|
|
|
|
|
|
|
- 思维灵活,善于思考
|
|
|
|
|
|
|
|
|
|
- 追求技术,紧跟前沿
|
|
|
|
|
|
|
|
|
|
- 有创造力,有行动力
|
|
|
|
|
|
|
|
|
|
- 追求用户体验
|
|
|
|
|
|
|
|
|
|
- 时刻保持好奇
|
|
|
|
|
|
|
|
|
|
- 全栈意识
|
|
|
|
|
|
|
|
|
|
- 解决问题的能力强
|
|
|
|
|
|
|
|
|
|
- 懂得合作和高效沟通
|
|
|
|
|
|
|
|
|
|
- 重视工作,同样重视生活
|
|
|
|
|
|
|
|
|
|
- 责任心和全局观
|
|
|
|
|
|
|
|
|
|
- 个人的进步能带动团队的进步
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 学习资源
|
|
|
|
|
|
|
|
|
|
- 编程导航(包含以下所有资源,强烈推荐 👍):https://www.code-nav.cn
|
|
|
|
|
- freeCodecamp 在线编程:https://learn.freecodecamp.one/
|
|
|
|
|
- 阿里云前端实战学习:https://edu.aliyun.com/roadmap/frontend
|
|
|
|
|
- W3Cschool 编程入门实战:https://www.w3cschool.cn/codecamp/
|
|
|
|
|
- 腾讯云动手实验室:https://cloud.tencent.com/developer/labs/gallery
|
|
|
|
|
- pink老师前端入门教程:https://www.bilibili.com/video/BV14J4114768
|
|
|
|
|
- MDN 前端文档:https://developer.mozilla.org/zh-CN
|
|
|
|
|
- Node.js 入门:https://cnodejs.org/getstart
|
|
|
|
|
- 前端清单:https://cheatsheets.devtool.tech/
|
|
|
|
|
- 前端小课:https://lefex.github.io/
|
|
|
|
|
- 被删的前端游乐场:http://www.godbasin.com/
|
|
|
|
|
- 《ES6 入门教程》:https://es6.ruanyifeng.com/
|
|
|
|
|
- 谷歌 Web 开发者:https://developers.google.com/web
|
|
|
|
|
- JavaScript 明星项目:https://risingstars.js.org/2020/zh
|
|
|
|
|
- Best of JS:https://bestofjs.org/
|
|
|
|
|
- Codewars:https://www.codewars.com/?language=javascript
|
|
|
|
|
- Vue.js examples:https://vuejsexamples.com/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 前端资讯
|
|
|
|
|
|
|
|
|
|
- 掘金资讯:https://juejin.cn/news
|
|
|
|
|
- InfoQ:https://www.infoq.cn/topic/Front-end
|
|
|
|
|
- daily.dev:https://daily.dev/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 技术博客
|
|
|
|
|
|
|
|
|
|
- 掘金:https://juejin.cn/frontend
|
|
|
|
|
- 腾讯前端 IMWEB:http://imweb.io
|
|
|
|
|
- 腾讯 Web 前端团队 Alloy Team:http://www.alloyteam.com
|
|
|
|
|
- 淘宝前端团队:http://taobaofed.org
|
|
|
|
|
- 百度 Web 前端研发部:http://fex.baidu.com
|
|
|
|
|
- 京东凹凸实验室:https://aotu.io
|
|
|
|
|
- 360 奇舞团:https://75team.com
|
|
|
|
|
- 七牛团队技术博客:http://blog.qiniu.com
|
|
|
|
|
- 有赞技术团队:https://tech.youzan.com/tag/front-end/
|
|
|
|
|
- 百度 EFE Tech:https://efe.baidu.com/
|
|
|
|
|
|
|
|
|
|
- css-tricks:https://css-tricks.com/archives
|
|
|
|
|
- web.dev:https://web.dev/blog/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 学习要点
|
|
|
|
|
|
|
|
|
|
- 前期学习以培养兴趣为主,不要过于追求深层理解。
|
|
|
|
|
- 前端学习不能靠死记硬背,要多敲代码、多做项目实践。
|
|
|
|
|
- 不要急于求成,踏实积累才是硬道理。
|
|
|
|
|
|