devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

c# 模仿 vue 实现 winform 的数据模型双向绑定_c# 像vue绑定

作者：Li_阴宅 | 2024-06-22 09:08:29

赞

踩

c# 像vue绑定

前前前段时间面试遭拒，当时面试关问自己的一些东西确实不懂，其中就包括vue（其实有看过相关文章和文档，秉着 如果只是用轮子的话，需要时间和文档就够了，事实上只是使用的话，按规范来就行了）。

但是自己怎么能轻易停留在用呢，于是在花了点时间，直接搜索vue绑定原理，详细看了两篇文章 

http://m.jb51.net/article/107927.htm

http://www.cnblogs.com/likeFlyingFish/p/6744212.html 

其实就是观察者的设计模式，关键在于事件的监听。而 js 有个 defineProperty 修改属相的get set 方法，使其在 set 数据的时候判断是否有变化后进行通知，也就是执行一边对该属性订阅的方法。
再将我们平时对dom操作的方法进行封装注册到某个属性的订阅列表，即可实现数据视图绑定。其实不管怎么做，最终也还是要操作dom的，只是人家封装好了的而已。

而后面突然有个想法，我能不能模仿 vue 做个winform 的双向绑定呢？
尽管窗口开发 双向绑定已经有成熟的 wpf 了， 而 winform 也有 DataBindings 绑定数据（这个在后面自己的测试中发现没能在变化中通知，应该还要进一步的封装），但是就想把 vue的方法用c#实现一下。

按照 js 那一套，要有个 Observe 来重写对象属性的 get;set;,还要有个 Dep 来保存订阅者，还要有个 Watcher 来监听属性。

但是 c# 没法代码批量改 getter setter 这两个方法（试过反射不出这两个方法），那只需要实现 Dep 和 Watcher 。

Watcher

对象的属性通过Watcher 来监听，不同控件绑定同一个 属性的话，就是不同的Watcher 。为统一通知（观察者调用），我们声明一个接口： 

  1. namespace Mvvm
  2. {
  3.     /// <summary>
  4.     /// 统一监听接口 
  5.     /// </summary>
  6.     public interface IWatcher
  7.     {
  8.         void Update();
  9.     }
  10. }

然后实现这个接口（详细看注释） 

  1. namespace Mvvm
  2. {
  3.     /// <summary>
  4.     /// 监听者
  5.     /// </summary>
  6.     public class Watcher : IWatcher
  7.     {
  8.         /// <summary>
  9.         /// 实体类型
  10.         /// </summary>
  11.         private Type type = null;
  12.         /// <summary>
  13.         /// 属性变化触发的委托
  14.         /// </summary>
  15.         private Action<object> Action = null;
  16.         /// <summary>
  17.         /// 属性名称
  18.         /// </summary>
  19.         private string propertyName = null;
  20.         /// <summary>
  21.         /// 父控件
  22.         /// </summary>
  23.         private Control ParentControl = null;
  24.         /// <summary>
  25.         /// 实体
  26.         /// </summary>
  27.         private object model = null;
  28.         /// <summary>
  29.         /// 初始化监听者
  30.         /// </summary>
  31.         /// <param name="ParentControl">父控件</param>
  32.         /// <param name="type">实体类型</param>
  33.         /// <param name="model">实体</param>
  34.         /// <param name="propertyName">要监听的属性名称</param>
  35.         /// <param name="action">属性变化触发的委托</param>
  36.         public Watcher(Control ParentControl, Type type, object model, string propertyName, Action<object> action)
  37.         {
  38.             this.type = type;
  39.             this.Action = action;
  40.             this.propertyName = propertyName;
  41.             this.ParentControl = ParentControl;
  42.             this.model = model;
  43.             this.AddToDep();
  44.         }
  45.         /// <summary>
  46.         /// 添加监听者到属性的订阅者列表（Dep）
  47.         /// </summary>
  48.         private void AddToDep()
  49.         {
  50.             PropertyInfo property = this.type.GetProperty(this.propertyName);
  51.             if (property == null) return;
  52.             Dep.Target = this;
  53.             object value = property.GetValue(this.model, null);
  54.             Dep.Target = null;
  55.         }
  56.         /// <summary>
  57.         /// 更新数据（监听触发的方法）
  58.         /// </summary>
  59.         public void Update()
  60.         {
  61.             this.ParentControl.Invoke(new Action(delegate
  62.             {
  63.                 this.Action(this.model);
  64.             }));
  65.         }
  66.     }
  67. }
这里的 ParentControl 指的是 From 或者是 包含有子空间的其它容器，绑定的话只会绑定其下的子控件，同时，异步更新UI时也是由该控件的委托来完成.

Dep

Dep 主要用来保存某个属性的订阅者，以便属性值变更时，通知其订阅者。因为 c#没法像js 一样可以用代码批量重写get set，所以为了简化属性get set 的写法，将属相的值也存放到 Dep 里（每个属性对应单独的 Dep）,通过Dep 中的Get Set 方法给属性操作。

 
  1. namespace Mvvm
  2. {
  3.     public class Dep
  4.     {
  5.         /// <summary>
  6.         /// 全局变量，用户将指定属性的订阅者放入通知列表
  7.         /// </summary>
  8.         public static IWatcher Target = null;
  9.         /// <summary>
  10.         /// 保存属性的值，属性的get set将是对该值的操作
  11.         /// </summary>
  12.         private object oValue;
  13.         /// <summary>
  14.         /// 订阅者列表
  15.         /// </summary>
  16.         private List<IWatcher> lsWatcher = null;
  17.  
  18.  
  19.  
  20.         public Dep()
  21.         {
  22.             this.lsWatcher = new List<IWatcher>();
  23.         }
  24.         /// <summary>
  25.         /// 添加订阅者
  26.         /// </summary>
  27.         /// <param name="watcher"></param>
  28.         private void PushWatcher(IWatcher watcher)
  29.         {
  30.             this.lsWatcher.Add(watcher);
  31.         }
  32.         /// <summary>
  33.         /// 通知
  34.         /// </summary>
  35.         public void Notify()
  36.         {
  37.             List<IWatcher> watchers = this.lsWatcher;
  38.             watchers.ForEach(watcher =>
  39.             {
  40.                 watcher.Update();
  41.             });
  42.         }
  43.         /// <summary>
  44.         /// 返回属性的值
  45.         /// </summary>
  46.         /// <typeparam name="T"></typeparam>
  47.         /// <returns></returns>
  48.         public T Get<T>()
  49.         {
  50.             // Dep.Target 不为空时，标识指向这个属性的一个订阅者，需要将它加入到订阅列表
  51.             bool flag = Dep.Target != null;
  52.             if (flag)
  53.             {
  54.                 this.PushWatcher(Dep.Target);
  55.             }
  56.             return this.oValue==null?default(T): (T)this.oValue;
  57.         }
  58.         /// <summary>
  59.         /// 设置属性值
  60.         /// </summary>
  61.         /// <param name="oValue"></param>
  62.         public void Set(object oValue)
  63.         {
  64.             bool flag = this.oValue == null || !this.oValue.Equals(oValue);
  65.             if (flag)
  66.             {
  67.                 this.oValue = oValue;
  68.                 this.Notify();
  69.             }
  70.         }
  71.         /// <summary>
  72.         /// 初始化队列，分配给每个属性
  73.         /// </summary>
  74.         /// <param name="count"></param>
  75.         /// <returns></returns>
  76.         public static List<Dep> InitDeps(int count)
  77.         {
  78.             if (count < 1) throw new Exception("wrong number! count must biger than 0");
  79.             var lsDep = new List<Dep>();
  80.             for(var i=0;i<count;i++)
  81.             {
  82.                 lsDep.Add(new Dep());
  83.             }
  84.             return lsDep;
  85.         }
  86.     }
  87.  
  88. }

到目前为止，已经能手动新建 Watcher来实现 属相变化 并触发事件，但是，还要手动写触发事件，这怎么能忍。于是进行了一层封装，让绑定自动化，默认对几个变化事件做了绑定。

ViewBind

  1. namespace Mvvm
  2. {
  3.     public class ViewBind
  4.     {
  5.         /// <summary>
  6.         /// 默认绑定事件
  7.         /// </summary>
  8.         private string Events = "CollectionChange|SelectedValueChanged|ValueChanged|TextChanged";
  9.         //private string Perpertis = "DataSource|Value|Text";
  10.  
  11.         /// <summary>
  12.         /// 绑定视图
  13.         /// </summary>
  14.         /// <param name="ParentControl">父控件</param>
  15.         /// <param name="model">模型（对象）</param>
  16.         public ViewBind(Control ParentControl, object model)
  17.         {
  18.             this.BindingParentControl(ParentControl, model);
  19.         }
  20.         /// <summary>
  21.         /// 绑定控件
  22.         /// </summary>
  23.         /// <param name="ParentControl">父控件</param>
  24.         /// <param name="model">实体</param>
  25.         private void BindingParentControl(Control ParentControl, object model)
  26.         {
  27.             this.BindControl(ParentControl, model, ParentControl.Controls);
  28.         }
  29.         /// <summary>
  30.         /// 绑定控件
  31.         /// </summary>
  32.         /// <param name="ParentControl">父控件</param>
  33.         /// <param name="model">实体</param>
  34.         /// <param name="Controls">子控件列表</param>
  35.         private void BindControl(Control ParentControl, object model, Control.ControlCollection Controls)
  36.         {
  37.             foreach (Control control in Controls)
  38.             {
  39.                 var tag = control.Tag;
  40.                 if (tag == null) continue;
  41.                 foreach (var tagInfo in tag.ToString().Split('|'))
  42.                 {
  43.                     var tagInfoArr = tagInfo.Split('-');
  44.                     if (tagInfoArr[0].Equals("data") && tagInfoArr.Length == 3)
  45.                     {
  46.                         //数目绑定
  47.                         string propertyName = tagInfoArr[tagInfoArr.Length - 1];
  48.                         this.BindingProperty(ParentControl, control, model, propertyName, tagInfoArr[1]);
  49.                         this.BindListener(control, model, propertyName, tagInfoArr[1]);
  50.                     }
  51.                     else if (tagInfoArr[0].Equals("ev") && tagInfoArr.Length == 3)
  52.                     {
  53.                         //事件绑定
  54.                         BindEvent(ParentControl, control, model, tagInfoArr[1], tagInfoArr[2]);
  55.                     }
  56.                     else
  57.                     {
  58.                         if (control.Controls.Count > 0)
  59.                         {
  60.                             this.BindControl(ParentControl, model, control.Controls);
  61.                         }
  62.                     }
  63.                 }
  64.  
  65.             }
  66.         }
  67.         /// <summary>
  68.         /// 绑定事件
  69.         /// </summary>
  70.         /// <param name="ParentControl">父控件</param>
  71.         /// <param name="control">要绑定事件的控件</param>
  72.         /// <param name="model">实体</param>
  73.         /// <param name="eventName">事件名称</param>
  74.         /// <param name="methodName">绑定到的方法</param>
  75.         private void BindEvent(Control ParentControl, Control control, object model, string eventName, string methodName)
  76.         {
  77.             var Event = control.GetType().GetEvent(eventName);
  78.             if (Event != null)
  79.             {
  80.                 var methodInfo = model.GetType().GetMethod(methodName);
  81.                 if (methodInfo != null)
  82.                 {
  83.                     Event.AddEventHandler(control, new EventHandler((s, e) =>
  84.                     {
  85.                         ParentControl.Invoke(new Action(() =>
  86.                         {
  87.                             switch (methodInfo.GetParameters().Count())
  88.                             {
  89.                                 case 0: methodInfo.Invoke(model, null); break;
  90.                                 case 1: methodInfo.Invoke(model, new object[] { new { s = s, e = e } }); break;
  91.                                 case 2: methodInfo.Invoke(model, new object[] { s, e }); break;
  92.                                 default: break;
  93.                             }
  94.                         }));
  95.                     }));
  96.                 }
  97.             }
  98.         }
  99.         /// <summary>
  100.         /// 添加监听
  101.         /// </summary>
  102.         /// <param name="control">要监听的控件</param>
  103.         /// <param name="model">实体</param>
  104.         /// <param name="mPropertyName">变化的实体属性</param>
  105.         /// <param name="controlPropertyName">对应变化的控件属性</param>
  106.         private void BindListener(Control control, object model, string mPropertyName, string controlPropertyName)
  107.         {
  108.             var property = model.GetType().GetProperty(mPropertyName);
  109.  
  110.             var events = this.Events.Split('|');
  111.             foreach (var ev in events)
  112.             {
  113.                 var Event = control.GetType().GetEvent(ev);
  114.                 if (Event != null)
  115.                 {
  116.                     Event.AddEventHandler(control, new EventHandler((s, e) =>
  117.                     {
  118.                         try
  119.                         {
  120.                             var controlProperty = control.GetType().GetProperty(controlPropertyName);
  121.                             if (controlProperty != null)
  122.                             {
  123.                                 property.SetValue(model, Convert.ChangeType(controlProperty.GetValue(control, null), property.PropertyType), null);
  124.  
  125.                             }
  126.                         }
  127.                         catch (Exception ex)
  128.                         {
  129.                             //TPDO
  130.                         }
  131.                     }));
  132.                 }
  133.             }
  134.         }
  135.         /// <summary>
  136.         /// 绑定属性
  137.         /// </summary>
  138.         /// <param name="ParentControl">父控件</param>
  139.         /// <param name="control">绑定属性的控件</param>
  140.         /// <param name="model">实体</param>
  141.         /// <param name="mPropertyName">绑定的实体属性名称</param>
  142.         /// <param name="controlPropertyName">绑定到的控件的属性名称</param>
  143.         private void BindingProperty(Control ParentControl, Control control, object model, string mPropertyName, string controlPropertyName)
  144.         {
  145.  
  146.             Action<object> action = info =>
  147.             {
  148.                 try
  149.                 {
  150.                     var controlType = control.GetType();
  151.                     var mType = info.GetType().GetProperty(mPropertyName);
  152.                     var controlProperty = controlType.GetProperty(controlPropertyName);
  153.                     if (controlProperty != null)
  154.                     {
  155.                         controlProperty.SetValue(control, Convert.ChangeType(mType.GetValue(info, null), controlProperty.PropertyType), null);
  156.                     }
  157.  
  158.                 }
  159.                 catch (Exception ex)
  160.                 {
  161.                     //TODO
  162.                 }
  163.             };
  164.             //添加到监听
  165.             new Watcher(ParentControl, model.GetType(), model, mPropertyName, action);
  166.             //初始化数据（将实体数据赋给控件属性）
  167.             action(model);
  168.         }
  169.     }
  170. }


这样就行了么？

当然不行，我们还要给对象的属性手动改get set 呢（wpf也是要手动给需要绑定通知变更的属性改get set），前面Dep我们集成了 Get  Set  ，那这列给模型属性改 get set 就简单多了。

  1.  public class TestModel
  2.         {
  3.             List<Dep> dep = Dep.InitDeps(3);
  4.             public int Value { get=>dep[0].Get<int>(); set=>dep[0].Set(value); }
  5.             public string Text { get=>dep[1].Get<string>(); set=>dep[1].Set(value); }
  6.             public string BtnName { get=>dep[2].Get<string>(); set=>dep[2].Set(value); }
  7.  
  8.             public void BtnClick(object o)
  9.             {
  10.                 this.BtnName = string.Format("绑定事件{0}", DateTime.Now.Millisecond);
  11.             }
  12.         }

这就完了么？ NO

就像 vue ,要正常解析，要按 它的规则去在代码中加标识 什么 v-if  v-model 等等，那我们这里也有个规则。说到这个规则，winform控件里有个 Tag 属性，是给程序员做拓展用的，一般很少用，而我们的 ViewBind解析代码里面是按照一定规则解析的。

我们的规则是这样的 

绑定属性： data-控件要绑定的属性名-模型对应的属性名  ，比如给 控件的 Text 属性绑定 模型对象 的 Name 属性 则 data-Text-Name.

绑定事件：ev-控件的事件名-模型中的方法名   ，如控件的 Click 事件 绑定模型中 Change 方法 则 ev-Click-Change

一个控件绑定多个属性或者事件用|隔开 ，如 data-Text-Name|ev-Click-Change


到这里准备工作就做完了。

What？？？准备工作那么多？

不不不，前面的 Dep ,Watcher 等只是封装好了的，我们要做的就是 

1.更改我们 模型属性的 get set 方法，看代码很清楚，很容易，只要创建多个 Dep,然后给每个 属性改一下。

2.按照规则给控件绑定数据或者事件。

3.最后，在窗口初始化时加上创建绑定对象。

  1. private void Form1_Load(object sender, EventArgs e)
  2.         {
  3.             var model = new TestModel { Value = 50, BtnName="绑定事件" };
  4.             new ViewBind(this, model);
  5.         }



设定好控件的 Tag,我们在窗体初始化的时候，是需要简单的一行代码就可以了。


到这里就实现了。看效果（这里 输入框 和 label 以及 滚动条 绑定的是 Value 属性，而 按钮绑定 Text 属性 和 Click 事件）





本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号