用Visual C#實現MVC模式的簡要方法

來源:互聯網
上載者:User
visual   在我們的開發項目中使用MVC(Model-View-Control)模式的益處是,可以完全降低業務層和應用展示層的相互影響。此外,我們會有完全獨立的對象來動作表示層。MVC在我們項目中提供的這種對象和層之間的獨立,將使我們的維護變得更簡單使我們的代碼重用變得很容易(下面你將看到)。

  作為一般的習慣,我們知道我們希望保持最低的對象間的依賴,這樣變化能夠很容易的得到滿足,而且我們可以重複使用我們辛辛苦苦寫的代碼。為了達到這個目的我們將遵循一般的原則“對介面編成,而不是對類”來使用MVC模式。

  我們的使命,如果我們選擇接受它...

  我們被委任構建一個ACME 2000 Sports Car項目,我們的任務是做一個簡單的Windows畫面來顯示汽車的方向和速度,使終端使用者能夠改變方向,加速或是減速。當然將會有範圍的擴充。

  在ACME已經有了傳言,如果我們的項目成功,我們最終還要為ACME 2 Pickup Truck 和ACME 1 Tricycle開發一個相似的介面。作為開發人員,我們也知道ACME管理團隊最終將問“這樣是很棒的,我們能夠在我們的intranet上看到它?”所有的這些浮現在腦海中,我們想交付一個產品,使它能夠容易的升級以便能夠保證將來我們能夠有飯吃。

  所以,同時我們決定“這是使用MVC的一個絕好情形”

   我們的構架概要

  現在我們知道我們要使用MVC,我們需要指出它的本質。通過我們的實驗得出MVC的三個部分:Model,Control和View。在我們的系統中,Model就是我們的汽車,View就是我們的畫面,Control將這兩個部分聯絡起來。

  為了改變Model(我們的ACME 2000 sports car),我們需要使用Control。我們的Control將會產生給Model(我們的ACME 2000 sports car)的請求,和更新View,View就是我們的畫面(UI)。

  這看起來很簡單,但是這裡產生了第一個要解決的問題:當終端使用者想做一個對ACME 2000 sports car一個改變將會發生什麼,比如說加速或是轉向?他們將通過View(our windows form)用Control來提出一個變化的申請。

  現在我們就剩下一個未解決問題了。如果View沒有必要的資訊來顯示Model的狀態怎麼辦?我們需要再在我們的圖中加入一個箭頭:View將能申請Model的狀態以便得到它要顯示的相關狀態資訊。

  最後,我們的終端使用者(司機)將會和我們的ACME Vehicle Control系統通過View來互動。如果他們想發出一個改變系統的申請,比如提高一點加速度,申請將會從View開始發出由Control處理。

  Control將會向Model申請改變並將必要的變化反映在View上。比如,如果一個蠻橫的司機對ACME 2000 Sports Car做了一個"floor it"申請,而現在行駛的太快不能轉向,那麼Control將會拒絕這個申請並在View中通知,這樣就防止了在交通擁擠是發生悲慘的連環相撞。

  Model (the ACME 2000 Sports Car) 將通知View 它的速度已經提高,而View也將做適當的更新。

  綜上,這就是我們將構建的概要:

   開始

  作為總是想的遠一點的開發人員,我們想讓我們的系統有一個長久並且良好的生命週期。這就是說能夠進可能的準備好滿足ACME的很多變化。為了做到這一點,我們知道要遵循兩條原則...“保證你的類低耦合”,要達到這個目標,還要“對介面編程”。

  所以我們要做三個介面(正如你所猜測,一個Model介面,一個View介面,一個Control介面)。

  經過很多調查研究,和與ACME人的費力諮詢,我們得到了很多有關詳細設計的資訊。我們想確定我們可以設定的最大速度在前進,後退和轉彎中。我們也需要能夠加速,減速,左轉和右轉。我們的儀錶盤必須顯示當前的速度和方向。

  實現所有這些需求是非常苛刻的,但是我們確信我們能夠做到...

  首先,我們考慮一下基本的項目。我們需要一些東西來表示方向和轉動請求。我們做了兩個枚舉類型:AbsoluteDirection 和 RelativeDirection。

public enum AbsoluteDirection
{
 North=0, East, South, West
}
public enum RelativeDirection
{
 Right, Left, Back
}


  下面來解決Control介面。我們知道Control需要將請求傳遞給Model,這些請求包括:Accelerate, Decelerate, 和 Turn。我們建立一個IVehicleControl介面,並加入適當的方法。

public interface IVehicleControl
{
 void Accelerate(int paramAmount);
 void Decelerate(int paramAmount);
 void Turn(RelativeDirection paramDirection);
}


  現在我們來整理Model介面。我們需要知道汽車的名字,速度,最大速度,最大倒退速度,最大轉彎速度和方向。我們也需要加速,減速,轉彎的函數。

public interface IVehicleModel
{
 string Name{ get; set;}
 int Speed{ get; set;}
 int MaxSpeed{ get;}
 int MaxTurnSpeed{ get;}
 int MaxReverseSpeed { get;}
 AbsoluteDirection Direction{get; set;}
 void Turn(RelativeDirection paramDirection);
 void Accelerate(int paramAmount);
 void Decelerate(int paramAmount);
}


  最後,我們來整理View介面。我們知道View需要暴露出Control的一些機能,比如允許或禁止加速,減速和轉彎申請。

public interface IVehicleView
{
 void DisableAcceleration();
 void EnableAcceleration();
 void DisableDeceleration();
 void EnableDeceleration();
 void DisableTurning();
 void EnableTurning();
 }


  現在我們需要做一些微調使我們的這些介面能夠互相作用。首先,任何一個Control都需要知道它的View和Model,所以在我們的IvehicleControl介面中加入兩個函數:"SetModel" 和"SetView":

public interface IVehicleControl
{
 void RequestAccelerate(int paramAmount);
 void RequestDecelerate(int paramAmount);
 void RequestTurn(RelativeDirection paramDirection);
 void SetModel(IVehicleModel paramAuto);
 void SetView(IVehicleView paramView);
}


  下一個部分比較巧妙。我們希望View知道Model中的變化。為了達到這個目的,我們使用觀察者模式。

  為了實施觀察者模式,我們需要將下面的函數加入到Model(被View觀察):AddObserver, RemoveObserver, 和 NotifyObservers。

public interface IVehicleModel
{
 string Name{ get; set;}
 int Speed{ get; set;}
 int MaxSpeed{ get;}
 int MaxTurnSpeed{ get;}
 int MaxReverseSpeed { get;}
 AbsoluteDirection Direction{get; set;}
 void Turn(RelativeDirection paramDirection);
 void Accelerate(int paramAmount);
 void Decelerate(int paramAmount);
 void AddObserver(IVehicleView paramView);
 void RemoveObserver(IVehicleView paramView);
 void NotifyObservers();
}


  ...並且將下面的函數加入到View(被Model觀察)中。這樣做的目的是Model會有一個View的引用。當Model發生變化時,將會調用NotifyObservers()方法,傳入一個對其自身的引用並調用Update()通知View這個變化。

public class IVehicleView
{
 void DisableAcceleration();
 void EnableAcceleration();
 void DisableDeceleration();
 void EnableDeceleration();
 void DisableTurning();
 void EnableTurning();
 void Update(IVehicleModel paramModel);
}


  這樣我們就將我們的介面聯絡起來了。在下面的代碼中我們只需要引用我們這些介面,這樣就保證了我們代碼的低耦合。任何顯示汽車狀態的使用者介面都需要實現IVehicleView,我們所有的ACME都需要實現IVehicleModel,並且我們需要為我們的ACME汽車製作Controls,這些Control將實現IVehicleControl介面。

   下一步...在common中都需要什麼

  我們知道所有的汽車都做相同的動作,所以我們接下來做一個基於“骨架”的共有的代碼來處理這些操作。這是一個抽象類別,因為我們不希望任何人在“骨架”上開車(抽象類別是不能被執行個體化的)。我們稱其為Automobile。我們將用一個ArrayList (from System.Collections)來保持跟蹤所有感興趣的Views(記住觀察者模式了嗎?)。我們也可以用老式的數組來記錄對IVehicleView的引用,但是現在我們已經很累了想快點結束這篇文章。如果你感興趣,看一下在觀察者模式中AddObserver, RemoveObserver, 和NotifyObservers,這些函數是怎樣和IVehicleView互相作用的。任何時間當有速度或方向變化時,Automobile通知所有的IVehicleViews。

public abstract class Automobile: IVehicleModel
{
 "Declarations "#region "Declarations "
 private ArrayList aList = new ArrayList();
 private int mintSpeed = 0;
 private int mintMaxSpeed = 0;
 private int mintMaxTurnSpeed = 0;
 private int mintMaxReverseSpeed = 0;
 private AbsoluteDirection mDirection = AbsoluteDirection.North;
 private string mstrName = "";
 #endregion
 "Constructor"#region "Constructor"
 public Automobile(int paramMaxSpeed, int paramMaxTurnSpeed, int paramMaxReverseSpeed, string paramName)
 {
  this.mintMaxSpeed = paramMaxSpeed;
  this.mintMaxTurnSpeed = paramMaxTurnSpeed;
  this.mintMaxReverseSpeed = paramMaxReverseSpeed;
  this.mstrName = paramName;
 }
 #endregion
 "IVehicleModel Members"#region "IVehicleModel Members"
 public void AddObserver(IVehicleView paramView)
 {
  aList.Add(paramView);
 }
 public void RemoveObserver(IVehicleView paramView)
 {
  aList.Remove(paramView);
 }
 public void NotifyObservers()
 {
  foreach(IVehicleView view in aList)
  {
   view.Update(this);
  }
 }
 public string Name
 {
  get
  {
   return this.mstrName;
  }
  set
  {
   this.mstrName = value;
  }
 }
 public int Speed
 {
  get
  {
   return this.mintSpeed;
  }
 }
 public int MaxSpeed
 {
  get
  {
   return this.mintMaxSpeed;
  }
 }
 public int MaxTurnSpeed
 {
  get
  {
   return this.mintMaxTurnSpeed;
  }
 }
 public int MaxReverseSpeed
 {
  get
  {
   return this.mintMaxReverseSpeed;
  }
 }
 public AbsoluteDirection Direction
 {
  get
  {
   return this.mDirection;
  }
 }
 public void Turn(RelativeDirection paramDirection)
 {
  AbsoluteDirection newDirection;
  switch(paramDirection)
  {
   case RelativeDirection.Right:
    newDirection = (AbsoluteDirection)((int)(this.mDirection + 1) %4);
    break;
   case RelativeDirection.Left:
    newDirection = (AbsoluteDirection)((int)(this.mDirection + 3) %4);
    break;
   case RelativeDirection.Back:
    newDirection = (AbsoluteDirection)((int)(this.mDirection + 2) %4);
    break;
   default:
    newDirection = AbsoluteDirection.North;
    break;
  }
  this.mDirection = newDirection;
  this.NotifyObservers();
 }
 public void Accelerate(int paramAmount)
 {
  this.mintSpeed += paramAmount;
  if(mintSpeed >= this.mintMaxSpeed) mintSpeed = mintMaxSpeed;
  this.NotifyObservers();
 }
 public void Decelerate(int paramAmount)
 {
  this.mintSpeed -= paramAmount;
  if(mintSpeed <= this.mintMaxReverseSpeed) mintSpeed = mintMaxReverseSpeed;
  this.NotifyObservers();
 }
 #endregion
}


  現在我們的"ACME Framework"已經做好了,我們只需要設立有形的類和介面。首先讓我們看看最後兩個類:Control 和 Model...

  這裡我們有形的AutomobileControl實現IVehicleControl介面。我們的AutomobileControl也將設定View來依賴Model 的狀態(當有向Model的申請時檢測SetView方法)。

  注意,我們只是有對IVehicleModel的引用(而不是抽象類別Automobile )和對IVehicleView的引用(而不是具體的View),這樣保證對象間的低耦合。

public class AutomobileControl: IVehicleControl
{
 private IVehicleModel Model;
 private IVehicleView View;
 public AutomobileControl(IVehicleModel paramModel, IVehicleView paramView)
 {
  this.Model = paramModel;
  this.View = paramView;
 }
 public AutomobileControl()
 {}
 IVehicleControl Members#region IVehicleControl Members
 public void SetModel(IVehicleModel paramModel)
 {
  this.Model = paramModel;
 }
 public void SetView(IVehicleView paramView)
 {
  this.View = paramView;
 }
 public void RequestAccelerate(int paramAmount)
 {
  if(Model != null)
  {
   Model.Accelerate(paramAmount);
   if(View != null) SetView();
  }
 }
 public void RequestDecelerate(int paramAmount)
 {
  if(Model != null)
  {
   Model.Decelerate(paramAmount);
   if(View != null) SetView();
  }
 }
 public void RequestTurn(RelativeDirection paramDirection)
 {
  if(Model != null)
  {
   Model.Turn(paramDirection);
   if(View != null) SetView();
  }
 }
 #endregion
 public void SetView()
 {
  if(Model.Speed >= Model.MaxSpeed)
  {
   View.DisableAcceleration();
   View.EnableDeceleration();
  }
  else if(Model.Speed <= Model.MaxReverseSpeed)
  {
   View.DisableDeceleration();
   View.EnableAcceleration();
  }
  else
  {
   View.EnableAcceleration();
   View.EnableDeceleration();
  }
  if(Model.Speed >= Model.MaxTurnSpeed)
  {
   View.DisableTurning();
  }
  else
  {
   View.EnableTurning();
  }
 }
}


  這裡是我們的ACME200SportsCar類(從抽象類別Automobile繼承,實現了IVehicleModel介面):

public class ACME2000SportsCar:Automobile
{
 public ACME2000SportsCar(string paramName):base(250, 40, -20, paramName){}
 public ACME2000SportsCar(string paramName, int paramMaxSpeed, int paramMaxTurnSpeed, int paramMaxReverseSpeed):
 base(paramMaxSpeed, paramMaxTurnSpeed, paramMaxReverseSpeed, paramName){}
}


  現在輪到我們的View了...

  現在終於開始建立我們MVC最後一個部分了...View!

  我們要建立一個AutoView來實現IVehicleView介面。這個AutoView將會有對Control和Model介面的引用。

public class AutoView : System.Windows.Forms.UserControl, IVehicleView
{
 private IVehicleControl Control = new ACME.AutomobileControl();
 private IVehicleModel Model = new ACME.ACME2000SportsCar("Speedy");
}


  我們也需要將所有的東西封裝在UserControl的建構函式中。

public AutoView()
{
 // This call is required by the Windows.Forms Form Designer.
 InitializeComponent();
 WireUp(Control, Model);
}
public void WireUp(IVehicleControl paramControl, IVehicleModel paramModel)
{
 // If we're switching Models, don't keep watching
 // the old one!
 if(Model != null)
 {
  Model.RemoveObserver(this);
 }
 Model = paramModel;
 Control = paramControl;
 Control.SetModel(Model);
 Control.SetView(this);
 Model.AddObserver(this);
}


  下面,加入我們的Button和一個label來顯示ACME2000 Sports Car的狀態還有狀態條用來為所有的Buttons來顯示編碼。

private void btnAccelerate_Click(object sender, System.EventArgs e)
{
 Control.RequestAccelerate(int.Parse(this.txtAmount.Text));
}
private void btnDecelerate_Click(object sender, System.EventArgs e)
{
 Control.RequestDecelerate(int.Parse(this.txtAmount.Text));
}
private void btnLeft_Click(object sender, System.EventArgs e)
{
 Control.RequestTurn(RelativeDirection.Left);
}
private void btnRight_Click(object sender, System.EventArgs e)
{
 Control.RequestTurn(RelativeDirection.Right);
}


  加入一個方法來更新介面...

public void UpdateInterface(IVehicleModel auto)
{
 this.label1.Text = auto.Name + " heading " + auto.Direction.ToString() + " at speed: " + auto.Speed.ToString();
 this.pBar.Value = (auto.Speed>0)? auto.Speed*100/auto.MaxSpeed : auto.Speed*100/auto.MaxReverseSpeed;
}


  最後我們實現IVehicleView介面的方法。

public void DisableAcceleration()
{
 this.btnAccelerate.Enabled = false;
}
public void EnableAcceleration()
{
 this.btnAccelerate.Enabled = true;
}
public void DisableDeceleration()
{
 this.btnDecelerate.Enabled = false;
}
public void EnableDeceleration()
{
 this.btnDecelerate.Enabled = true;
}
public void DisableTurning()
{
 this.btnRight.Enabled = this.btnLeft.Enabled = false;
}
public void EnableTurning()
{
 this.btnRight.Enabled = this.btnLeft.Enabled = true;
}
public void Update(IVehicleModel paramModel)
{
 this.UpdateInterface(paramModel);
}


  我們終於結束了!!!

  現在我們可以來測試ACME2000 Sports Car了。一切按計划進行,然後我們找到ACME的主管人員,但他想要開一個載貨卡車而不是運動車。

  幸運的是我們用的是MVC!我們需要做的所有工作就是建立一個新的ACMETruck類,封裝一下,完事!

public class ACME2000Truck: Automobile
{
 public ACME2000Truck(string paramName):base(80, 25, -12, paramName){}
 public ACME2000Truck(string paramName, int paramMaxSpeed, int paramMaxTurnSpeed, int paramMaxReverseSpeed):
base(paramMaxSpeed, paramMaxTurnSpeed, paramMaxReverseSpeed, paramName){}
}


  在AutoView中,我們只需要建立卡車封裝一下!

private void btnBuildNew_Click(object sender, System.EventArgs e)
{
 this.autoView1.WireUp(new ACME.AutomobileControl(), new ACME.ACME2000Truck(this.txtName.Text));
}


  如果我們想要一個新Control只允許我們來每次加速或減速最大5mph,小意思!做一個SlowPokeControl(和我們的AutoControl相同,但是在申請加速度中做了限制)。

public void RequestAccelerate(int paramAmount)
{
 if(Model != null)
 {
  int amount = paramAmount;
  if(amount > 5) amount = 5;
  Model.Accelerate(amount);
  if(View != null) SetView();
 }
}
public void RequestDecelerate(int paramAmount)
{
 if(Model != null)
 {
  int amount = paramAmount;
  if(amount > 5) amount = 5;
  Model.Accelerate(amount);
  Model.Decelerate(amount);
  if(View != null) SetView();
 }
}


  如果我們想讓我們的ACME2000 Truck變得遲鈍,只需要在AutoView中封裝。

private void btnBuildNew_Click(object sender, System.EventArgs e)
{
 this.autoView1.WireUp(new ACME.SlowPokeControl(), new ACME.ACME2000Truck(this.txtName.Text));
}


  最後,如果我們需要一個在web上的介面,我們要做的所有工作就是建立一個Web項目在UserControl中實現IVehicleView介面。

   結論

  正如你所看到的,使用MVC來構建代碼控制介面耦合性很低,很容易適應需求的改變。它也能使變化的影響減小,而且你可以在任何地方重用你的虛函數和介面。有很多時候我們可以在我們的項目中實現伸縮性,特別是在那些需求變化的時候,但是這需要下次再說了。

  於此同時,做下一個項目的時候記住MVC...你不會感到遺憾!

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。