前端开发实际上操作的是数据，而不是DOM

昨天写了 逆向的前端学习思路，就是从数据为源头，来反向的学习HTML,CSS,JS这些知识，今天想再详细的说说这个话题。

一般情况下，我们学习WEB前端，不管是新手还是老鸟，都是从HTML，CSS,JS这个顺序来学习。如果有老师教，那么他会告诉你说，HTML是骨架，是用来构成网页结构的；CSS是样式表，是用来定义网页的样式的，就是相当于用来给房子做装修用的；然后JS呢，它是管交互的，就相当于一个大楼里的开关啊或是电梯之类的，你一按开关，电梯动了，这就是你有请求，它有响应。切页面就是先有HTML，然后写CSS，然后再写JS这样的。

这个学习顺序是完全没有问题的，它也符合人类认识理解一个新事物的基本认知顺序，由浅入深，由易到难，量积累到一定程度了会有质的飞跃。但在这之前，你会写大量的。。。垃圾代码。并且当你面对一个在某一个具体页面上有N多交互，且不跳页，且这些交互还是操作不同接口返回的数据时，也许你就蒙了。

因为这类网页没有一个确定的结构，它随着不同权限的人，操作不同的数据，处于不同的状态，而在这期间，它的DOM结构是不断变化的。就是说，这个页面它会有很多种结构，而且可能每个人 & 用户在这个页面进行操作的时候，它的结构都不一样。这种页面，没有静态结构，它里面的所有DOM都是通过JS操作DATA动态生成的。如果它处于完全静态的状态时，这个页面里面应该是空的，什么都没有。为什么会这样呢？因为没有数据。

从html网页的发展来看，它有这么几个阶段，

一，完全静态。你切完，就上线，页面上的文字都直接写上的。

二，半静态。你切完直接扔给后端程序员；

三，半动态。你切完之后放到类CMS的网页发布系统里，选好网页所在类目，点击发布，完工。

四，全动态。你切完之后，自己调用后端API接口，获取数据，生成页面HTML，并绑定事件，完成交互。

五，无静态。也就是现在常说的SPA单页应用，这种页面没有固定状态，不跳页。

现在的情况就处于四至五之间，再之后我就不瞎说了。那么在这种情况下，我们怎么来学习WEB前端开发？

我再说一遍！

你再继续按HTML,CSS,JS的顺序来学习，完全没有问题，也是完全正确的。如果你已经这样学习了，请你继续。

但如果你在学习之余，还有余力，我希望你能换一个角度，180度原地调头来学习WEB前端开发。就是从前端的最终操作目标，data，数据，为起点，来看待 & 学习WEB前端。

昨天的文章里我说过，你在京东买东西，你点击的是input,但实际上通过input标签，你触发了ajax事件，调用了updata方法，修改了你的payCart对象，即购物车对象里的val值，这是什么？这在网页视图上反映的就是你的购物车里，多了一件商品。这个操作实质上操作的是数据，是你的payCart数据。

让我们先从需求出发，先把业务所用到的数据都整理，归纳出来。形成各种对象，对象其实就是数据的集合嘛。那数据是什么？它是一种模型。例如电商网站，它里面有各种数据，那对应的就会有各种模型。这种模型多了，就会抽像出规则。然后你再结合产品经理定义的业务逻辑来看，这时模块和结构就出来了。

这个想法，如果用词讲究一点，那就是“以数据驱动的模式来学习前端开发”。

看到这里，可能有观众要问，你说这么多，做为一个前端小白，我该怎么用你这种方法学习前端开发？

第一步，先理清网站里的各种业务、逻辑，并以对象的形式写出来；

第二步，把这些对象以业务逻辑的顺序，画线连续起来；

第三步，把这些业务、逻辑之间的连线，加入适当的事件做为开关；

第四步，根据前三步，学习需要的JavaScript语言。只学需要用到的。

其实说到最后吧，这个思路的要求，其实蛮高的。呵呵，，这个话题就说到这里吧，其实这也是我个人的脑洞大开而已。