【黄金时代】20年-我眼中的前端开发思想的变迁

现在的前端框架越来越倾向于隐藏细节，不管是react还是vue都是这样。

说是让你更集中精力在业务逻辑，但某个东西在dom层面到底是怎么实现的？不用你用什么，前端开发不操作dom是不可能的。但现在至少你在使用框架的时候看不到这些了。

好处是前端入门变的更简单，会用框架照着套路写就ok；不能说坏处，不好的地方就是，深入前端变的更难了。因为你要搞清某个东西怎么实现，必须先搞懂这个框架的实现。

从这个角度来讲，

1，前端开发会更加工具化；

2，更有迷惑性。外行以为学会某几个框架就Ok，但学了才知道，根本不是这样的。

这个的大背景是前端越来越工程化。

<!-- -->

让容易的更容易，让困难的更困难。

现在前端开发至少还有些技术含量，还有许多地方要自己搞定。也许现在才是前端开发的【黄金时代】。各显其能，各种新工具、新应用、新东西不断的冒出来。百家争鸣，活力四射，没有哪种东西可以一统前端，对应的也没有哪种东西可以包打天下。

未来，等前端工程化成熟到Java那种程度的时候，应该才是前端码畜大批量出现的时候。照着格式你就写吧，哪里出错马上提示，想出bug都难。

所以有人说，现在的前端所走的路，就是多年以前的后端开发所走过的老路。

有一定的道理。

<!-- -->

回看jQuery打天下的时期，对比现在来看，只能算是前端开发的蛮荒时代。什么都没有，想要什么都得自己去封装。别人的东西，你可以用，但可能有坑。那时的前端只有一个声音，就是javascript。

现在可好，vuejs，reactjs，它们确实也是js，但跟javascript完全不同。不管是写法还是思想，等于是一种新js。

但问题在于，如果你想深入研究新js，必须要搞定旧js。那么，先搞哪个呢？也许这就是前端新人最挠头的问题吧。

先学旧js，至少在当下吧，vuejs和react不太用得上；先学新js吧，vue和react里有些问题、现象就根本无法理解。

新旧js一起学呢？你可以想像一个外国人，同时学中文和文言文，或是同时学普通话和某种南方方言，那酸爽大概也就是这样了吧。

<!-- -->

数据与dom，是前端开发中的二条路线。

早期都是操作dom，在操作dom的时候把数据也操作了。那时的dom可以说是数据的管道。

现在反过来了，现在都操作数据，在数据watch的时候，或是.dispatch引发subscribe的时候，把dom也顺便操作了。

至少dom还看得到，但数据完全是抽象的。它不依赖于任何东西，就是一串json字符串。把数据的结构解构为dom的结构，对于前端新人这又是一个难关。

数据驱动视图，也就是M-V-VM模型；

pub-sub，观察者模式；

..

越来越多的html，css，javascript之外的东西，渗入了前端领域。

<!-- -->

从唯物主义辩证法的基本观点来看，“事物既有相互区别的一面，又有相互联系的一面”。要以全面发展为前提，把二者统一起来，以实现和谐发展之目的。

原生javascript与VueJs、ReactJs之类的新js语言有相互区别的一面，但同时它们又有统一的一面，此二者为相互依存的关系，所以可以说它们也是辩证统一的关系。

<!-- -->

学原生JavaScript，然后再学Reactjs框架、语法、生命周期、开发思路；然后又再学Vuejs框架、语法，生命周期、开发思路；再学angularJs，，，再移动端，再。。。什么时候是个头？这是许多前端新同学的普遍问题，就是认为前端学不完。

那么按照辩证统一的观点，“其实所有这些，依然都是JavaScript”。

<!-- -->

我是从前端最原始的那个阶段走过来的。最开始的时候，只有网页设计，只有javascript；后来有了前端开发，又有了jQuery；再后来就有了Vue、react之类的。

前端的开发思路也在不断的变化，原始时期是写特效，什么跑马灯、文字红绿蓝加粗闪烁啊、网页漂方块广告、浏览器title快速滚动文字、鼠标跟一串文字等；蛮荒时期只是有了封装dom操作，抹平浏览器兼容性；到现在到操作数据驱动dom，这些不同的思路，在我脑子里都深刻存在过，所以感受会比较强。

我脑子里的前端开发的思路，至少已经被强扭过三次了。

<!-- -->

今天在备课VueJs购物车的时候，我就感觉，现在学前端在思想意识上要有高度。不能局限于“我就是学html，css，js，学几个框架”那么简单了，而是要立足于“前端开发思想”的学习。

开发思想的学习与感受，最有效的办法就是“比较”，先这么做一下，再那么做一下。你自己就会发现区别在哪里了。

所以在我的WEB前端零基础课里，就是带你从零开始，做一个完整的电商网站，从首页产品列表，到产品详情页，再到购物车，再到结算(模拟)，这是一条完整的业务链条。

然后同一个东西，做三遍，历练三种思路。

第一遍使用jQuery开发，主要是操作dom的思路；初步理解一个网页上的东西到底是怎么做出来的。先能做出东西了，能运行。

第二遍使用ReactJs开发，主要是组件化的思路；

第三遍使用VueJs开发，也是组件化的思路，但它与reactJs不同，哪里不同？写完了你自己会有体会。

怎么说呢，只看、听的话，收获是有限的。你必须自己写，路你必须自己走，然后你才会有自己的收获。