Unity应用架构设计(1)—— MVVM 模式的设计和实施(Part 1)

初识 MVVM

谈起 MVVM 设计模式，可能第一映像你会想到 WPF/Sliverlight，他们提供了的数据绑定（Data Binding），命令（Command）等功能，这让 MVVM 模式获得很好的实现。MVVM 设计模式顾名思义，经过分离关注点，各司其职。经过 Data Binding 可达到数据的双向绑定，而命令 Command 更是将传统的 Code Behind 事件独立到 ViewModel 中。

MVVM 设计模式在 WPF 中的实现

在WPF中，你会像以下这样去定义一个专门管理视图 View 的 ViewModel：

public class SongViewModel : INotifyPropertyChanged
{
    #region Construction
    /// Constructs the default instance of a SongViewModel
    public SongViewModel() {
        _song = new Song { ArtistName = "Unknown", SongTitle = "Unknown" };
    }
    #endregion

    #region Members
    Song _song;
    #endregion

    #region Properties
    public Song Song
    {
        get
        {
            return _song;
        }
        set
        {
            _song = value;
        }
    }

    public string ArtistName
    {
        get { return Song.ArtistName; }
        set
        {
            if (Song.ArtistName != value)
            {
                Song.ArtistName = value;
                RaisePropertyChanged("ArtistName");
            }
        }
    }
    #endregion

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    #endregion

    #region Methods

    private void RaisePropertyChanged(string propertyName) {
        // take a copy to prevent thread issues
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    #endregion
}复制代码

同时在 View 中你须要使用 Binding 将 ViewModel 的属性绑定和控件的内容相绑定：

<TextBox Content="{Binding ArtistName}" />复制代码

值得注意的是，要实现 View 和 ViewModel 双向绑定，咱们的 ViewModel 必须实现 INotifyPropertyChanged 接口，因为 WPF Framework 让控件监听了 PropertyChanged 事件，当属性值发生时，触发 PropertyChanged 事件，因此控件就能自动获取到最新的值。反之，当控件的值发生改变时，例如 TextBox 触发 OnTextChanged 事件，自动将最新的值同步到 ViewModel 相应的属性中。

MVP & MVVM

Unity与 WPF/Sliverlight 不一样，它没有提供相似的 Data Binding，也没有像 XAML 同样的视图语法，那么怎样才能在 Unity 3D 中去实现 MVVM 呢？

在 ASP.NET WebForm 时代，那时尚未 ASP.Net MVC 。咱们为了让 UI 表现层分离，经常会使用 MVP 设计模式，如下是我在几年前画的一张老图：

MVP 设计模式核心就是，经过定义一个 View，将 UI 抽象出来，它没必要关心数据的具体来源，也没必要关心点击按钮以后业务逻辑的实现，它只关注 UI 交互。这就是典型的分离关注点。

其实这就是我今天想讲的主题，既然 Unity 3D 没有提供数据绑定，那么咱们也能够参考以前 MVP 的设计理念：

将 UI 抽象成独立的一个个 View，将面向 Component 开发转换为面向 View 开发，每个 View 都有独立的 ViewModel 进行管理，以下所示：

因为 Unity没有 XAML,也没有 Data Binding 技术，故只能在抽象出来的 View 中去实现相似于 WPF 的 Data Binding，Converter，Command 等。

值得注意的是，MVP 设计模式中数据的绑定是经过将具体的 View 实例传递到 Presenter 中完成的，而 MVVM 是以数据改变引起的事件中完成数据更新的。

MVVM 设计模式在 Unity 中的设计与实现

再回顾一下 WPF 中 ViewModel 的写法。 ViewModel 提供了 View 须要的数据，而且 ViewModel 实现 INotifyPropertyChanged 接口 ，当数据更改时，触发了 PropertyChanged 事件，因为控件也监听了此事件，在事件的响应函数里实现数据的更新。

了解了以后，咱们要考虑怎样在 Unity中去实现它。假设咱们须要完成以下的一个功能，而且是使用 MVVM 设计思想实现：

首先，咱们要定义一个 View，这个 View 是对 UI 元素的一个抽象，到底要抽象哪些 UI 元素呢？就这个例子而言，InputField，Label，Slider，Toggle，Button 是须要被抽象出来的。

public class SetupView
{
    public InputField nameInputField;
    public Text nameMessageText;
    public InputField jobInputField;
    public Text jobMessageText;

    public InputField atkInputField;
    public Text atkMessageText;

    public Slider successRateSlider;
    public Text successRateMessageText;

    public Toggle joinToggle;
    public Button joinInButton;
    public Button waitButton;
}复制代码

能够看到，这是一个很简单的 View。接着咱们须要定义一个专门用来管理 View 的 ViewModel，它以属性的形式提供数据，以方法的形式提供行为。

值得注意的是，ViewModel 中的属性不是特殊的属性，它必须具有当数据更改时通知订阅者这个功能，怎么通知订阅者？固然是事件，故我把此属性称为 BindableProperty 属性。

public class BindableProperty<T> {
    public delegate void ValueChangedHandler(T oldValue, T newValue);

    public ValueChangedHandler OnValueChanged;

    private T _value;
    public T Value
    {
        get
        {
            return _value;
        }
        set
        {
            if (!object.Equals(_value, value))
            {
                T old = _value;
                _value = value;
                ValueChanged(old, _value);
            }
        }
    }

    private void ValueChanged(T oldValue, T newValue) {
        if (OnValueChanged != null)
        {
            OnValueChanged(oldValue, newValue);
        }
    }

    public override string ToString() {
        return (Value != null ? Value.ToString() : "null");
    }
}复制代码

接着，咱们再定义一个 ViewModel，它为 View 提供了数据和行为:

public class SetupViewModel : ViewModel
{
    public BindableProperty<string> Name = new BindableProperty<string>();
    public BindableProperty<string> Job = new BindableProperty<string>();
    public BindableProperty<int> ATK = new BindableProperty<int>();
    public BindableProperty<float> SuccessRate = new BindableProperty<float>();
    public BindableProperty<State> State = new BindableProperty<State>();
}复制代码

有了 View 与 ViewModel 以后，咱们须要考虑：

• 怎样为 View 指定一个 ViewModel
• 当 ViewModel 属性值改变时，怎样订阅触发的 OnValueChanged 事件，从而达到 View 的数据更新

基于以上两点，咱们能够定义一个通用的 View，将它命名为 UnityGuiView ：

public interface IView
{
    ViewModel BindingContext { get; set; }
}复制代码

public class UnityGuiView:MonoBehaviour,IView
{
    public readonly BindableProperty<ViewModel> ViewModelProperty = new BindableProperty<ViewModel>();
    public ViewModel BindingContext
    {
        get { return ViewModelProperty.Value; }
        set { ViewModelProperty.Value = value; }
    }

    protected virtual void OnBindingContextChanged(ViewModel oldViewModel, ViewModel newViewModel)
    {
    }

    public UnityGuiView()
    {
        this.ViewModelProperty.OnValueChanged += OnBindingContextChanged;
    }

}复制代码

• 上述代码中，提供一个 BindingContext 上下文属性，相似于 WPF 中的 DataContext。 BindingContext 属性咱们不能将它视为一个简单的属性 ，它是上述定义过的 BindableProperty 类型属性。那么当为一个 View 的 BindingContext 指定 ViewModel 实例时，初始化时，势必会触发 OnValueChanged 事件。
• 在响应函数 OnBindingContextChanged 中 ，咱们能够在此对 ViewModel 中事件进行监听，从而达到数据的更新。固然这是一个虚方法，你须要在子类 View 中 Override。

因此修改定义过的 SetupView，继承自 UnityGuiView:

public class SetupView:UnityGuiView
{
   ...省略部分代码

   public SetupViewModel ViewModel { get { return (SetupViewModel)BindingContext; } }

   protected override void OnBindingContextChanged(ViewModel oldViewModel, ViewModel newViewModel) {

        base.OnBindingContextChanged(oldViewModel, newViewModel);

        SetupViewModel oldVm = oldViewModel as SetupViewModel;
        if (oldVm != null)
        {
            oldVm.Name.OnValueChanged -= NameValueChanged;
            ...
        }
        if (ViewModel!=null)
        {
            ViewModel.Name.OnValueChanged += NameValueChanged;
            ...
        }
        UpdateControls();
    }

    private void NameValueChanged(string oldvalue, string newvalue) {
        nameMessageText.text = newvalue.ToString();
    }
}复制代码

因为子类 Override 了 OnBindingContextChanged 方法，故它会对 ViewModel 的属性值改变事件进行监听，当触发时，将最新的数据同步到 UI 中。

同理，考虑到双向绑定，你也能够在 View 中定义一个 OnTextBoxValueChanged 响应函数，当文本框中的数据改变时，在响应函数中就数据同步到 ViewModel 中。在这我就不累述了。

最后，在 Unity 3D 中将 SetupView 附加到 相应的 GameObject上：

最后在摄像机上加一段脚本，很简单，传入 SetupView 对象并为其绑定 ViewModel：

public SetupView setupView;
void Start() {
    //绑定上下文
    setupView.BindingContext=new SetupViewModel();
}复制代码

小结

这是一个很是简单的 MVVM 框架，也证实了在 Unity中实现 MVVM 设计模式的可能性。
源代码托管在Github上，点击此了解

欢迎关注个人公众号：