Web开发感悟:数据绑定是一种技术,更是一门艺术

1、前言

作为一个多年从事b/s开发的程序猿,曾先后使用过asp、asp.net做为主要服务端语言。不管是相对低级的asp也好,还是高级的asp.net也罢,都100%会遇到"数据绑定"问题。

2、什么是“绑定”?

广义来讲,如果服务端的数据需要在页面上呈现,并且这份数据需要与整个页面(或页面的某个部分)建立关联(不管是单向关联还是双向关联),这就是数据绑定。

3、“赋值”是个好办法

在asp年代,压根儿就没有控件这一说,所以服务端的数据呈现,基本上就是通过在页面中内嵌<%=xxx%>来实现的(xxx可理解为一个定义的变量),要改变显示的内容,最方便的方法就是给变量xxx赋不同的值。

到了asp.net年代,大量丰富的web form控件,让开发变得更轻松,cs代码也以CodeBehind的形式与页面分离开来。如果要让一个GridView或Repeater呈现出后台数据,只要简单的写上 gridView1.DataSource=xxx; gridView1.DataBind();  就行了。以此类推,要让一个TextBox控件在页面上有内容,也只要简单的写一句textBox1.Text = "Hello World"即可.

4、有了“赋值”,我们就该满足了吗?

4.1、界面与逻辑的纠缠

“赋值”几乎是解决数据绑定的万能之道,理解起来也很容易,但是人总是喜新厌旧的。相信无数web程序员都遇到过以下情况:网站上线不久,客户发现不好看,要求把界面重做,于是UI被推倒重来。但是大量的赋值语句,都是与控件命名紧密关联的。如果一个控件的ID或Name改变了(比如从TextBox1改名成TextBox2),这样原来的TextBox1.Text="Hello World"就无法再编译成功了。换言之:赋值的办法将界面逻辑与界面绑得太紧,是一种紧耦合的程序设计。在遇到UI频繁更新需求时,代码维护量极大,会让程序员们心率焦脆。

4.2、后起之秀-MVC

为了将界面与行为分离,asp.net终于引入了mvc模式,即asp.net mvc(目前已经发展到3.0),MVC模式中,数据模型Model与页面View被分离成二个不相干的部分,在很大程序上实现了解耦,每个页面(即View)需要数据呈现时,Controller会从Model中拉出一份数据,然后扔给View,即:Controller充当了中介(或称为媒婆)的角色,负责在View与Model之间牵线搭桥。View在绑定数据时,只要关心媒婆介绍过来的Model即可,然后利用HtmlHelper将Model直接处理成最终所需要的html代码并渲染在页面上,不用再刻意关心每个控件的ID或Name是啥。MVC模式在遇到UI重构需求时,只要View对应的Model没有变化,Controller与Model这部分的代码基本上不用修改,只要改改View就行了,代码维护起来相对比较轻松。一切看上去很美,于是一时之间,MVC掀起了一阵高潮,甚至出现了asp.net mvp已死的论调。

4.3、MVC也有不给力的时候

asp.net mvc有二个明显的不足:

4.3.1、代码分离不彻底

aspx中仍然允许使用<%...%>来书写服务端代码,而且很多文章甚至推荐这样做(即使是微软大牛的官网博客也是如此),这在我看来是某种程度的倒退,又把逻辑与界面混在一起了,WebForm中的Code-Behind感觉都比这个要好。

4.3.2、绑定只是单向的

不管是asp.net webform,还是asp.net mvc,说到底都是传统的web技术,还算不上RIA,双向绑定还实现不了,Model在服务端绑定到View后,最终到达浏览器的只有html+css+js,如果能在“浏览器”客户端"自动"能感知UI的变化,并同步反应到Model本身,而不是每次都要提交表单,这该多好!

5、“双向绑定”—神来之笔

Silverlight/WPF的出现,一举解决了上面提到的二个不足。全新的xaml格式代替了aspx/ascx格式,在xaml的世界里,根本不允许任何服务端代码,这是彻底的cs代码/UI界面分离!而且全新的双向(TwoWay)绑定方式,能自动在UI与Model之间维持数据状态同步(即:用户在界面的控件上做了操作,与之绑定的Model能自动变化;反过来也一样,Model的数据变化了,UI上的控件呈现也会自动更新)

5.1、You jump,I jump!

《铁达尼号》中“解渴”与“肉丝”有一句经典台词:You jump,I jump ! 这句话的言外之意:你死了,我也不活了。用程序员的话说:就是"状态同步",你从生(的状态)到死(的状态),我也一样要保持相同的状态。这与双向绑定是多么的贴切!数据源的Model属性值变化了,界面会自动变出反应(更新某些控件的呈现);同样用户在界面上修改了控件值,Model的相应属性也随之同步变化。严重怀疑双向绑定的灵感源自这部经典电影:)双向绑定同时也道出了SL/WPF世界的一个真谛:数据驱动UI。(按佛家的说法可以理解为:UI只是一副空皮囊,内在的[血肉]元神完全由数据驱动)

5.2、M-V-VM ? or M-VM-V ?

此去略去N字节(N>=1024)...

5.2、砖家辟谣:Just in Client,No in Server!

此去略去N字节(N>=1024)...

5.3、内部实现机制胡侃

此去略去N字节(N>=1024)...

5.4、转换器—让双向绑定如虎添翼

此去略去N字节(N>=1024)...

5.5、屁股决定脑袋,思路决定出路

此去略去N字节(N>=1024)...

注:先理一个提纲,有空再回来完成填空。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小文博客

良心压缩软件Bandizip——无广告超精简

5.4K5
来自专栏睿哥杂货铺

SDN 技术指南(四):Open vSwitch

由之前发布的文章知道 Open vSwitch(Open Source Virtual Switch) 是一款基于软件实现的开源虚拟交换机。

2776
来自专栏Crossin的编程教室

【Python 第4课】输入

Hi~Crossin又来了。 可以用编程语言让计算机按你说的指令做事情之后,大家是不是有些跃跃欲试呢?别着急,先回顾一下我们之前几节课。我们到现在一共提到了三种...

3167
来自专栏不二小段

Python自动统计微博抽奖中奖男女比例(附代码)

今天来写一个自动计算微博抽奖男女比例的代码,很早就应该发这篇了,只是不想蹭热点(才不是拖更)。

1293
来自专栏Kiba518

【我们一起写框架】MVVM的WPF框架(五)—完结篇

框架设计不应该局限于任何一种设计模式,我们在设计框架时,应该将设计模式揉碎,再重组;这样设计出来的框架才具有一战之力。

1094
来自专栏图像识别与深度学习

《Android》Lesson24-综合项目实战

2158
来自专栏编程

设计一个界面,很简单!

本周,小编给大家分享在Python中如何制作一个简单的图形界面吧,Python里有很多图形用户界面库,如Tkinter, Pmw, wxPython, PySi...

23710
来自专栏技术总结

Python爬取电影天堂

摘取部分网友的回复: 1、之前在北京买房,谁想房价开始疯长,链家的房价等数据分析只给了一小部分,远远不能满足自己的需求。于是晚上花了几个小时的时间写了个爬虫,...

1323
来自专栏進无尽的文章

地图| 高德地图源码级使用大全

高德地图提供包括:web前端、Android、iOS、服务器、小程序等平台的地图服务, 地图功能众多,本文记载的只是自己遇到的一些问题,绝大部分功能只要参照官...

4212
来自专栏SAP最佳业务实践

SAP最佳业务实践:FI–现金管理(160)-14银企对账-客户收款-承兑汇票-F-36收到承兑汇票

4.5.2 F-36收到银行承兑汇票 收到客户银行承兑汇票支付应收账款,形成财务记账如下: 借:应收票据 贷:应收账款 ? 输入凭证日期、参照、抬头文本 回...

2958

扫码关注云+社区