一起自学前端开发!

2021-2022年最新前端开发学习路线详细版(二)

来源:原创    更新时间:2021-12-11 23:44:10    编辑:前端网    浏览:409

03 前端框架(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 相关资料

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

  1. Vue 官网 & Vue Router 官网 & Vuex 官网

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

  3. vue 技术揭秘

04 浏览器 & 计算机基础

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

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

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

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

  1. 准确评估 Web 开发项目的可行性

  2. 从更高维度审视页面

  3. 解决面试中遇到的绝大部分浏览器问题

计算机基础

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

需要了解的一些知识点

  • 浏览器缓存机制

  • 浏览器中 JavaScript 的执行机制

  • 页面渲染原理

  • 浏览器安全问题

  • 浏览器为什么会跨域

  • 如何系统的优化页面

  • HTTP 与 HTTPS 的区别

  • TCP/IP 协议

  • 三次握手和四次挥手

  • CDN 的作用和原理

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

  • ……

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

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

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

  2. 《图解 HTTP》

  3. 《网络是怎样连接的》

05 前端工程化

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

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

前端工程化的一点浅见

由于项目的复杂度越来越高,前端需要做的工作就越来越繁重。当项目复杂就会产生许多问题,比如:

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

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

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

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

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

模块化

  • JavaScript 模块化

  • CSS 模块化

  • 资源模块化

组件化

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

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

规范化

  • 编码规范

  • 接口规范

  • git 使用规范

  • CodeReview

  • UI 元素规范

前端工程化一些知识点

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

  • Babel 的核心原理

  • Webpack 的编译原理、构建流程、热更新原理

  • nginx 的基本理解

  • 理解 Git 的工作流程

  • Mock 的意义及优点

06 Nodejs学习

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

Nodejs 一些知识点

  • Nodejs 在应用程序中的作用

  • Express 和 Koa 的区别

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

  • Nodejs 非阻塞机制的实现原理

  • ……

这里讲一下学习顺序的问题,就是说学习了 html + css + javascript 之后,我是先学习前端的一些框架好啊,还是学习数据结构与算法好啊,还是学习计算机网络,浏览器工作原理好呢?

我觉得这个和你时间有关,假如你还是大一大二的话,学校会有数据结构,计算机网络的课程,我觉得跟着学校的顺序学就行,然后的话,像刷题,我觉得有些东西同时做并不会存在矛盾,例如我就建议刷题这个时期,长期保持,然后一边做其他的。

总的来说,我觉得也可以按照我说的这个学习顺序来学,然后算法那一块,当你学习了 Javascript 之后,就可以穿拆整个过程了。自学前端开发就在前端网,一起加油!以上就是2021-2022年最新前端开发学习路线详细版,很完整,前端程序员按照这个学习就行了。


评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜