资深前台开发工程师分享,关于前台学习路线的少量建议

作者 : 开心源码 本文共4927个字,预计阅读时间需要13分钟 发布时间: 2022-05-13 共135人阅读

前言

对于刚开始学习前台的伙伴俩说,问得最多的问题就是 ——前台技术现在如此繁杂,我究竟应该如何学习。这个话题太大了,几句话答复不好;也因为这个问题的确困扰了很多前台开发人员,所以我也就着手系统的输出这篇文章。

尽管这篇文章花了很长时间,一定也有其局限性;希望各位不吝指出。

入题

我们俨然能感受到前台岗位现在已经发展成了最重要的研发岗位之一,所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是CSS&HTML&JavaScript了。但这三大件一直都是前台的根本,这一点从未改变。而这三大件中JavaScript又是重中之重。

接下来我会结合我的一点经验,给出前台学习路线的少量具体建议。

三大件学习

库工具

前台框架( MVVM )的学习

浏览器 & 计算机基础

前台工程化

性能优化

Nodejs

数据结构和算法

依葫芦画瓢

三大件学习

现在每年仍旧有很多初级入门的前台开发。所以对初入门的朋友也给出一点意见。

刚入门的朋友,我觉得不应该一开始就学习像Vue、TypeScript、Webpack等知识。应该把重点放在CSS&HTML&JavaScript基础知识的学习上。

CSS & HTML

对于刚入门的朋友我仍旧建议先将CSS(3)&HTML(5)的知识点认真学习一遍。学习的途中最好是学习完一部分就自己在敲一遍代码,加深自己的记忆。

当然假如你愿意,建议你可以先仿一个网站的静态页面(掘金、知乎等都可以),有少量属性即可以理解他实际的实现场景。

当然刚开始敲代码的时候还是不要过分依赖自动补全功能,一开始就使用自动补全对你记忆少量属性时没有帮助的;踏实点学习,日后会有回报的。

关于 CSS(3) 你需要理解的少量知识点

盒模型(标准 & IE )

flex、float、Normal Flow 等的了解

CSS 常用选择器

行内、内部、外部样式的区别

CSS 层叠规则

BFC 与 IFC 的理解

CSS3 的 transform、transition、animation 等属性的运用理解

响应式布局的了解

……

CSS 说容易也容易,说复杂也复杂;由于 CSS 总是能给你意外的惊喜。

HTML(5) 你需要理解的少量知识点

说到 HTML 我想有很多人是div一把梭。由于div用的爽,不用担心默认样式。

有人说 HTML 语义化的优点很多,比方清晰的页面结构、有利于 SEO、便于团队开发和维护;这些我都承认,不过我还是喜欢div一把梭。

HTML 语义化( 不是很了解为什么面试总会问 )

canvas

本地存储( localStorage、sessionStorage、cookie 的了解 )

video 和 audio 的使用

应用缓存( cache manifest )

……

JavaScript

JavaScript一直都是我们前台的基石,肯定程度上JavaScript的了解深度决定了你的发展。所以肯定要用心学习。

现在很多人一看到闭包、原型链、作用域链、继承之类的文章都是直接跳过,你现在可以自问一下你确实了解这些基础的知识点吗

JavaScript的基础知识点的确很多,所以《JavaScript 高级程序设计》 写了 700 多页;不过当你 JS 基础扎实后,你会发现你在学习框架、亦或者是学习框架源码的时候会轻松许多。

JavaScript(ES6+) 你需要理解的少量知识点

类型转换

this

作用域(作用域链)

原型链以及继承

闭包的了解

动态作用域和词法作用域

JavaScript 执行机制

promise & async

……

上面说的CSS&HTML&JavaScript的基础知识点并不需要你一入门就一律都了解透彻;有些尽管是基础,但却也有它的难度。就算是高级也不敢说自己全都掌握了,有句话说的挺好 —— 书读百遍、其义自见。

我们第一遍学习不可能尽懂,到最少可以给我留下一个印象。过一段时间再学习这块知识点的时候,你一定会有一个全新的了解。学习只一个需要一直在线的任务,重复的学习可以帮助你保持持续的竞争力。

我先公告一点,我并没有说其余技术不需要去学习,只不过初入门最好重点是先将基础夯实。

其实三大件的学习不需要花费多少时间,有基础的大概 3 个月即可以大致的看一遍。能否真的了解这是后话,不过已经算是入门了。

CSS & HTML & JavaScript 推荐书籍/网站

_ W3C 的 CSS&HTML 网络教程

《CSS 权威指南》

《CSS 揭秘》

《JavaScript 高级程序设计》

《你不知道的 JavaScript》上卷

_ ECMAScript 6 入门

HTML 不知道推荐什么书。我个人觉得看教程和动手实践就基本没什问题。

接下来我们即可以学习少量工具类的库了。

库工具

对于库工具而言我们常用的有 JQuery、underScore、zepto、Moment 等

JQuery: 降低开发者操作 DOM 的复杂度

UnderScore: 提供实用的函数

Zepto: JQuery 的简化版

Moment: 日期和时间操作库

这些库给我们提供了很大的便利,省去了我们编写相关方法的时间,同时也是我们的程序更加稳健 —— 我们自己写的方法很可能在某些情况下就出 bug 了。

当然对于这些库我们不仅仅只是去理解 API,我们需要去学习它的源码。看看假如自己写相关方法的话是不是也想到了这种方式,这些库工具是也是一个很好的学习工具,我们不应该忽略。

比方让你自己实现节流函数,你会如何实现。

过滤对象应该如何实现

……

这种问题的答案不就在 Underscore 源码里面吗?

我们在学习库工具的时候,必定是需要回头看 JavaScript 基础的;这也就进一步夯实了基础。

前台框架( MVVM )的学习

当下最火的框架想必肯定是 React 和 Vue,假如 JQuery 的存在是是我们更加方便的操作 DOM,那么现在 MVVM 框架则是让我们从手动升级 DOM 的繁杂操作中解放出来。

至于 React 和 Vue 该学习哪一个,更多的还是看当下公司使用的是哪一个(也不是必然)。对于 Vue(React) 该如何使用其实不用多久就能上手,我们更应该关心的是他们背后的设计思想和实现原理。

少量问题

响应式的基本原理是什么

发布订阅模式的了解

Virtual DOM 的了解

前台路由的实现原理

nextTick / setState 的实现原理

diff 算法

单页面应用(SPA)的原理和优缺点

……

我们对于框架的 API 使用没必要花太多时间,应该多研究他们背后的设计思想和实现原理。

Vue 和 React 我该选择哪一个?

对于这个问题相比很多人都有困扰(有些人两个都学,也就没有这个困扰),这个问题已经有很多人答复了。但我还是觉得不是非要选择哪一个才是政治正确,选择你需要的。

感兴趣的可以看看这篇文章:

React or Vue: Which Javascript UI Library Should You Be Using?

以下是提炼的文中观点:

Vue的优势是:

模板和渲染函数的弹性选择

简单的语法和项目配置

更快的渲染速度和更小的体积

React的优势是:

更适合大型应用和更好的可测试性

同时适用于 Web 端和原生 App

更大的生态系统,更多的支持和好用的工具

Vue 相关资料

对于框架的少量学习资料我个人更倾向于推荐官方文档,有很多问题官方文档已经说得很清楚了。市面上有些书籍也就是对官方文档进行了一个扩写(不排除有精良之作)。

Vue 官网 & Vue Router 官网 & Vuex 官网

剖析 Vue.js 内部运行机制 掘金小册

vue 技术揭秘

浏览器 & 计算机基础

假如你希望能能快速进阶到高级工程师,那么对于浏览器 & 计算机基础的知识你就必要又有肯定的掌握。由于这能让你更好的了解前台。

浏览器一直是 JavaScript 最重要的宿主环境,所以我们必需去理解 JavaScript 在浏览器中是如何执行的。

我们前台开发接触最多的应该就是浏览器了,记得工作第一年最头痛的就是解决 IE 的兼容问题。工作中出现的很多问题都和浏览器有关,所以我觉得理解浏览器工作原理是非常有必要的。

为何要学习浏览器工作原理?

精确评估 Web 开发项目的可行性

从更高维度审视页面

处理面试中遇到的绝大部分浏览器问题

计算机基础

对于计算机基础我们需要做到大体理解,这样的话我们对整体的流程会有一个大概的把握。在实际开发过程中不会过于被动。

需要理解的少量知识点

浏览器缓存机制

浏览器中 JavaScript 的执行机制

页面渲染原理

浏览器安全问题

浏览器为什么会跨域

如何系统的优化页面

HTTP 与 HTTPS 的区别

TCP/IP 协议

三次握手和四次挥手

CDN 的作用和原理

正向代理商与反向代理商的特点

……

这里仅仅列出了一部分知识点,假如想全面的学习可以看下面推荐的资料。

浏览器 & 网络基础推荐书籍/资料

《浏览器工作原理与实践 》专栏

《图解 HTTP》

《网络是怎么连接的》

前台工程化

从事先端略微久一点的开发就肯定会有这个感受 —— 前台开发越来越工程化,越来越复杂。

对于前台开发来说,现在前台要做的不只是切页面调接口这么简单,我们需要理解的技术无疑更加广泛。

前台工程化的一点浅见

因为项目的复杂度越来越高,前台需要做的工作就越来越繁重。当项目复杂就会产生许多问题,比方:

如何进行高效的多人协作?

如何保证项目的可维护性?

如何提高项目的开发质量?

如何降低项目生产的风险?

前台工程化细分的话我觉得可以分成模块化、组件化、规范化三个方向。或者者说一切能提升前台开发效率,提高前台应用质量的手段和工具都是前台工程化的实践。

模块化

JavaScript 模块化

CSS 模块化

资源模块化

组件化

从 UI 拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,我们称之为组件。

也就是将复杂页面按功能拆分成多个独立的组件。

规范化

编码规范

接口规范

git 使用规范

CodeReview

UI 元素规范

前台工程化少量知识点

了解 Babel、ESLint、webpack 等工具在项目中的作用

Babel 的核心原理

Webpack 的编译原理、构建流程、热升级原理

nginx 的基本了解

了解 Git 的工作流程

Mock 的意义及优点

性能优化

提起性能优化,大家最先想到的是什么?我最先想到的是一道面试题:

从输入 URL 到页面加载完成的具体过程

由于从直观层面来看,我们前台需要优化的步骤基本都在这个加载工程当中。

性能优化现在对于前台来说已经是必不可少的技能了,当然现在有些所谓的性能优化的技巧现在都成为了一种需要遵从的规范。

我们需要关注两个方向的性能优化:

1 .运行时的优化

2.开发时的优化

性能优化少量知识点

前台性能衡量指标、性能监控(performance,LightHouse)

常见的性能优化方案有哪些

SSR 方案的性能优化

Webpack 的性能优化方案

React、Vue 等框架使用性能优化方案

网络层面的优化方案

页面渲染层面的优化方案

白屏的优化方案

……

推荐资料

《大型网站性能优化实战》

《前台性能优化原理与实践》掘金小册

Nodejs

我们知道因为 Nodejs 的出现,前台开发出现了一个新的高潮。JS 开始可以涉及后台领域,JS 的可能性更大了。

Nodejs 少量知识点

Nodejs 在应用程序中的作用

Express 和 Koa 的区别

Nodejs 的底层运行原理、和浏览器的异同

Nodejs 非阻塞机制的实现原理

……

数据结构和算法

这一点我也比较薄弱,就不开展了。关于这部分你可以刷 leetcode。

另外推一本书《学习 JavaScript 数据结构与算法》(第三版)

依葫芦画瓢

我们在项目开发的过程中可以接触到很多优秀的库工具或者者是 UI 库。如 lodash、underscore、moment、element-ui、antd design 等。

自己是从事了8年的前台工程师,自己整理了一份最全面前台学习资料,从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理,送给每一位前台小伙伴,有想学习web前台的,或者是转行,或者是大学生,还有工作中想提升自己能力的,正在学习的小伙伴,需要可以私聊我哟,这是我的前台开发qun,【六零三】【九八五】【九九三】,直接群里下载,对于学习web前台有任何疑问(学习方法,学习效率,如何就业)都可以问我,最后可以点一波关注哟!

我们可能自己设计不出来这么优秀的工具,但是我们完全可以依葫芦画瓢自己按着这些工具写一遍,你就会发现里面有很多不可思议的技巧、优秀的思想。

依葫芦画瓢对学习来说也是一个非常有用的技巧。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 资深前台开发工程师分享,关于前台学习路线的少量建议

发表回复