在校前端规划路线图

408 阅读9分钟

前言

前端大而泛,网络上查询的路线图是作者在不同阶段所写的。因此,以自身在校经历来探讨在校前端如何从零开始越早找准技术规划路线,并且少走弯路,最重要的是持之以恒,哪怕少做而不能不做。关于持之以恒这个态度,我有以下几点思考和想法希望分享。

目标

将目标分为长期目标和短期目标

  • 长期目标:是最需要坚持的事情,拥有最高效益的事,也是最容易被遗忘忽略的事
  • 短期目标:是需要自己在近期内要达到完成,这些目标通常需要耐得住寂寞来攻克,有一颗狠心。如前一阵子我的生活、学业、项目、面试、总结、软考、四六级、输出文章等等。

分块

有了自己的目标后,一定要记录下来,用自己手机备忘录或微信即可,每天打勾、画插等等。并且在无事的时间,要开始整理自己的时间碎片,将自己的目标进行优先级排序,一点点塞进自己的时间碎片中。

每天亦是如此,当然碰上突发情况,那就思考这些情况能否夹带着自身有意义的事情并输出!

持之以恒下来,不断地完成一个又一个的目标。

技术培养

自己学了很多杂七杂八的东西,发现很多事情和门路,并不能说无用,只能说是效率之低。我并不知道自己前端技术达到什么水平,但以我自身的经历认知来说,面试中技术方面应该问题不大,以下是我的前端技术规划的路线,以供参考。

前端培养.png

基础

前端三大基础:HTML、CSS、JS

概念

HTML

百度百科:HTML 的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。

CSS

百度百科:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML(标准通用标记语言的一个应用)或 XML 标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不 仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

JS

百度百科:JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

个人觉得上边的百度百科都有些抽象,简单以我个人举的假设来说,若前端是一个人

HTML 则是人全身的身体结构。如躯干、四肢、脑袋等等等(用来区分什么是人)

CSS 则是人身上的的肤色、头发长短、五官如何、身高、体重、化妆等等(用来区分是什么人)

JS 则是人的各种行为,思想等等(用来区分人是什么)

程度

  • HTML:学会用就行。不要死记硬背没用的,背下来也没用,边学边敲,敲出个完整的较为复杂的页面项目即可。
  • CSS:入门很简单,深入很难,是一门艺术来的。个人觉得受个人的审美和天赋影响,入门阶段懂得如何翻阅查找和实现,与 HTML一样,能敲出一个完整的较为复杂的页面项目即可。
  • JS:个人建议基础能打多牢就打多牢,当然实在啃不下来的内容就别硬啃了,后续回滚加深自我理解印象。个人觉得实现一个较完整的项目(功能点多且不复杂)(可以在 HTML、CSS 的基础项目上实现)

进阶

对于开发一个项目来说,关靠基础当然是不行的,需要借助其他额外的工具、框架、技能知识来更高效且规范地提升自己,开始锻炼获得可以参与开发项目的能力。以下有几个领域是我个人经历过的,或者一开始忽视但却重要的地方。以下内容都是前端领域重要的,只是着眼从零起步的同学,优先级与效益程度。 故添加自己的推荐程度,也就是掌握程度(五颗星满星)。

阅读书籍

推荐指数:🌟🌟🌟🌟🌟🌟

可以看一下这一篇文章:前端必备javascript书籍测评【含红宝书和绿皮书】

以个人角度推荐几本前端书籍

  • 《JavaScript高级程序设计(第4版)》「红宝书」
  • 《javascript语言精粹与编程实践》「绿皮书」
  • 《JavaScript权威指南》- 犀牛书
  • 《Effective JavaScript》

ECMAScript

推荐指数:🌟🌟🌟🌟🌟

是 JavaScript 的一个标准,更是一种扩展能力,能更高效且优雅地处理 JS 逻辑。

程度

个人认为 ES 系列是以 ES6(ES2015) 作为标志性的版本,将 ES6 学习,并懂得如何在适合的场景下使用对应语法,达到优雅、简洁、高效的效果即可。是一个反复回滚,不断淬炼的知识点,个人还是觉得资源需要自己去查找更新更全资源较好。

资源

仅作个人参考

前端框架

推荐指数:🌟🌟🌟🌟🌟

这不用说了吧,react / vue 框架选其一,吃透至源码。先官方文档,再实战,最后源码。这个阶段看一遍官方文档,有个案例出来即可。并且需要学习了解前端框架周边的官方生态 Vue 以及全家桶(vuex、vue-router 等等),知道在什么场景下可以使用它们。

代码规范

推荐指数:🌟🌟🌟🌟

了解一下如何约束好自己的代码规范,这点是一直不断完善的过程,尝试安装使用 ESLint 插件来规范化自己的代码格式。下列分享各大厂指定的前端规范文档或是官方的文档,自行选择。

资源

版本管理

推荐指数:🌟🌟🌟🌟🌟

现在主流的是分布式版本管理的 Git。做项目团队合作,必须学会熟练使用版本管理工具,尽可能命令行入手(面试)。

资源

UI 框架

推荐指数:🌟🌟🌟🌟

不多 BB 除非你对 CSS 兴趣深厚,想手写 CSS,励志成为 CSS 大神!那就去使用 UI 框架,目前阶段会用就行。

资源

网络请求

推荐指数:🌟🌟🌟🌟

AJAX 和 AXIOS 都需去了解。ajax 是网络请求 XMLHTTP 的前身,而 axios 是 ajax 的一层封装。了解明白是如何使用发送各种格式和方法的请求,简单原理是如何即可,顺便了解 Restful 的 api。

资源

网络请求内容,看网上资源文章即可。

HTTP

推荐指数:🌟🌟🌟

了解 HTTP 是为了根据网络请求更快更准地在项目中定位到问题所在。了解即可。

资源

文章

包管理器

推荐指数:🌟🌟

npm/yarn,笔者目前常用是 npm,包管理工具会用了解就好。

资源

浏览器

推荐指数:🌟🌟

前端始终绕不开浏览器,因此了解熟悉浏览器是必要的。

资源

看掘金上的文章,碎片化学习积累即可。

Web 网络安全

推荐指数:🌟🌟

网络安全还是挺重要的,了解,若在适当业务场景下可以使用,那就不错了!

资源

文章:

构建工具

推荐指数:🌟🌟

构建工具也就是打包工具,要先理解什么是打包工具,有什么作用。常用的为 Webpack,也有目前热门的 Vite 了解,说不定有自己需要配置的一天!

资源

JS 类型检验

推荐指数:🌟🌟

TypeScript 个人认为是前端日后的主流,了解其优点和作用即可

资源

CSS 预处理器

推荐指数:🌟

sass、less,了解即可。

资源

sass

less

PWA

推荐指数:🌟

PWA 也就是渐进式 Web 应用程序,可以理解为持续不断的一种推送服务。根据项目业务需求,自行了解。

主流 PWA 应用框架

  • WebSockets
  • Storage
  • Service Workers

多端应用

推荐指数:🌟

前端多端的主流应用框架,根据项目业务需求,自行了解。

继续深入

前端开发路线图

  • 紫色:建议推荐学。
  • 绿色:个人情况可以替代紫色学习,但没有那么主流。
  • 灰色:扩展随时学习。
  • 灰色底框:不建议学习

个人针对面试总结的宝藏篇可以看看,进行查漏补缺(八股文),深入了解。

其他资源

参考

一句话:若有改进或错误地方,经深思考虑明确后,直接推翻我即可。