前端学习路线

发表于 | 分类于

转眼间已经研三了，从大二开始接触 Web 前端，到读研期间参与实验室大大小小的一些项目，再加上今年暑假的一些实习经历，想对前端的学习方法和路线记录一些自己的思考，作为沉淀。

个人经历

  • 大一学 C/C++，接触基本的编程和计算机知识，学习主要来源于课程和作业实践等。
  • 大二开始接触 PHP 语言，学习 Web 开发，通过阅读 CMS 网站源码学习各种知识。
  • 大三开始转型前端，后端学习 JavaWeb 开发，前端学习 jQuery 等。
  • 大四在导师实验室做一些项目，主要负责前端，开始使用 Angular1，通过学习 Zepplin 源码。
  • 研一开始学习 React，用 Ant Design 做项目。
  • 研二开始学习 Vue，用 Element-UI 做项目。
  • 研二暑期在头条实习了三个月,接触 Webpack / Babel 插件等。

开发工具

工欲善其事，必先利其器。下面是一些通用的开发/效率工具，在利器可以看其他人的工具箱。

编辑器

  • VSCode - 最好的编辑器，没有之一，微软出品
  • Atom - GitHub 出的编辑器，大项目卡顿明显
  • Sublime Text - 轻量级的单文件编辑器
  • UltraEdit - 打开超大文件（大于 1 GB）必备

版本管理

  • Git - Linux 之父开发的大规模代码版本管理工具
  • GitHub - 最大的同性交友网站
  • 码云 - 国内的 Git 服务

浏览器及扩展

  • Chrome - 谷歌浏览器，不用多介绍了
  • Firefox - 今年更新后性能大幅度提升
  • Postman - 浏览器插件，用于测试 API
  • SwitchOmega - 浏览器代理管理插件
  • OctoTree - GitHub 辅助插件，方便浏览仓库目录

网络抓包工具

  • Charles - 抓包代理利器，可用于劫持特定域名测试
  • WireShark - 著名抓包工具

搜索引擎/知识库

排名分先后！

  • Google - 自己搞定翻墙
  • GitHub - 搜开源库/最佳实践/issue 等
  • StackOverflow - 解决各种疑难杂症
  • Bing - 如果实在没有翻墙的替代品
  • SegmentFault - 中文版 StackOverflow
  • Baidu - 对搜索结果擦亮眼睛

其实 StackOverflow/SegmentFault/Github 的 SEO 都做得很好，所以优先用搜索引擎，注意组合关键词。

其他工具

基础知识

HTML

HTML 是一种标记式语言，是 XML 的一个子集，最基础也最简单。

  • 常用的标签（或者叫元素）
  • 表单的操作
  • 多媒体

CSS

CSS 是一种声明式语言，易学难精。

  • 元素选择器
  • 引入方式和规则的优先级
  • 盒模型
  • 行级元素和块级元素
  • 浮动和定位
  • 常用布局

JavaScript

JavaScript 是一种解释型语言，主要为浏览器提供丰富的交互能力，也是易学难精。

  • 基础语法
  • 变量和作用域
  • 函数表达式
  • 在 HTML 中如何使用
  • DOM
  • BOM
  • 事件机制
  • 表单处理
  • Ajax
  • JSON

Web

学习资源

中级提升

HTML5/CSS3

主要是了解新特性和理解语义化。

ECMAScript6

主要了解 ES6 的新特性及其在工程实践中的用法，配合 Webpack/Babel 等。

模块化

主要了解为什么要模块化以及如何在浏览器和 Node 中使用，理解不同模块化的思想和适用场景。

NodeJS

NodeJS 扩展了 JavaScript 的能力边界，使它可以用在桌面端和服务器端，用法很多，主要先了解什么是 NodeJS以及如何使用。

基础框架

这些是今年比较主流的前端框架，不需要全部掌握，主要理解框架的用法和思想，适用的场景和解决的问题等。框架只是基础能力的最佳实践，变化很快，不要过于以来框架，而是驾驭框架。

编码规范

工程项目变大以后，规范就会显得尤为重要。良好的规范可以提升开发和协作效率，易扩展维护等。编码规范有些已经达成共识，有些则全凭团队/个人喜好，没有对错，只要遵守适应就可以。

可以用工具来强制团队所遵循的编码规范，如

高级进阶

标准规范

标准规范是基石，可谓万变不离其宗。

前端工程化

现在但凡带框架的前端项目已经离不开工程化了，从脚手架，Mock，Babel，CSS 预处理器，Webpack 大礼包，到测试，构建，ci，发布等。

设计模式

设计模式是一些沉淀下来好的开发方式，不同的设计模式应用于不同的场景，在操作系统、数据库、开源框架中，设计模式几乎无处不在。前端中也包含很多设计模式，值得学习提高。

测试/CI

测试在大型软件开发中是很重要的，还有以测试为主的 TDD 软件开发模式。测试在开源项目中也是衡量其质量的关键。

发布/部署

前端代码经过编译/转换/压缩等处理后就可以发布了，具体选择哪种发布方式取决于后端采用的技术。传统的方式是将前端代码放到后端工程中静态资源部署的位置，现在更流行的是前后端解耦的方式、容器化，如 Nginx 反向代理和 Docker 镜像。学习 Shell 脚本编程可以把很多过程脚本自动化。

其他方向

前端现在变化和发展很快，甚至有一统客户端和桌面端之势，但是还要根据具体应用场景和技术要求来选择，软件开发没有银弹。

参考链接

下面是很多大牛总结收集的前端知识图谱，内容很多，可以根据自己的学习计划和兴趣来深入学习，同时要保持求知欲和一个良好的技术视野。

打赏