专栏首页菩提树下的杨过Web开发感悟:数据绑定是一种技术,更是一门艺术

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 条评论
登录 后参与评论

相关文章

  • 重温delphi之:如何将Bitmap位图与base64字符串相互转换

    先引用delphi自带的单元 uses EncdDecd; 然后就可以使用下面二个函数了: by 菩提树下的杨过 http://yjmyzz.cnblogs.c...

    菩提树下的杨过
  • IIS7上部署Asp.Net4.0时UrlRouting的若干问题

    今天把公司的一个小web项目从Asp.Net3.5升级到Asp.Net4.0,结果在UrlRouting上遇到一系列很纠结的问题.(注:Url路由是Asp.Ne...

    菩提树下的杨过
  • JBOSS EAP 6.0+ Standalone模式安装成Windows服务

    网上有一些文章介绍用JavaService.exe来实现,但是到EAP 6以上版本,我试过好象没成功,幸好JBoss官方已经推出了专门的工具。 一、先到官网下载...

    菩提树下的杨过
  • 新型冠状病毒肺炎最新研究集合:自然史、传播模式和诊断方法(附链接)

    本文检索并整理了世卫组织公布新冠病毒全球研究的九大重点:新冠病毒的自然史、传播模式和诊断方法;识别动物宿主;流行病学研究;临床特征和管理;疫情防控;候选疗法的研...

    数据派THU
  • 我的网站的结构说明

    不知道大家有没有看懂这个图。这个是我的网站(不包括后台管理)的结构图。基本上和三层架构有些相似,但是有三个不同的地方:    一、 数据访问层。 1、数据访问层...

    用户1174620
  • 在自动化测试工作之前,你应该知道的10条建议

    关于自动化测试,这些年经历了太多的坑,有被动的坑,也有自己主动挖的坑,在这里做了一些总结。

    苦叶子
  • 分页解决方案 之 QuickPager的使用方法(在UserControl里面使用分页控件的方法)

          因为我一直没有在UserControl里面使用过QuickPager分页控件,我都是直接在.aspx里面使用,所以这个bug一直没有发现。后来告诉我...

    用户1174620
  • jquery 绑定事件 - mouseover() mouseout() mouseenter() mouseleave() hover()

    进入子元素也会触发mouseover()事件,那么如果#small的div没有嵌套在里面是否会触发呢? 这样应该就不会。

    Devops海洋的渔夫
  • Hexo 双线部署到 Coding Pages 和 GitHub Pages 并实现全站 HTTPS

    进入 Coding 官网,点击个人版登陆,没有账号就注册一个并登录,由于 Coding 已经被腾讯收购了,所以登录就会来到腾讯云开发者平台,点击创建项目

    TRHX
  • linux虚拟机安装vmtools

    先将vmware workstation中的linux虚拟机开机,然后在左侧虚拟机列表中右键点击该虚拟机,选择安装vmtools,这是vmtools镜像文件就会...

    梦_之_旅

扫码关注云+社区

领取腾讯云代金券