一起自学前端开发!

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

来源:原创    更新时间:2021-12-11 23:42:53    编辑:前端网    浏览:206

入题

我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一,所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是 CSS&HTML&JavaScript 了。但这三大件一直都是前端的根本,这一点从未改变。而这三大件中 JavaScript 又是重中之重。入门前端开发主要需要学习 HTML,CSS 和 JavaScript 三大件。之后学习前端主流框架(React/Vue)的使用,并基于已学内容开发一个小项目进行实战。当我们把这些学习并理解透彻以后,就算入门前端了。

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

目录

  • 三大件学习

  • 库工具

  • 前端框架( MVVM )的学习

  • 浏览器 & 计算机基础

  • 前端工程化

  • 性能优化

  • Nodejs学习

01 三大件学习

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

刚入门的朋友,我觉得不应该一开始就学习像 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 推荐书籍/网站

  1. _ W3C 的 CSS&HTML 网络教程

  2. 《CSS 权威指南》

  3. 《CSS 揭秘》

  4. 《JavaScript 高级程序设计》

  5. 《你不知道的 JavaScript》上卷

  6. _ ECMAScript 6 入门

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

接下来我们就可以学习一些工具类的库了。

02 库工具

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

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

  • UnderScore: 提供实用的函数

  • Zepto: JQuery 的简化版

  • Moment: 日期和时间操作库

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

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

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

  • 过滤对象应该如何实现

  • ……

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

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

以上就是2021-2022年最新前端开发学习路线详细版(一),紧接下一部分:2021-2022年最新前端开发学习路线详细版(二)

评论区

表情

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

相关内容

点击排行

随机新闻

评论排行榜