什么是数据绑定

数据绑定是将一个用户界面元素的属性绑定到一个类型/对象实例上的某个属性的方法，实现该元素属性和该对象实例属性在一方数值修改时另一方的数值也随之修改。

百度百科中的数据绑定的举例：如果一个开发者有一个Customer类型的实例，那么他就可以把Customer的“Name”属性绑定到一个TextBox的“Text”属性上。“绑定”了这2个属性之后，对TextBox的Text属性的更改将“传播”到Customer的Name属性，而对Customer的Name属性的更改同样会“传播”到TextBox的Text属性。Windows窗体的简单数据绑定支持绑定到任何public或者internal级别的·NET Framework属性，同样可以利用数据库来简单地绑定页面控件的单个属性。

在此之前做项目的时候做过C#编写的WPF应用程序，对其中的数据绑定有一些应用，感觉非常方便，开发效率很高。

C#WPF数据绑定举例：

 

 先建模型类，告警类：

public class CAlarm                                        //告警类
    {
        public int iID { get; set; }                        //告警对象编号
        public String sTsName { get; set; }           //告警对象名称
        public String sAlarmLevel { get; set; }       //告警级别
        public String sDesc { get; set; }                //告警描述
        public DateTime dAlarmTime { get; set; }         //告警时间
    }

页面布局代码:

<Window x:Class="WPFBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="告警列表" Height="350" Width="487">
    <Grid Height="311" Width="464">
        <ListView Name="listView1" Height="311" Width="464">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="编号" DisplayMemberBinding="{Binding iID}" Width="50"></GridViewColumn>
                    <GridViewColumn Header="对象名称" DisplayMemberBinding="{Binding sTsName}" Width="100"></GridViewColumn>
                    <GridViewColumn Header="告警级别" DisplayMemberBinding="{Binding sAlarmLevel}" Width="60"></GridViewColumn>
                    <GridViewColumn Header="告警描述" DisplayMemberBinding="{Binding sDesc}" Width="100"></GridViewColumn>
                    <GridViewColumn Header="告警时间" DisplayMemberBinding="{Binding dAlarmTime}" Width="100"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

然后是MainWindow的代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace WPFBinding
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        private IList<CAlarm> m_ilAlarms = new ObservableCollection<CAlarm>();
        public MainWindow()
        {
            DateTime dt = new DateTime();
            TimeSpan ts = new TimeSpan(0, 0, 2, 0, 0);

            m_ilAlarms.Add(new CAlarm() { iID = 1, sTsName = "对象1", sAlarmLevel = "一级告警", sDesc = "水浸检测到漏水", dAlarmTime = dt });
            m_ilAlarms.Add(new CAlarm() { iID = 2, sTsName = "对象1", sAlarmLevel = "二级告警", sDesc = "水浸检测到漏水", dAlarmTime = dt = dt.Add(ts) });
            m_ilAlarms.Add(new CAlarm() { iID = 3, sTsName = "对象2", sAlarmLevel = "一级告警", sDesc = "水浸检测到漏水", dAlarmTime = dt = dt.Add(ts) });
            m_ilAlarms.Add(new CAlarm() { iID = 4, sTsName = "对象3", sAlarmLevel = "三级告警", sDesc = "水浸检测到漏水", dAlarmTime = dt = dt.Add(ts) });
            m_ilAlarms.Add(new CAlarm() { iID = 5, sTsName = "对象2", sAlarmLevel = "一级告警", sDesc = "水浸检测到漏水", dAlarmTime = dt = dt.Add(ts) });
            InitializeComponent();


            this.listView1.ItemsSource = m_ilAlarms;
        }
    }

    public class CAlarm                                //告警类
    {
        public int iID { get; set; }                //告警对象编号
        public String sTsName { get; set; }            //告警对象名称
        public String sAlarmLevel { get; set; }        //告警级别
        public String sDesc { get; set; }            //告警描述
        public DateTime dAlarmTime { get; set; }        //告警时间
    }
}

运行结果查看绑定:

MainWindow后端代码使用ObservableCollection这个集合,可以双向绑定。

private IList<CAlarm> m_ilAlarms = new ObservableCollection<CAlarm>();是定义一个双向绑定的集合

以下是界面绑定内容

<GridViewColumn Header="编号" DisplayMemberBinding="{Binding iID}" Width="50"></GridViewColumn>

<GridViewColumn Header="对象名称" DisplayMemberBinding="{Binding sTsName}" Width="100"></GridViewColumn>

<GridViewColumn Header="告警级别" DisplayMemberBinding="{Binding sAlarmLevel}" Width="60"></GridViewColumn>

<GridViewColumn Header="告警描述" DisplayMemberBinding="{Binding sDesc}" Width="100"></GridViewColumn>

<GridViewColumn Header="告警时间" DisplayMemberBinding="{Binding dAlarmTime}" Width="100"></GridViewColumn>

使用DisplayMemberBinding="{Binding iID}"的方式绑定

当然WPF中还有其他绑定数据到界面元素的方法和绑定类型，在此不再一一赘述。我想说的是WPF的这种绑定的方式大大提高了开发的效率。

---

然后在最近的一个web应用的项目中前端和后端分离，使用ajax获取后端json数据，然后拿到数据后再通过js刷新到web页面的dom对象相应的属性中显示在页面上。

js代码写了一大片一大片的。好累人啊。

联想到WPF的开发高效，现在真的好痛苦啊。

我是一个很懒偷奸耍滑的人。怎么办？度娘。果然有现成的：

以下是度娘百科中的内容：

AngularJS

编辑

AngularJS^[1]  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

看来我太low了。老土了！跟不上了！

一个简单的例子(抄自水痕01的《Angular开发(三)-关于属性绑定与事件绑定》一文)：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<p>双向数据绑定:</p>
<input type="text" [(ngModel)]="user.name"/>
<div [ngStyle]="style1">{{user.name}}</div>

js代码：

//ts代码
user:any = {name:"12345"}

直接搞定。

好高效啊！

---

 

我能不能自己写个绑定代码？试试：

先做一个文本框和json对象绑定的试试。

查资料发现es5的特性get/set访问器有希望实现这个双向绑定的功能

上代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>setAndgetTest</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        
        //声明一个json对象用来和dom对象绑定
        var theObj = {
            student_id: 100001,
            name: "Leao",
            age: 31,
            phoneNmb: "18618328433"
        };

        var CBinding = function(obj) {
            var vals = {};
            /*
            private变量,用来保存对象属性值的集合,只保存基本类型,以json形式保存,比如vals最终可能是这样:
            {
                name:"Leao",
                student_id: 100001,
                age: 31,
                phoneNmb: "18618328433"
            }
            */

            var doms = {};
            /*
            private变量,用来保存dom对象的集合,也就是vals的内容跟dom对象的绑定,doms最终可能是这样
            {
                Obj:domObj,        //domObj是name绑定的dom对象
                protertyName:"value"    //protertyName是name在dom对象domObj上绑定的属性名称
            }

            其实可以把上面的vals修改一下:
                    name: "Leao",
                    age: 31,
                    phoneNmb: "18618328433"
            {
                name:{
                    name: "name1",
                    bindingObj:{
                        Obj:domObj,
                        protertyName:"value"
                    }
                },
                student_id: 100001,//没有绑定
                age: 31,//没有绑定
                phoneNmb: "18618328433"//没有绑定
            }
            */

            this.bInit = false;//是否被初始化

            if (null != obj) {
                var names = Object.getOwnPropertyNames(obj);//获取obj的所有属性名
                var sFieldName = "";

                if (null != names && 0 < names.length) {
                                var iIndex = 0, iCount = names.length, val = null;

                    for (iIndex = 0; iIndex < iCount; iIndex++) {
                        sFieldName = names[iIndex];
                        val = obj[sFieldName];
                        vals[sFieldName] = val;
                        doms[sFieldName] = {
                            Obj: {},        //保存dom对象
                            bSet: false,        //是否被绑定
                            protertyName: ""    //dom对象的属性名称
                        };

                        Object.defineProperty(this, sFieldName, {
                            value: val,
                            configurable: true,    //能否使用delete、能否需改属性特性、或能否修改访问器属性、，false为不可重新定义，默认值为true
                            enumerable: true,    //对象属性是否可通过for-in循环，flase为不可循环，默认值为true
                            writable: true,        //对象属性是否可修改,flase为不可修改，默认值为true
                        });
                    }
                }
            }
        
            this.bInit = true;//被初始化

            /*
                绑定方法,
                @domObj,绑定的dom对象
            */
            this._binding = function(domObj) {//
                if (null != domObj) {
                    var sName = domObj.name || domObj.id;//绑定按照name或id进行匹配

                    if (null != sName && 0 < sName.length) {
                        var theVal = vals[sName];
                        var theDom = doms[sName];

                        if (null != theVal && null != theDom) {    //查看是存在sName的的值和绑定对象
                            var fieldName = "value";    //绑定的dom对象属性名称,此处只实现了value以后可以在本方法中添加一个参数用来表示属性名称

                            theDom.Obj = domObj;        //保存绑定的dom对象引用/指针
                            theDom.bSet = true;        //设置绑定标志
                            theDom.protertyName = fieldName;
                            theDom.Obj[fieldName] = theVal;    //直接赋值

                            Object.defineProperty(this, sName, {
                                get: function() {    //重写读取访问器

                                    var theDom = doms[sName];
                                    var reValue = null;

                                    console.log("get:");
                                    console.log(this);
                                    if(theDom.bSet){
                                        reValue = theDom.Obj[fieldName];//直接读取dom对象的fieldName属性值
                                    }
                                    else{
                                        reValue = vals[sName];        //未绑定使用保存值
                                        console.log(sName + "属性未绑定,使用保存值");
                                    }
                                    return reValue;
                                },
                                set: function(val) {//重写设置访问器
                                    var theDom = doms[sName];

                                    vals[sName] = val;//保存值
                                    console.log("set:");
                                    console.log(this);
                                    if(theDom.bSet){
                                        theDom.Obj[fieldName] = val;//直接设置dom对象的fieldName属性值
                                    }
                                    else{
                                        console.log(sName + "属性未绑定,使用保存值");
                                    }
                                }
                            });
                        }
                    }
                }
            }
        }

        CBinding.prototype.binding = function(domObj) {    //定义绑定原型方法
            this._binding(domObj);//调用定义的方法
        };

        function bindingObj(domObj, dataObj) {    //dom对象和json对象绑定,返回新的绑定对象
            var rObj = null;
            if (null != domObj && null != dataObj) {
                if (null == dataObj.bInit) {
                    rObj = new CBinding(dataObj);
                } else {
                    rObj = dataObj;
                }
                rObj.binding(domObj);
            }

            return rObj;
        }

        function bd() {
            var domName = document.getElementById("name");
            var domAge = document.getElementById("age");

            console.log("原始json对象:");
            console.log(theObj);

            theObj = bindingObj(domName, theObj);    //绑定name,把原来的json替换为CBinding对象
            bindingObj(domAge, theObj);        //绑定age

            console.log("绑定后json对象:");
            console.log(theObj);

            console.log("获取name和age:");
            console.log(theObj.name);
            console.log(theObj.age);

            //开始更改name和age
            console.log("开始更改name和age:");
            theObj.name = "testName";
            theObj.age = 35;

            console.log("获取更改后的name和age:");
            console.log(theObj.name);
            console.log(theObj.age);

            console.log("测试是否能访问到CBinding的private变量vals:");
            console.log(theObj.vals);//测试是否能访问到CBinding的private变量vals
        }

        function setvalue() {

            var domName = document.getElementById("name1");
            var domAge = document.getElementById("age1");

            theObj.name = domName.value;    //测试setter
            theObj.age = domAge.value;    //测试setter
        }

        function getvalue(){
        
            var domName = document.getElementById("name2");
            var domAge = document.getElementById("age2");
    
            domName.value = theObj.name;    //测试getter
            domAge.value = theObj.age;    //测试getter
        }
    </script>
</head>

<body onload="bd()">
    <table>
        <tr>
            <td>姓名</td>
            <td><input id="name" /></td>
        </tr>
        <tr>
            <td>年龄</td>
            <td><input id="age" /></td>
        </tr>
        <tr>
            <td>学号</td>
            <td><input id="student_id" /></td>
        </tr>
        <tr>
            <td>电话号码</td>
            <td><input id="phoneNmb" /></td>
        </tr>
        <tr>
            <td>设置姓名</td>
            <td><input id="name1" /></td>
        </tr>
        <tr>
            <td>设置年龄</td>
            <td><input id="age1" /></td>
        </tr>
        <tr>
            <td colspan="2"><button onclick="setvalue()">设置</button></td>
        </tr>
        <tr>
            <td>读取姓名</td>
            <td><input id="name2" readonly /></td>
        </tr>
        <tr>
            <td>读取年龄</td>
            <td><input id="age2" /></td>
        </tr>
        <tr>
            <td colspan="2"><button onclick="getvalue()">读取</button></td>
        </tr>
    </table>
</body>

</html>

把上面的代码保存为htm文件在浏览器中打开画面：

浏览器控制台打印画面:

下面是json对象没有绑定时在控制台打印出来的内容：

能看到其每个成员的值。

绑定后发现绑定的值(只绑定了name和age)看不见了。

获取name和age控制台打印：

 

前端设置name和age被绑定的两个文本框内容也跟着修改：

 

点击读取按钮，能获取到name和age

---

 

以上是我使用ECAMScript5 特性get/set访问器实现的json数据绑定到dom对象一个实现。还有待于改进。

当然了还是使用AngularJS来的高效，毕竟那么多年了，AngularJS已经很成熟了，大家都在用。我在这里只是从另一个角度来思考一下能否实现json和dom绑定的解决思路。

还希望技术大牛看到后多提宝贵意见和建议。