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

时间:2022-04-23
本文章向大家介绍Web开发感悟:数据绑定是一种技术,更是一门艺术,主要内容包括1、前言、2、什么是“绑定”?、3、“赋值”是个好办法、4、有了“赋值”,我们就该满足了吗?、4.2、后起之秀-MVC、4.3、MVC也有不给力的时候、5、“双向绑定”—神来之笔、5.2、M-V-VM ? or M-VM-V ?、5.2、砖家辟谣:Just in Client,No in Server!、5.3、内部实现机制胡侃、5.4、转换器—让双向绑定如虎添翼、5.5、屁股决定脑袋,思路决定出路、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。

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)...

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