懂前端的不凡君已从事软件开发10余年，曾做过java开发，android开发，web前端开发。从事过java讲师，前端讲师。现在郑州培训机构任教，主要担任前端讲师，课程主编，就业导师。对前端教学,前端自学,前端转行方面应该是有相当的经验,在看到很多新手在学习前端的时候不知道怎么学,不知道学到什么程度,在这里我想做一个前端自学的路线,希望能帮助到想自学的新手,避免走弯路.

前端开发做什么?

自学之前,先了解下什么是前端?前端到底做什么? 前端的未来发展如何?

插入一段初学者科普视频:

自学的目标是什么?

首先搞明白,你自学的目标是什么,这点非常重要. 曾经有个加我微信的同学自学,其中有连续2年间时不时的会问我一点问题.我很纳闷的问她,两年了,为什么你还在学js基础.她的回答是我现在有工作,这个就是想有时间学一学,差不多了就转行.去某大学做宣讲也遇到过同学说有兴趣,想作为兴趣学习但没打算从事这个行业,就觉得编程能锻炼人的思维能力.也有遇到过想试试,能学会了就学,学不会了就放弃. 如果你是前面这几种情况,我劝你还是不要浪费时间.这里有人会站起来反驳我,俗话讲"兴趣是最好的老师",作为老师怎么能这么轻易的劝退呢? 而我想说的是"你凭什么那么自信,拿你的爱好去挑战人家的职业?",如果你没有一个明确的既定的目标,那么学起来多半是半途而废(兴趣?兴趣也要有产出才能维持,当然能把兴趣和职业结合起来才是yyds). 前端开发虽然是编程领域最简单的一个方向,但要真的能胜任这个职位,还是需要相当长的时间去学习,要求你有系统的知识体系,要求你掌握当前最流行的技术框架. 你能写个p标签,能画个页面出来,能写个99乘法表,不叫学会,你能解决开发问题,能独立实现公司需求才叫学会了.没决心,没目标,没压力的晃晃悠悠的自认为在学,结果可想而知.

2022年前端的知识体系是什么?

笔者在这里会给大家列举你要转行前端或者自学前端的一个知识体系,当前体系适用于2022年.当然前端知识体系很庞大,这里列举的都是你必须知道的,能帮助你走向职业道路的技能点.

第一部分: html和css基础

html和css基础是任何前端初学者接触到的第一个知识点.这块内容对于一个前端开发者来说是入门是基础,是简单到不能再简单的内容,但对于一个初学者来说,却容易成为一滩沼泽,一座雪山,一片森林,一个花了很多精力很多时间依然跨不过去的障碍,很明显大多数数初学者并没有掌握正确的学习它的方法.

这块内容的特点是: 规则繁多,碎片化,枯燥,没有逻辑.你想实现一个简单的页面,也需要掌握所有的知识体系,缺一不可,就像玩拼图,少一个碎片就无法完整的拼图.所以这块内容学习不宜打持久战,学的越持久越容易忘.

建议的学习方法: 快速的把常用标签,常用css属性和css权重掌握,搞清楚标签的表现形式,盒子模型,浮动和定位. 至于html5新增的标签和css3新增的动画等属性先不要看. 不要试图把所有的知识点都背会,拖得越久你会发现前面的又忘了. 当你差不多掌握一个完整的体系的时候,开始写页面.从一个简单的导航模块开始,再实现一个卡片页面,再实现一系列的卡片页面.最后考虑整体页面的实现. 在实现的过程中,对于忘记的属性即使回看,使用并理解.相信你在完成一个完整的页面后,会对这块知识点有一个比较清晰的认知.然后再练习整站,一两个下来你基本可以做到精通.当然在写代码的时候,一定要注意命名和代码规范.

第二部分:JavaScript

2.1 JavaScript基础语法

web前端学习的核心就是js，但这并不意味js就难。相反，js基础语法很简单，你完全可以通过5天时间的学习来掌握相关内容：变量，数据类型，函数，对象，循环，逻辑判断等。要知道js的发明初衷就是“要像极了java（因为94年java比较流行），但要比java简单，要使不懂编程的人能快速的学会”。当你学会基本语法后，尝试做一些编程练习，比如打印99乘法表，计算bmi等，练习题可以百度找。不建议刷力扣，力扣是编程界的奥数，可以帮你打开思维，但对初学者并没有多少学习上的帮助，甚至容易劝退。

当你能够熟练的运用js基础语法的各种规则，接下来就要学习DOM操作api。简单来说就是需要用js控制浏览器中的html元素，比如改变文字颜色，修改元素大小，给按钮添加事件，点击后能触发相关程序等功能。完整一点的比如实现一个轮播和其他特效等，这是作为一个前端开发者必须掌握的知识点。

BOM相关api笔者认为了解即可，因为属性太多，也容易记混。后期用到了知道去哪找，知道怎么用就完全ok。配合实现相关案例比如无缝轮播，拖拽，放大镜特效等，todoList是一个练习DOM操作增删改查极好的案例。

数据结构和算法是面试的装逼利器，一般在面试中可能会问到，而这方面的能力在前端开发方面一般又用不着。所以是一个加分项，能了解一部分最好。如果你感觉前面学的内容掌握的不错，而且压抑不住自己那种编程的冲动，可以尝试去力扣找相关的题目作为练习。建议：找简单题目即可，且不可好高骛远乱了节奏。

jQuery是曾经的王者。曾几何时你只要是作为软件开发者几乎人人必会jQuery。比如一个java程序员哪怕根本不懂什么dom操作，但jq也得会捣腾个ajax请求。jq本质是原生dom操作的封装，宗旨是“write less，and do more."。所以如果你掌握原生dom操作，学习jquery可能只需要一天时间。然后利用jq进行插件封装确实减少了很多代码，但编程思路没有任何区别。

至于为什么现在前端开发基本上不会用jq了，前面的视频已经说过了。当下有更先进的框架比如vue从根本上改变了dom操作的思路，更快，更方便，功能更强大，jquery已经成为过去式。

2.3 html5和css新增

初学者在学习这块内容的时候容易被带节奏。html5和css3新增了很多的标签和属性，但是很多知识点我们根本用不上，有些甚至比较鸡肋。初学者在学了很多新知识，往往不知道怎么用，心力交瘁甚至变得心灰意冷。这里不夸张的说笔者曾经看h5新内容的时候就是这种感觉，很多小玩意儿不知道在哪用，想不通为什么要这么设计。好在通过后来的开发明确了哪些需要用哪些不需要用。”尽信书则不如无书“，这块内容学习的时候建议就学习笔者给大家画的这幅图里的知识点，其它的先放一放。

2.4 Ajax技术

ajax技术是前端开发者必须掌握的一项技术。有同学在这一块会容易钻牛角尖，觉得难。其实ajax就是一个页面局部刷新的技术，我们通过js发送请求，可以偷偷在页面不刷新的情况下发数据给后台，然后根据后台返回的数据更新页面内容。不要去纠结原生ajax怎么写，开发中不会让你手写原生ajax，都是封装好的api。你需要搞清楚的是什么是后台服务，什么是接口，什么是请求和相应，以及拿到相应的数据如何处理等问题。在实际项目中ajax的运用如喝水吃饭一样平常。当然这块内容的学习你需要一个后台服务提供接口，网上可以百度免费的第三方ajax测试接口。曾经豆瓣电影挺好的，但现在不能用了。好在笔者当时写了个爬虫爬了一部分电影数据。

2.5 js高级

这里涉及到的面向对象编程和相关概念，是一个合格的前端程序员都应该清楚的，当然在面试的时候也是高频面试题。面向对象编程是一种思想，和具体的语言无关。当然想让你立马理解并运用这种思想进行编程有点强人所难了，所以建议学会面向对象编程的套路。"我不一定能教会你面向对象编程思想，但我能教会你套路”，照着代码套路写就ok。然后es5原生继承是一个很难理解的概念，不要去试图推导这个过程，直接记住最优写法：借用构造函数+原型继承，应付面试没问题。

至于高阶函数，闭包，偏函数柯里化等，找到相关的案例实现一边，稍稍体会即可。防抖和节流是必须要搞清楚的，而且最好能手动实现。

es6现在特指javascript在2015年之后发布的（所有）版本。es6提供了很多新的api，新的方法和属性。其中箭头函数尤为方便，不仅简化了代码，而且避免this指针混乱。新的数组方法更是满足了我们操作数组的各种需求，原来需要写大量代码实现的，这里只需要调一个方法，非常方便。尤其是promise和async语法糖的出现，直接把异步操作变成了“同步”，让我们在编码的时候能更清晰的处理业务逻辑而不用担心执行顺序，真是太棒了。

第三部分: vue基础

3.1 vue基础语法

vue为什么能成为国内最流行的前端框架? 简单易上手和文档清晰占了主要作用.所以作为初学者如果具备基本的js基础,自己参照官网教程学习vue绝非难事.当然里面会涉及到很多之前没有遇到的概念,比如双向相应,计算属性,组件,插槽,路由等不容易理解.通过仔细的阅读官方教程再配合例子,相信你一定能搞定它.

vue高级部分在面试的时候可能会问的比较多,所以需要通读vue文档,不放过每一个细节.对不懂的地方也可以通过百度等形式查找,或者自己写例子来配合理解.elementUI属于vue全家桶的一部分,是vue开发中必学内容.

第四部分: 移动端开发

4.1 移动端开发体系

移动端开发中的页面开发主要分为两种形式: 响应式开发和移动端开发. 响应式开发可以参考我们官网,即一套代码可以同时适配pc端和移动端,需要一定的开发经验. 移动端开发相对简单,直接通过rem自动适配,参考小米官网.

4.2 微信小程序开发

微信小程序学习非常简单.微信小程序开发是前端开发者的必然需求.本身语法比较简单,而且不用担心兼容问题和适配问题.唯一让初学者胆怯的是那文档中的上百的接口,好在90%的接口我们在90%的开发中几乎用不到.

说明:如果你是自学,建议这一块暂时直接放弃. 因为不好搭建环境,而且没有后台服务.

4.4 uni-app开发

uniapp能够实现跨平台应用开发. 一套代码可以同时打包为移动端网页,微信小程序,android和ios原生app. 还包括其它平台小程序,比如支付宝小程序,抖音小程序等. 由于本身采用vue框架语法,所以学习成本和开发成本极低.又同时可打包为微信小程序和原生app,开发效率又高.得到了广大中小型公司的青睐,这几年也是飞速发展,生态相当活跃. 具体内容可以到uniapp官网自行查看。

uniapp的项目在练手的时候,最好配合后台接口,实现模拟真实环境项目开发. 这里要涉及的不仅仅是基本的语法和样式,还要学会项目的工程化开发. 其中包括公共组件封装,api接口封装,工具类封装等规范,还要体会在实际开发中前后端联调可能出现个各种问题,分析定位问题从而解决问题.

第五部分: 中后台开发

5.1 中后台框架

中后台项目开发是前端开发者都必须要涉及的一个领域. 如果前面内容学的还可以,这块需求可以说是相当简单.我们会借助elementUI框架搭建脚手架,然后对公共组件和方法进行封装,合理的项目结构也非常重要.在此基础上只需要练习后台页面常见的增删改查逻辑即可.对初学者难点在于如何获取后台接口,如何封装接口,如何处理跨域等问题.

elementUI网址: The world's most popular Vue UI framework

5.2 typescript

typescript简称ts,由微软开发.TypeScript具有类型系统，且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。

ts目前可以和vue2.x和vue3.x集成,在react项目中集成的也比较多. 目前主流的vue2.x开发大部分不会集成ts.所以对于初学者来说,ts可以作为补充内容后期学习.

学习难点:对初接触编程的新人来说,没见过强类型语法,比如java,只是到var. ts是把js用强类型的形式去写,自然也体会不到强类型的好处. 另外ts需要和相关框架做集成才能使用,不存在单独使用ts,也增加了学习ts的成本.

补充: react技术栈

react技术栈比较灵活，尤其是状态管理。这里采用umi作为脚手架，dva作为状态管理和路由管理对项目进行集成。Umi 是蚂蚁集团的底层前端框架，能够方便快速的搭建基于react antd的中后台框架，能为开发者省去技术选型，ui框架集成，项目架构等方面的开发时间，适合基于react技术的初学者。

上图来源于不凡君写的关于react入门教程部分内容，由于平台机制问题，这里无法放链接。但文档本身是开放的，免费的。

补充: nodejs

严格来说,nodejs是一个单独的方向,但这个方向又比较尴尬,往往不是通过培训发展出来的. nodejs是后台开发,或是开发一些中间件,或者爬虫.工作种从事nodejs开发的往往是从前端转过来的,但很少有人学习前端就是为了学习nodejs.

nodejs本身就是js语法,学起来比较简单,只不过是把浏览器的js解析引擎搬到了主机系统,运行环境的区别.nodejs可以方便的对硬盘文件进行读写,可以访问数据库,可以发送数据请求等,有别于浏览器环境.所以学习nodejs需要额外学习数据库,比如mysql或者mogodb.

nodejs作为后台语言,也有web框架比如express,koa等,和java的springMVC等需求类似.

总结: 对前端的初学者而言,nodejs只存在与后期的项目打包,压缩,以来安装等底层计算,我们根本不需要涉及nodejs本身.所以学习的时候可以把nodejs作为选修放到最后.

更多内容持续更新中。。。