2020年，我们该如何学习WEB 前端开发

我们可以把学习路线比作游戏中的段位上分，在不同的分段都有自己的定位和要锻炼的事情：

青铜—从零开始小学生：怀着满腔的热血，看到了这一个行业的希望和未来，准备开始学习 Web 开发知识。

先通过 w3cschool 等免费学习资源把 HTML、CSS 和 JavaScript 的基本操作学会了

写一个简单的表白页面送给你的女/男朋友，展示一下自己努力的成果，如果没有就当我没说

白银 —懵懵懂懂初学者：懂得如何使用 HTML、CSS 和 JavaScript 三大件来实现基本页面开发功能

选择一个可以覆盖多种场景、可以随自己意愿调整难度的项目尝试实现，如博客系统、记账本、Markdown 编辑器等

从 React 和 Vue 这两个框架中选择一个进行学习

黄金—轻车熟路新玩家：懂得使用框架来实现上面所举例项目

学习 Redux、Vuex 或者 MobX 等状态管理工具，并将他们使用到前面的项目中

思考状态管理工具为你的项目带来了什么好处

铂金 V—初出茅庐新司机：懂得如何使用脚手架创建项目，并且能将代码结构根据模块化的思想进行安排

学习 TypeScript，对前面的项目进行重写，注重对数据结构和类型的控制

学习 Node.js，试着配合数据库实现一个比博客系统更为复杂的 CMS（内容管理系统），如图书馆管理系统、仓库管理系统

铂金 I—基本上手好司机：如果是懂得如何利用 Node.js 或 TypeScript 编写业务代码的

思考在前面使用框架开发的项目中，有哪些代码是重复冗余的，有哪些逻辑是可以在多个组件之间共用的

学习利用 ES2015 或更新的 JavaScript 标准，逐步替换使用框架所编写的代码

钻石 V—淡定自然老司机：如果是对逻辑抽象、模块封装有了一定的理解和经验的

思考如何使用纯 JavaScript 对业务组件中的非渲染、非 DOM 相关代码进行抽象

引入单元测试工具，对纯逻辑代码进行测试，争取覆盖率达到 80% 以上

钻石 I—赛道新手初学者：如果上面的条件你都已经满足了

思考不同的代码哲学（OO、FP 等）、不同的代码结构（MVC、MVVM 等）的区别

思考不同的框架之间设计的初衷，思考不同的编程语言中对同一类问题不同解法的区别

到这里我划了一条从 0 到高级前端工程师级别的纯技术路线。相信有不少有经验的同学会发现中间我省略了不少内容，但也不难发现路线中从前半段的“学习”逐步变成后半段的“思考”。优秀的工程师除了需要有在纯技术领域的沉淀以外，还需要更多对技术、团队、ROI（投资回报率）的思考，当然这依然不足以支撑我们平稳地渡过“程序员 35 岁危机”，前面的路还有很长，钻石往上还有王者呢，谁说程序员就是青春饭碗的？

回想起很多年前我也跟你一样是一个完全的新手，从 0 开始慢慢自学摸索 Web 开发，甚至后来我也没有进入科班学习计算机，那么来听听我作为一个“前人”是如何完全靠自学至今的故事吧。

我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，
学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流裙：前面：603 中间：985 最后：993。
里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，
前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

我的从 0 开始

我是一个完全从自学开始的前端工程师，想起来第一次接触前端就是初中那会特别流行合租 VPS 然后注册一个 .tk 的免费域名。而作为一个刚入门 Web 开发不久的小屁孩来说，用这种方式一探“大人的世界”属实让人兴奋。而当时最流行的博客管理软件就是用 PHP 写的 WordPress，作为一个十分成熟的 CMS 软件来说 WordPress 当时就有了非常丰富的社区资源，比如主题、模板、插件等等。

而作为一个十分注重个性化的小屁孩来说，当然是要自己做一个主题的啊！于是我就从此踏上了 Web 开发的不归路，在此之前我所接触的都是 Visual Basic 这样的 Native 的语言。

以 WordPress 主题作为切入点，我开始学习 PHP 用于调用 WordPress 的 API 并输出内容、学习 HTML 用于写主题的模板、学习 CSS 用于“装潢”我的博客、学习 jQuery 用于实现页面动态效果。是的，那个时候基本上大部分人接触的是 jQuery 而不是 JavaScript，一个 $ 函数就可以完成非常多的效果这让我第一次感受到了“框架”所带来的价值。于是便一步一步地发生了以下事情（不一定完全对，毕竟时间过太久了）：

1、我发现页面上的一些样式效果无法在 IE 浏览器上正常显示，于是我就开始到网上学习 CSS 在 IE 的各种特殊处理，包括 reset.css、normalize.css 等工具的使用；

2、每次点击链接都要刷新页面，在那个网速不怎么好的年代体验非常糟糕，于是乎就开始研究怎么用 jQuery/JavaScript 实现不需要刷新页面的情况下切换页面的内容；通过查看文档发现浏览器支持一种叫做 XMLHTTPRequest 的技术，可以让我们不需要通过跳转的方式从服务器获取到信息，从这里开始了解到 HTML、XML 和 JSON 三种不同格式的区别；

第一次知道了可以通过服务器传递 JSON 格式的纯数据，然后前端通过 JavaScript 对数据进行解析，并且结合前端的模板引擎渲染成完整的 HTML；

从这里又可以学习到如何通过 URL 中的 path、query、hash 以及 POST 和 PUT 请求正文等信息向服务器传递信息，服务器通过这些信息动态地对各种数据进行处理并返回结果；

SPA（Single Page Application）开发习惯初见雏形；

这样我就来到了“白银”阶段了。

框架时代

当我在做 WordPress 主题的时候，绝大部分的主题开发者都会在前端做一些简单的效果，甚至有甚者会通过 JavaScript 实现一些原本只能通过后端来完成的事情，比如文章列表、文章内容的加载和渲染。而当年这些主题开发者基本上都会使用 jQuery 来进行这些 JavaScript 的操作，因为纯手写 JavaScript 在当时来说非常的繁琐（ES4时代，很多现在被广泛使用的原生 API 都仍未具备）所以当时 jQuery 就是大家的首选方案。

从非常早的 PrototypeJS、后来的 jQuery、进入 MVC 时代的 Backbone，AngularJS 开启 MVVM 模式，React 引入 FP 的概念，Vue 成功开启了渐进式开发体验的道路。一路下来一地的鸡毛，被各路人马诟病前端领域一个月开发一个新框架，“学不动了”。然而作为一个也写过框架、写过工具类库的开发者，我很喜欢用一个经常用于泛科技领域的例子来类比前端领域：

科技的终极目标，就是让人民感觉不到科技。

jQuery 时代，前端开发者使用 JavaScript 的模式是从页面中获取 DOM 元素，添加事件，然后通过 class 和 style 对页面进行动态地变更，以完成对用户行为的响应；

Backbone 时代，原本用在桌面端软件开发中的 MVC 模式被引入到了前端开发中，前端开发者们发现 Web 开发的复杂度已经需要用这些更成熟的开发模式进行管理了；

AngularJS 时代，从这里开始 Google 把数据双向绑定模式带到前端开发中，将原本需要通过 JavaScript 控制 DOM 元素这一繁琐的操作变成了只需要关心 Model 层需要改动什么内容即可。而 Vue 则将这种模式的开发成本降低到了一种相当可观的程度，让很多新手开发者也能很简单地入手这种便捷的开发模式。

React 时代，Facebook 的科学家们把函数式编程的思想引入到前端开发中，注重的是数据链路的可跟踪、可回溯、可管理，让整个数据链路是尽可能以单链路流转。

虽然前端领域常被说“一个月一个新框架”，但实际上每一个框架在迭代的过程中都是解决了它们所在业务场景的实际需求的，并不是“拍脑袋”地想要把每一个技术细节做出一个 break change。

而目前我目前推荐的学习的框架是 React 和 Vue：

同样都是目前最流行的框架之一，而且可以预见未来 3~5 年内都是能满足找工作的需求的；

React：引入函数式编程（Functional Programming）的概念，使得写代码的思路更加严谨，更具有可维护性和逻辑可导性；

Vue：将 MVVM 模式变得非常简单易于入手，把 Progressive JavaScript Framework 的定位实践得非常到位。且如今 Vue 3.0 的 Composition API 更是在某种程度上将 Hooks 的玩法实现得比 React Hooks 更优；

结论：请不要害怕学习！不要惧怕新技术！

2020年，我们该如何学习WEB 前端开发相关推荐

学习Web前端开发前景怎么样?
IT行业的薪资福利吸引了不少人,Web前端开发入行门槛低成为很多人入行IT行业的选择.那么,学习Web前端开发前景怎么样?接下来,千锋上海小编就为大家解答. 1.就业形势较好上海Web前端开发相关职 ...
学习web前端开发要注意什么
web前端的发展前景有目共睹,越来越多的人都对web前端这门编程语言非常感兴趣,想要学习web前端技术,那么学习web前端开发要注意什么呢?大家在学习之前是否有做好这些功课呢?来看看下面的详细介绍吧. ...
零基础怎么学习web前端开发
零基础怎么学习web前端开发?web前端在移动互联网行业的运用是非常广泛的,而且web前端开发技术所涵盖的知识有很多,具体要怎么学习,来看看小编下面的详细介绍吧. 零基础怎么学习web前端开发?对零基 ...
关于零基础学习web前端开发，有些过来经验分享
大家好,今天给大家分享一下我从事WEB前行业一些自己的学习经验分享也希望通过这篇文章,可以帮助到更多正在学习但是又不知道从哪里学习学习的前端的小伙伴,还有一些想要去转行的,但是不知道不知道如何去学习 ...
零基础能不能学习web前端开发？【爱创课堂专业前端培训】
web前端日趋火热,不只招聘市场需求量大,还有一个重要的原因便是,入行门槛低,入门简单.单是关于许多小白同学来说还是有点担心,不知道零基础能不能学习web前端开发? 以为没那么简单.其实web前端是一 ...
女孩子零基础学习web前端开发怎么…
· 网页开发工具: 学习web前端开发,网页开发工具有FrontPage,会用 Word 的人很容易学会FrontPage.还有一个常用的是Dreamweaver.这两种都是使用最多的HTML网页制 ...
学习Web前端开发，这些可行性的建议分享给大家！
互联网+的火爆,让互联网行业快速的扩张.越来越多的人想通过学习的途径进入这个行业,Java开发.Web前端开发.UI设计等专业受到大众追捧.这次主要介绍一下Web前端开发,为想要学习Web前端开发的人 ...
学习web前端开发，需要学习什么？
如果要学习web前端开发,需要学习什么? 遇到很多新手,都会问,如果要学习web前端开发,需要学习什么?难不难?多久能入门?怎么能快速建一个网站?工资能拿到多少?还有些让我推荐一些培训机构什么的要去学 ...
如何迅速有效学习web前端开发？在学习中你更应该注重哪些东西
什么是高效率学习? 一:追求学习的性价比学习性价比 = 所学到的有用的知识 ÷ 花费的时间 **ps:**如果你用了一年时间,还不能仿站,显然效率是低的. 想要学习性价比高,就尽力向这两点努力: * ...
前端改变div排序_转行学习web前端开发，需要哪些工具和需要学习什么？
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...

2020年，我们该如何学习WEB 前端开发

2020年，我们该如何学习WEB 前端开发相关推荐

最新文章

热门文章