001.前端学习路线

前端学习路线

这份学习路线并不完美,也不会有最终形态,正如前端不可预见、永无止境的未来。

💂 + 💻 = 👴🏽

建议先观看视频导读: https://www.bilibili.com/video/BV1nh411e7oG/

路线特点

  1. 一份全面的前端知识点大梳理和汇总
  2. 分阶段学习,每个阶段给出学习目标
  3. 使用符号对知识点的重要程度做了区分,按需学习
  4. 知识点附有描述和资源链接
  5. 提供一份清晰的个人顺序学习路线方法
  6. 提供大量优质学习资源

符号表

可根据知识点前的符号按需选学,并获取知识点描述和学习资源。

  1. ⭐️ 必学(追求速成)

  2. ✅ 建议学(重要知识)

  3. ❗ 面试重点

  4. ❌ 一般没必要学习

  5. 💬 描述

  6. 📚 资源

  7. 🎯 目标

大纲

  1. 前言 - 学编程需要的特质
  2. 前端学习七阶段
    1. 前端入门
    2. 巩固基础
    3. 前端工程化
    4. 前端优化
    5. 前端生态
    6. 前端求职
    7. 前端未来
  3. 我的前端学习路线
  4. 尾声 - 持续学习

前言 - 学编程需要的特质

相信自己有能力,那么你就真的会有!

  1. 兴趣
  2. 坚持
  3. 付出
  4. 心态

一、前端入门

  1. 💬 描述: 学习前端基础三件套,建议从实战开始,边学边练,培养兴趣,快速入门。

  2. 📚 资源

    1. freeCodecamp 在线编程: https://www.freecodecamp.org/
    2. 阿里云前端实战学习: https://edu.aliyun.com/roadmap/frontend
    3. W3Cschool 编程入门实战: https://www.w3cschool.cn/codecamp/
    4. pink老师前端入门教程: https://www.bilibili.com/video/BV14J4114768
  3. 🎯 目标: 了解和实践各语言的基础语法,并能使用开发工具来独立开发一个留言板网站。

⭐️ 开发工具

  • 💬 描述: 工欲善其事,必先利其器。
浏览器
  1. ⭐️ Chrome
  2. ✅ Edge
  3. ✅ Firefox
  4. ❌ Opera
  5. Safari
编辑器
  1. ⭐️ VSCode
  2. ✅ WebStorm
  3. Atom
  4. ⭐️ Sublime Text
  5. HBuilder X
  6. 记事本
  7. 在线 IDE
文档笔记
  1. ✅ Markdown 语法
  2. ✅ Typora
  3. 在线笔记
    1. 语雀
    2. 腾讯文档
    3. 石墨文档
    4. 印象笔记
  4. Mdnice

⭐️ HTML

  1. 💬 描述: 用于定义一个网页结构的基本技术。

  2. 📚 资源: https://developer.mozilla.org/zh-CN/docs/Learn/HTML

  3. ⭐️ 基本语法

  4. ⭐️ 标签

    1. 分区 div
    2. 标题 h1 ~ h6
    3. 段落 p
    4. 图像 img
    5. 列表 ul / ol
    6. 超链接 a
    7. 表单 form
    8. 表格 table
    9. 框架 iframe
  5. ⭐️ 属性

  6. ✅ HTML5 特性

    1. 语义化标签
    2. 浏览器支持
    3. 多媒体标签
    4. Canvas 画布
    5. ❌ 内联 SVG
    6. 本地存储
      1. localStorage
      2. sessionStorage
      3. ❌ Web SQL
    7. Web Workers
    8. 应用缓存(Cache Manifest)
    9. 无障碍

⭐️ CSS

  1. 💬 描述: 层叠样式表,用于设计风格和布局。

  2. 📚 资源: https://developer.mozilla.org/zh-CN/docs/Learn/CSS

  3. ⭐️ 基本语法

  4. ⭐️ 引入方式

    1. 行内样式
    2. 内部样式表
    3. 外部样式表
  5. ⭐️ 选择器

    1. 通用选择器
    2. 标签选择器
    3. id 选择器
    4. class 选择器
    5. 属性选择器
    6. 派生选择器
      1. 后代选择器
      2. 子元素选择器
      3. 相邻兄弟选择器
    7. 组合选择器
    8. 伪选择器
    9. 选择器优先级
  6. ⭐️ 属性

    1. 单位
      1. px
      2. em
      3. rem
      4. vw
      5. vh
    2. 背景
    3. 文本
    4. 字体
    5. 列表
    6. 表格
  7. ⭐️ 文档流

    1. 标准流
    2. 浮动流
    3. 定位流
  8. ⭐️ 内联元素 / 块状元素

  9. ⭐️ 盒子模型

    1. content
    2. padding
    3. border
    4. margin
  10. ⭐️ 浮动

    1. 设置浮动 float
    2. 清除浮动 clear
  11. ⭐️ 定位

    1. static
    2. absolute
    3. fixed
    4. relative
    5. sticky
  12. ⭐️ 层叠规则

  13. ❗ BFC 和 IFC 机制

  14. CSS3

    1. ⭐️ 响应式布局
      1. 媒体查询
      2. Flex 布局
      3. Grid 布局
      4. 瀑布流
    2. 动画
    3. 过渡
    4. 渐变
    5. 背景
    6. 边框
    7. 圆角
    8. 字体
    9. 2D / 3D 转换

⭐️ JavaScript

  1. 💬 描述: 具有函数优先的轻量级,解释型或即时编译型的编程语言。

  2. 📚 资源: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

  3. ⭐️ 基本语法

  4. ⭐️ 数据类型

    1. 值类型
      1. 字符串 String
      2. 数组 Number
      3. 布尔 Boolean
      4. 空值 Null
      5. 未定义 Undefined
      6. Symbol
    2. 引用类型
      1. 对象 Object
      2. 数组 Array
      3. 函数 Function
  5. ✅ 数据类型转换

  6. ✅ 函数

    1. ⭐️ 概念
    2. ⭐️ 自定义函数
    3. 调用方式
      1. ⭐️ 全局调用
      2. 构造函数调用
      3. ⭐️ 函数方法调用
      4. apply
      5. call
    4. ✅❗ 闭包
  7. ✅ 对象

    1. 概念
    2. this
    3. 原型链和继承
    4. 常用对象
      1. 数字 Number
      2. 字符串 String 对象
      3. 日期 Date 对象
      4. 数组 Array
      5. 布尔 Boolean
      6. 算数 Math
    5. 自定义对象
  8. ✅❗ 作用域(作用域链)

  9. ✅ BOM API

  10. ⭐️ DOM API

  11. ⭐️ JSON

  12. ⭐️ Ajax

  13. ✅ JavaScript 执行机制

✅ ES6+ 特性
  1. 💬 描述: 新引入的 JavaScript 语法特性。

  2. 📚 资源: ES6 入门教程 https://es6.ruanyifeng.com/

  3. let 和 const

  4. 变量解构赋值

  5. 对象扩展和新增方法

  6. Symbol

  7. Set 和 Map 数据结构

  8. ⭐️❗ Promise & async / await 异步编程

  9. Generator 函数异步编程

二、巩固基础

  1. 💬 描述: 学习前端、计算机、软件开发相关基础知识,并复习巩固上阶段学到的前端三件套。

  2. 📚 资源

    1. 《JavaScript 高级程序设计》: https://www.code-nav.cn/rd/?rid=28ee4e3e606b1e1a0e3cfd8952d172cf
    2. 《JavaScript 忍者秘籍》: https://www.code-nav.cn/rd/?rid=28ee4e3e606b16c00e3c5b18609e3dc2
  3. 🎯 目标: 熟悉前端三件套语法,尤其是 JavaScript,并了解互联网、域名、浏览器、服务器等,扎实前端程序员的基本功,为下面进入实战开发做准备。

前端基础知识

  1. ✅ 互联网

  2. ⭐️ 域名

  3. ⭐️ DNS

  4. ⭐️ 服务器

  5. ✅ 浏览器

    1. 浏览器 DOM 事件流 / 事件委托
    2. ⭐️ 浏览器加载顺序
    3. ⭐️ 浏览器渲染过程
    4. 浏览器事件循环
    5. 浏览器同源策略
    6. ❗ 跨域解决方案
    7. 浏览器缓存
    8. 控制台调试技巧
  6. ✅ HTTP

    1. ❗ HTTP 请求过程
    2. 常见 HTTP 协议
      1. HTTP 1.0
      2. ⭐️ HTTP 1.1
      3. HTTP 2
      4. HTTP 3
    3. ⭐️ HTTP 请求类别
    4. ⭐️ 常见状态码
      1. 1xx 信息
      2. 2xx 成功
      3. 3xx 重定向
      4. 4xx 客户端错误
      5. 5xx 服务器错误
    5. WebSocket
    6. ⭐️ Cookie
    7. Session
    8. ⭐️ HTTPS

计算机基础

✅ 算法和数据结构
  1. ⭐️ 时间 / 空间复杂度分析

  2. 数据结构

    1. 数组
    2. 字符串
    3. 队列
    4. 链表
    5. 集合
    6. 哈希表
    7. 二叉树
  3. 算法

    1. 排序
    2. 双指针
    3. 查找
    4. 分治
    5. 动态规划
    6. 递归
    7. 回溯
    8. 贪心
    9. 位运算
    10. DFS
    11. BFS
✅ 计算机网络
  1. HTTP 协议
  2. 网络模型
  3. UDP / TCP 协议
✅ 操作系统
  1. 进程、线程
  2. 进程 / 线程间通讯方式
  3. 进程调度算法
  4. 进程 / 线程状态
  5. 死锁
  6. 内存管理

软件开发基础

✅ 设计模式
  1. 单例模式
  2. 代理模式
  3. 工厂模式
  4. 装饰者模式
  5. 观察者模式
  6. 策略模式
  7. 门面模式
⭐️ Git 版本控制
  • 常用命令
✅ Linux 服务器
  • 常用命令
✅ 正则表达式

三、前端工程化

  1. 💬 描述: 前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化,其主要目的为了提高开发过程中的开发效率,减少不必要的重复工作时间。

  2. 📚 资源

  3. 🎯 目标: 至少学会一门主流的前端开发框架(Vue / React),并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站,可以试着仿一些知名站点。要求遵循企业开发规范,将项目代码提交到代码仓库中,并独立发布上线,供他人访问。此外,建议抓住机会参与一些团队项目,感受团队开发模式和前端工程化的优势。

⭐️ 研发流程

  1. 技术选型
  2. 初始化
  3. 开发
  4. 本地测试
  5. 代码提交
  6. 编译、打包、构建
  7. 部署
  8. 集成测试
  9. 发布上线
  10. 监控运维

⭐️ 代码托管

  1. 💬 描述: 集中存储、备份你的代码,还能和团队成员协作开发。

  2. ⭐️ GitHub

  3. Gitee

  4. GitLab

✅ Node.JS

  1. 💬 描述: 一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具!
  2. 📚 资源
    1. Node.js 官方教程: http://nodejs.cn/learn
    2. Node.js 入门: https://cnodejs.org/getstart
⭐️ 包管理
  1. 💬 描述: 用于安装 Node.js 的扩展、工具等。

  2. ⭐️ npm

  3. ⭐️ yarn

  4. ❌ bower

  5. ✅ npx

开发框架
  1. Express
  2. Koa
  3. Egg

开发框架

  • 💬 描述: 解决特定的问题,提高开发效率、简化我们的代码复杂度。
⭐️ CSS 框架
  1. ✅ BootStrap
  2. ⭐️ Tailwind CSS
⭐️ JavaScript 框架
⭐️ Vue
  1. Vue Router
  2. Vuex
⭐️ React
  1. React DOM
  2. React Router
  3. Redux
  4. MobX
  5. React Hooks
❌ Angular
  1. RxJS
  2. NgRx
✅ Svelte
✅ UmiJS

封装库

⭐️ 组件库
  1. ✅ LayUI
  2. ⭐️ ElementUI(Vue)
  3. ✅ VantUI(Vue)
  4. ⭐️ Ant Design(React)
  5. Material UI
数据可视化
  1. ✅ AntV
  2. Apache ECharts
  3. HighCharts
  4. D3.js
组件(插件)
  1. 富文本编辑器
  2. 弹窗
  3. 轮播图
工具库
  1. ✅ jQuery
  2. ✅ Lodash
  3. ✅ Axios
  4. 时间处理 Moment.js
动效库
  1. ✅ Animate.css
  2. Ant Motion
字体图标库
  1. ⭐️ IconFont
  2. IconPark
  3. Font Awesome

⭐️ 脚手架

  1. 💬 描述: 快速生成新项目的目录模板,提升开发效率和开发舒适性。

  2. 📚 资源: https://www.jianshu.com/p/25ce8cf2e6a7

  3. Vue CLI

  4. create-react-app

  5. ✅ Yeoman

⭐️ 前端架构设计

  1. 💬 描述: 一系列工具和流程的集合,旨在提升前端代码的质量,并实现高效可持续的工作流。

  2. 模块化

  3. 组件化

  4. ✅ MVVM

  5. 设计原则

  6. ⭐️ SPA 单页应用

  7. ⭐️ 多页应用

  8. ✅ 前端路由

  9. PWA

  10. 有损服务

✅ 服务端渲染
  1. 💬 描述: 在服务端渲染 HTML 页面的模式。

  2. 📚 资源: https://www.zhihu.com/question/379563505

  3. Next.js(React)

  4. Nuxt.js(Vue)

  5. ❌ Universal(Angular)

BFF
  1. 💬 描述: Backend For Frontend(服务于前端的后端),就是服务器设计 API 时会考虑前端的使用,并在服务端直接进行业务逻辑的处理。

  2. 📚 资源: https://www.jianshu.com/p/eb1875c62ad3

  3. GraphQL

✅ 微前端
  1. 💬 描述: 将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块,从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。

  2. 📚 资源: https://zhuanlan.zhihu.com/p/96464401

  3. qiankun

  4. single-spa

CSS in JS

  1. 💬 描述: 用 JavaScript 来写 CSS。

  2. 📚 资源: http://www.ruanyifeng.com/blog/2017/04/css_in_js.html

  3. 内联样式

  4. 声明样式

  5. 引入样式

⭐️ CSS 模块化
  1. ⭐️ CSS Modules
  2. ✅ styled-components
  3. ✅ Styled JSX
  4. Emotion

✅ 开发调试

  1. 💬 描述: 本地开发时热更新,提升开发效率。

  2. webpack-dev-server

  3. serve

内网穿透
  1. 💬 描述: 将内网外网通过 nat 隧道打通,让内网的网站、数据让外网可以访问。

  2. Ngrok

  3. NATAPP

⭐️ CSS 预编译

  1. 💬 描述: 使用新的扩展语言以增强 CSS 的能力,并通过预编译的方式将其转换为浏览器认识的 CSS 代码。

  2. ⭐️ SASS

  3. ✅ PostCSS

  4. Stylus

  5. ❌ LESS

测试

测试分类
  1. ⭐️ UT 单元测试
  2. SIT 系统集成测试
  3. E2E 端到端测试
  4. UAT 用户验收测试
✅ Mock
  1. 💬 描述: 通过随机数据,模拟各种场景,增加单元测试的真实性。

  2. Mock.js

✅ 测试框架
  1. ✅ Jest

  2. Enzyme

  3. ✅ Puppeteer(Headless Browser)

  4. Mocha

  5. Jasmine

✅ 代码质量

开发规范
  1. 💬 描述: 依照规范写出的代码会更加合理。

  2. 📚 资源: Airbnb 代码规范 https://github.com/BingKui/javascript-zh

  3. CSS Style Guide

  4. JavaScript Style Guide

类型校验
  • TypeScript
代码检查
  1. ESLint
  2. StyleLint
代码风格
  1. 💬 描述: 根据配置自动格式化代码,统一格式。

  2. Prettier

提交规范
  • 约定式提交
提交检查
  1. 💬 描述: 在提交代码时触发一些操作,比如检查代码的风格等。

  2. pre-commit

  3. husky

构建工具

自动化构建
  1. 💬 描述: 按照配置好的流程自动打包构建项目,提高团队的开发效率,降低项目的维护难度。

  2. Gulp

  3. ✅ npm script

  4. Grunt

打包工具
  1. 💬 描述: 将各种零散的📚 资源文件打包为可在浏览器等环境运行的代码。

  2. ⭐️ Webpack

  3. ✅ Rollup

  4. ✅ Vite

  5. Parcel

  6. Snowpack

CI / CD

  1. 💬 描述: 通过在应用开发阶段引入自动化来频繁向客户交付应用。
  2. GitLab CI
  3. ✅ Jenkins

部署

⭐️ Web 服务器
⭐️ Nginx
  1. 💬 描述: 高性能的 HTTP 和反向代理 web 服务器。

  2. 📚 资源: 腾讯云动手实验室 https://cloud.tencent.com/developer/labs/gallery

  3. 反向代理

  4. 解决跨域

  5. 改写请求

✅ Apache
容器
✅ Docker
  1. 💬 描述: 容器是一个标准化的软件单元,它将代码及其所有依赖关系打包,以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切: 代码,运行时间,系统工具,系统库和设置。

  2. 📚 资源: Docker 从入门到实践 https://vuepress.mirror.docker-practice.com/

  3. Dockerfile

Kubernetes
部署策略
  1. 全量发布
  2. 蓝绿部署
  3. 滚动发布
  4. 灰度发布

监控告警

  1. 前端埋点
  2. 错误监控
  3. 性能监控
  4. 行为监控

四、前端优化

  1. 💬 描述: 通过分析和优化手段,提高网站的性能和用户体验。

  2. 🎯 目标: 实践前端优化方法,从多个方面优化自己做过的项目,最好能将优化后的网站与原网站进行对比,得到一些数据和体验上的明显提升。

✅ 性能优化

性能指标
  1. 💬 描述: 用于衡量一个 Web 页面的性能。

  2. 📚 资源: https://juejin.cn/post/6844904153869713416

  3. FP(First Paint)

    • 💬 描述: 从开始加载到浏览器首次绘制像素到屏幕上的时间,也就是页面在屏幕上首次发生视觉变化的时间。
  4. FCP(First Contentful Paint)

    • 💬 描述: 浏览器首次绘制来自 DOM 的内容的时间。
  5. FMP(First Meaningful Paint)

    • 💬 描述: 页面的主要内容绘制到屏幕上的时间。
  6. FSP(First Screen Paint)

    • 💬 描述: 页面从开始加载到首屏内容全部绘制完成的时间,用户可以看到首屏的全部内容。
  7. TTI(Time to Interactive)

    • 💬 描述: 表示网页第一次完全达到可交互状态的时间点,浏览器已经可以持续性的响应用户的输入。
优化手段
  1. 性能监控

    • Performance API
  2. 样式优化

  3. JavaScript 优化

    1. 防抖
    2. 节流
  4. 代码分割

  5. 📚 资源压缩

  6. 打包优化

  7. 服务器优化

  8. 缓存优化

    • Service Worker
  9. 动画性能

  10. dns-prefetch

  11. Lazy loading

  12. 优化启动性能

    • 异步化
  13. 渲染优化

  14. 网络优化

  15. 移动端性能优化

  16. ✅ CDN

    • 💬 描述: 内容分发网络,是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。
    • 📚 资源: BootCDN https://www.bootcdn.cn/

用户体验

  1. 设计系统
  2. 骨架屏

✅ 兼容性

浏览器兼容性
  1. normalize.css
  2. html5shiv.js
  3. respond.js
  4. Babel
  5. Polyfill
屏幕分辨率兼容性
跨平台兼容性

SEO

  1. 💬 描述: 搜索引擎优化,利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

  2. 📚 资源: 百度搜索📚 资源平台 https://ziyuan.baidu.com/cooperateresource/index

  3. robots.txt

  4. description

  5. keywords

  6. SiteMap

  7. HTML 标签优化

  8. 站内链接建设

  9. 友情链接

✅ 安全

  1. ⭐️ XSS
  2. CSRF
  3. 反爬虫
  4. SQL 注入
  5. DDoS

五、前端生态

  1. 💬 描述: 如今,前端领域的范围越来越广,出现了更多前端工程师需要了解和关注的技术。

  2. 🎯 目标: 能用学到的前端技术去做更多的事情,比如开发个人博客、文档网站、小程序、APP 等。

⭐️ 静态站点构建

开发
  • React Static
博客
  1. ✅ Gatsby.js
  2. ✅ Docusaurus
  3. Hugo
  4. Hexo
文档
  1. JekyII
  2. ⭐️ Docsify
  3. VuePress
  4. ✅ Dumi

✅ 大前端

💬 描述: 前端技术的融合更加紧密,应用的领域也更加广泛,前端领域的内容呈现多样化,除了网站外,还可以用前端技术跨平台开发 Android、iOS、小程序、虚拟现实、增强现实等。

移动应用
  1. Hybrid
  2. WebView
  3. React Native
  4. Flutter
移动应用打包
  1. Weex
  2. Cordova
  3. Phonegap
  4. Ionic
桌面应用
  1. Electron
  2. NW.js
  3. Proton Native
小程序
  1. 原生
  2. WebView
跨端开发框架
  1. ✅ uni-app
  2. ✅ Taro
  3. Flutter
  4. Chameleon
  5. Wepy
  6. Rax
移动端调试
  1. Chrome Dev Tools
  2. Android Simulator
  3. IOS Simulator

✅ Serverless

  • 💬 描述: 一种构建和管理基于微服务架构的完整流程,允许你在服务部署级别而不是服务器部署级别来管理你的应用部署,你甚至可以管理某个具体功能或端口的部署,这就能让开发者快速迭代,更快速地开发软件。

✅ 云开发

  1. 💬 描述: 云端一体化的后端云服务 ,采用 Serverless 架构,免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具(CLI)、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 App 等应用。

  2. ✅ 腾讯云云开发

  3. 阿里云云开发

低代码

  1. 💬 描述: 无需编码(零代码)或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法,使具有不同经验水平的开发人员可以通过图形化的用户界面,使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。

  2. 腾讯云低码

  3. 阿里宜搭

六、前端求职

  1. 💬 描述: 求职是一个漫长的过程,建议拉长战线,尽早准备。

  2. 🎯 目标: 找到理想的工作。

流程

简历

  • 超级简历

面试题库

  1. 牛客前端工程师面试宝典: https://www.nowcoder.com/tutorial/96/f5212664ab664984882b00635066ded2
  2. 前端面试每日 3+1: https://github.com/haizlin/fe-interview
  3. React 面试题目 & 题解: https://github.com/sudheerj/reactjs-interview-questions

面经

面试实战

七、前端未来

  1. 💬 描述: 前端未来可能的发展趋势和热门技术。

  2. 🎯 目标: 关注前沿,持续进步。

  3. WebAssembly

  4. 智能 UI

  5. React Server Component

  6. CSS Houdini

WebComponents

  1. HTML templates(HTML模板)
  2. Custom elements(自定义元素)
  3. 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. 总结

总结一下,学前端的路线其实就一句话: 基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野。还有一个学任何编程技术都要注意的点,全程多敲代码!多敲代码!多敲代码!

尾声 - 持续学习

优秀前端人的特质

  1. 深厚的功底

  2. 良好的编码习惯

  3. 发现问题的洞察力

  4. 思维灵活,善于思考

  5. 追求技术,紧跟前沿

  6. 有创造力,有行动力

  7. 追求用户体验

  8. 时刻保持好奇

  9. 全栈意识

  10. 解决问题的能力强

  11. 懂得合作和高效沟通

  12. 重视工作,同样重视生活

  13. 责任心和全局观

  14. 个人的进步能带动团队的进步

学习资源

  1. 编程导航(包含以下所有资源,强烈推荐 👍): https://www.code-nav.cn
  2. freeCodecamp 在线编程: https://learn.freecodecamp.one/
  3. 阿里云前端实战学习: https://edu.aliyun.com/roadmap/frontend
  4. W3Cschool 编程入门实战: https://www.w3cschool.cn/codecamp/
  5. 腾讯云动手实验室: https://cloud.tencent.com/developer/labs/gallery
  6. pink老师前端入门教程: https://www.bilibili.com/video/BV14J4114768
  7. MDN 前端文档: https://developer.mozilla.org/zh-CN
  8. Node.js 入门: https://cnodejs.org/getstart
  9. 前端清单: https://cheatsheets.devtool.tech/
  10. 前端小课: https://lefex.github.io/
  11. 被删的前端游乐场: http://www.godbasin.com/
  12. 《ES6 入门教程》: https://es6.ruanyifeng.com/
  13. 谷歌 Web 开发者: https://developers.google.com/web
  14. JavaScript 明星项目: https://risingstars.js.org/2020/zh
  15. Best of JS: https://bestofjs.org/
  16. Codewars: https://www.codewars.com/?language=javascript
  17. Vue.js examples: https://vuejsexamples.com/

前端资讯

  1. 掘金资讯: https://juejin.cn/news
  2. InfoQ: https://www.infoq.cn/topic/Front-end
  3. daily.dev: https://daily.dev/

技术博客

  1. 掘金: https://juejin.cn/frontend

  2. 腾讯前端 IMWEB: http://imweb.io

  3. 腾讯 Web 前端团队 Alloy Team: http://www.alloyteam.com

  4. 淘宝前端团队: http://taobaofed.org

  5. 百度 Web 前端研发部: http://fex.baidu.com

  6. 京东凹凸实验室: https://aotu.io

  7. 360 奇舞团: https://75team.com

  8. 七牛团队技术博客: http://blog.qiniu.com

  9. 有赞技术团队: https://tech.youzan.com/tag/front-end/

  10. 百度 EFE Tech: https://efe.baidu.com/

  11. css-tricks: https://css-tricks.com/archives

  12. web.dev: https://web.dev/blog/

学习要点

  1. 前期学习以培养兴趣为主,不要过于追求深层理解。
  2. 前端学习不能靠死记硬背,要多敲代码、多做项目实践。
  3. 不要急于求成,踏实积累才是硬道理。