一张图告诉你前端该怎么学 | 老尚自学方法论

各位同学们大家好，我是老尚

最近很多同学一直在后台留言问我

零基础web前端开发到底该怎么学呢？

没有思路呀，同学们的需要，就是我的方向

根据我长期讲前端零基础课的经验

我总结了一套【老尚前端方法论】

这是一套很完整、系统的前端开发自学理论

借着这个方法的讲解

我同时也回答一些前端自学小伙伴的问题

那现在开始我们，老尚前端方法论的第一部分

【一张图告诉你前端开发该怎么学】

我先拿这个汽车的拆解图给大家举例子

假设我们要造一台汽车

首先要搞定发动机，然后是底盘、变速箱

然后是轮胎、外壳等结构覆盖件

这些都是有很明确的顺序的

然后我们很多同学在自学前端开发的时候

肯定也会去很多的学习资料、方法、路线

也基本都知道要先学html、css

然后再学js，也知道要学习vue、node等

也知道要多做例子，然后拿着例子去写简历

然后再去做面试题等等，这基本的环节也都清楚

然后刚开始的时候，还思路基本清晰

但当你学一些东西之后，脑子里的思路

就开始不那么清晰了

开始搞不清该先哪个后哪个

对开始怀疑自己的学习顺序的选择是不是正确

就是说你在自学的过程中，找不到具体的方向

不知道知识点之间的关联性

更不清楚自己的学习速度、进度是不是正常

不知道如何使用一个实例把它们串起来

那么这种情况你弹幕发个1我看看

我看一下有多少个小伙伴有这种情况

那今天我就和大家一起，通过一个前端学习方法论

这样的一个学习框架，来把它们串连在一起

先来看这样后张图，图中的多层金字塔是网上找的

因为自己画一个这么漂亮的多层金字塔也不容易

然后接下来我给大家一点一点的解构这张图

跟大家说，怎么样的借助这张图

去理解前端开发自学中的学习层次与顺序

例如你某天看了一些vueJs的东西

那么你知道，这是在工具这一层的内容

而不是把vue这类知识和原生js之类的东西

在脑子里混在一起，它们根本就不是同一类东西

一个是基础层，一个是应用层的

另外拿汽车结构来做例子是想说

学习前端开发就和拼装汽车是一样的

你的思路是清晰的，思路是正确的

那么你造出的零件就是正确的

但是有一个客观事实不容忽视

就是自学相当于是自己从头手动造车

而现在的汽车相当复杂了

不是像以前那样，一个发动机加4个轮子就ok

所以你自学的过程中，就算你一切顺序

也是需要相当的时间的

你不要觉得，喔，感觉老尚说的挺对

照着老尚说的做一下试试

试了没几天没效果，哼，老尚说的都不对

拜托啊，同学们，

就算是我的一对一私教班，也要近四个月的时间

这还是我带着学，不走弯路提高效果的结果

你如果是零基础自学的话

最起码你要按六个月、半年的时间来学习

你的前端开发能力才会有一个结构、体系上的变化

这节视频我主要是从学习方法、逻辑上去讲

如何从整体、根本上去提升你的前端自学能力

那现在我们先把图片只留下第一层

从左向右看，首先就是html、css、js这三大块

只有你把html、css、js这三大支柱都搞好

你才能向上一层去攀登

很多同学为什么学vue、node、各种第三方UI

的时候问题很多呢？

就是因为最基础的JavaScript学的不是很扎实

就像一个塔一样，底不稳，它高了就要倒

但是也不能怪这个自学的同学

毕竟他们自己并不清楚Js该学到什么程度

在现在来讲，如果想要真正的学习前端

那么js必须要达到真正的精通才行

否则在前端开发这块，你必然走不远

那么现在先来说前端开发三大支持

它们是，html、css、javascript

它们三个都非常的重要，先看html

html对于网页页面的结构非常的重要

虽然它只是几个常用的html标签

但是一个页面的模块化做的好不好

直接决定了这个页面的可维护性、可扩展性

为什么有些页面我们改起来很费劲？

就是因为它的html结构设计的不合理

该单独的html标签没有独立出来

而是和其它的html容器合在一起

这就直接导致你在做页面自适应的时候

一些标签不能自动的弹性伸缩

然后另一个重点就是css

它是用于控制页面的展现，但是很多时候

它也与页面的交互息息相关

例如我们用js来切换class的时候

这时就要注意css之间的衔接

所以写css样式的时候，要从二个方面考虑

1、单独的展示；2、参与交互操作的时候

css就其本身来讲，只是一些页面容器的属性定义

如果不参与交互操作的话

确实不用在css这方面花费太多时间、精力

但如果项目有移动端的需求，

就需要考虑不同客户端的展示形式

javascript是一种脚本语言

但从功能的角度来讲，更多的负责交互操作

编码coding这块，很多同学反馈说

记不住相应的方法和属性，这就是写的少

并没有其它的原因，与你不会英语关系不大

在基础这一层级，更多的是原生JavaScript的应用

那么方法和属性只是有限的几个

基本都与dom操作直接有关

例如getElementById、setAttribute、onclick

innerHTML、createdElement、appendChild，等

基本上常用的dom操作的方法、属性不超过10个

我对它们的记忆方法，就是不要单个去背

而是把它们放在一个一个的小例子里

去写相应的功能，在coding的时候去记忆

因为它们虽然是英文，但并不完全是单词

如果只是硬背的话，就算记住了也不会用

时间长了依然是忘

这也是很多小伙伴学js很痛苦的原因之一

背了也不会用，记住了用不了多久就忘

是不是，有没有？

如果有这种情况的小伙伴弹幕打2我看看

所以我非常建议同学们

在写demo中做为一个整体

去记忆js的方法和属性

coding代码这里面又分成二个层面

代码编写和调试、排错的能力

很多同学在刚开始自学的时候

都是照着网上的例子去抄写代码

一但出现报错的时候，就不知道该如何处理

那么这种排错的能力是如何学习的呢？

其实这种调试代码和排错的能力

它是一种内生积累出来的能力

前提之一就是大量的代码编写

如果没有相当的代码量

那么想掌握调试代码、排错的能力

是不可能的！

只有在大的代码量的前提之下

再加上对所开发项目实例的理解

才能基于自己的思路

去修改、调试代码，去验证自己的思路

那么现在第一层【基础】，我已经说完了

那么给一个小结论，怎么样的基础算可以呢？

1、京东官网首页那样的页面

我算你半天时间吧，只要求PC端，95%的还原

2、基本常见的页面交互都可以写的出来

常用的原生js的关于事件、dom操作的方法都会

操作数据、对象的方法基本掌握

3、能够有基本调试、排错能力

那么在自学前端开发的情况下

这个基础就算勉强可以了

毕竟在这样的情况下，再去单纯的深入js本身

也不是特别的适合

接下来咱们往上一层，说工具这一层级

很多同学在学到这一阶段的时候，都会被吓到

又是vue、node、git、webpack。。。等等

还有很多新的东西不断的冒出来

例如flutter之类的东西

就是很多同学在刚开始的时候，它分不清

工具和技术的区别。例如，vueJs

它就是一个典型的工具，围绕着vue的所有的技术

其实都是带有前端工具属性的

例如，经常有面试官会问vue双向绑定的原理

很多同学就被问住了

其实这个问题的本质是原生javascript的

数据属性、访问器属性Object.defineProperty

vue使用它来重新定义了对象的get、set方法

所以同学们你们会看到很多工具、框架的技术

其实是原生JavaScript的技术

所以我在基础和工具这二层的中间

我加一个圆圈箭头的图标，意思就是

基础和工具，它们是相辅相成的

你掌握了基础，就能更好的应用工具

你用熟了工具，就更能理解js原理

有同学可能会说，各种框架不是技术，那它是什么？

要按我个人说法，它是【应用】

就是所有的框架，它要解决的都是业务应用层面的问题

就例如早期的jQuery它为了解决dom操作中的

浏览器兼容问题，其实jq就是个dom查找器

而reactJs和vueJs则是更进一步

直接把html页面给模板化，以数据来

绑定到html模板上，更新数据重新渲染页面

这其实就是抛弃了找到dom操作dom的思路

也把开发者从dom操作中解放出来

让前端开发人员更聚焦于前端业务的开发

所以你们理解了之后，就会发现

vue也好，reactJs也罢，它们并不是新的技术

而只是原生JavaScript的另一种方式的使用

只是让我们在开发业务的时候，更有效率

所以我说它们不是技术，只是工具

用来解决业务应用层面的问题

所以同学们在自学到这一层面的时候

不要被各种新名字、新东西吓住

它们只不过是各种铁锹、铁锤罢了

你需要哪个就学哪个，不必追着它们学

而且很多时候，某个工具只是换了个皮

加了些东西，就又重新推出来了

就例如这个react和vue，

它俩除了写法不同之外，我就觉得没什么大区别

一样的单向数据流，一样的组件化

一样的页面模板化，一样思路的redux和vuex

连生命周期我看也差不多，都是那几个事件点

这个图一共有五层，因为时间的关系

咱们今天这个视频先说第一、二层

其余的3、4、5层，咱们下一节再说

今天的内容就这么多

下次再见，88