前端开发实际上操作的是数据,而不是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语言。只学需要用到的。

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

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-07-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ThoughtWorks

TW洞见 | 浅谈快捷键

文章作者及视频来自ThoughtWorks:王健,部分图片来自网络。 又是一个小的分享,落笔成文。开始其实是想做一个文本编辑器的分享,不过在准备过程中,发现编...

28590
来自专栏小古哥的博客园

微信小程序-实战巩固(二)

刚刚写了小程序入门没几天,小程序就开放个人开发者资格,感觉为我而来啊 \(≧▽≦)/。迫不及待的去注册,准备将之前的处女作传上去体验一把,结果卡在了服务器配置上...

47470
来自专栏前端知识铺

入口文件开始,分析Vue源码实现

网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行。

436120
来自专栏BestSDK

【教程】UX中最常用的6个功能性动效,看完自己也成大神了

功能性的动效是指一种微妙且具有清晰合理目的的动画效果。它能减少认知负荷,防止对(界面)变化的忽视、还能帮助用户在界面的空间关系之中建立惯性回忆。更重要的是,动效...

35750
来自专栏hightopo

从IE6到IE11上运行WebGL 3D遇到的各种坑

20330
来自专栏互联网杂技

20个为前端开发者准备的文档和指南4

1.I want to use 基于的数据和功能都在Can I use网站上列出来了,这个app可以给你选择很多前端开发功能的能力和获得全世界用户看到你选择的功...

352100
来自专栏编程微刊

提高工作效率的几个小技巧

17040
来自专栏IT派

推荐一些适合新手练手的Python项目

PHP自然是不会错过这个噱头、C/C++作为元老级的编程语言一直屹立不倒、Java依旧是市场上的香饽饽、当然还有JavaScript、C#、Ruby以及Obje...

42740
来自专栏天天P图攻城狮

iOS 开发实践:iOS照片API的那些坑

在和图片打交道的那些日子里,遇到过不少图片相关的诡异问题。 在这里不会具体对照片API做介绍,而只会对其中的一些坑做一些总结。

62940
来自专栏Material Design组件

Human Interface Guidelines —— 活动视图(Activity Views)

40090

扫码关注云+社区

领取腾讯云代金券