最新整理的关于前端学习路线及学习资料…

2023-05-27 0 913

标为 “隆哥蒙”,和10万开发相关人员一同高速成长!

最新整理的关于前端学习路线及学习资料…

序言

前段天数常因好友加我QQ,而她们问的最多的难题是 —— 后端控制技术那时这般繁复,我究竟如果怎样自学。那个热门话题太小了,这段话提问不太好;也虽然那个难题的确所苦了许多后端开发相关人员,因此我也就著手控制系统的输入这首诗。

尽管这首诗花了极短天数,的确也有其不足之处;期望诸位大加表示。

英文原版

她们摇身一变能感受到后端工作岗位那时早已产业发展成了最重要的研制工作岗位众所周知,所以对她们明确提出的明确要求也就愈来愈高。因此她们须要学的也就更为重要而已CSS&HTML&JavaScript 了。但这三大件始终都是后端的显然,这一点儿未曾发生改变。而这三大件中 JavaScript 又是首要任务。

接下来就要紧密结合我的一点儿实战经验,得出后端自学走线的许多具体内容提议。

产品目录

三大件自学

库辅助工具

后端架构( MVVM )的自学

浏览器 & 计算机基础

后端工程化

性能优化

Nodejs

数据结构和算法

依葫芦画瓢

三大件自学

那时每年依旧有许多初级入门的后端开发。因此对初入门的好友也得出一点儿意见。

刚入门的好友,我觉得不如果一开始就自学像 VueTypeScriptWebpack 等知识。如果把重点放在 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 到页面加载完成的具体内容过程

因为从直观层面来看,她们后端须要优化的步骤基本都在那个加载工程当中。

性能优化那时对于后端来说已经是必不可少的技能了,当然那时有些所谓的性能优化的技巧那时都成为了一种须要遵从的规范。

运行时的优化

开发时的优化

性能优化许多知识点

后端性能衡量指标、性能监控(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 等。

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

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

最新整理的关于前端学习路线及学习资料…

推荐阅读

有点敏感,老铁们低调使用就好!

张一鸣:为什么 BAT 挖不走她们的人才?

iPhone可以运行Android了!!!

最新整理的关于前端学习路线及学习资料…

点个在看,少个bug

最新整理的关于前端学习路线及学习资料…

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务