1. 程式人生 > >用C#實現MVC(Model View Control)模式介紹

用C#實現MVC(Model View Control)模式介紹

益處

    在我們的開發專案中使用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。

publicenum AbsoluteDirection
{
North
=0, East, South, West
}

publicenum RelativeDirection
{
Right, Left, Back
}

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

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

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

publicinterface IVehicleModel
{
string Namegetset;}
int Speedgetset;}
int MaxSpeedget;}
int MaxTurnSpeedget;}
int MaxReverseSpeed get;}
AbsoluteDirection Direction
{getset;}
void Turn(RelativeDirection paramDirection);
void Accelerate(int paramAmount);
void Decelerate(int paramAmount);
}

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

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

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

publicinterface 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。

publicinterface IVehicleModel
{
string Namegetset;}
int Speedgetset;}
int MaxSpeedget;}
int MaxTurnSpeedget;}
int MaxReverseSpeed get;}
AbsoluteDirection Direction
{getset;}
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這個變化。

publicclass 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。

publicabstractclass Automobile: IVehicleModel
{
"Declarations "
"Constructor"
"IVehicleModel Members"
}


 

最後但不是至少

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

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

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

publicclass AutomobileControl: IVehicleControl
{
private IVehicleModel Model;
private IVehicleView View;
public AutomobileControl(IVehicleModel paramModel, IVehicleView paramView)
{
this.Model = paramModel;
this.View = paramView;
}

public AutomobileControl()
{
}

IVehicleControl Members
publicvoid SetView()
{
if(Model.Speed >= Model.MaxSpeed)
{
View.DisableAcceleration();
View.EnableDeceleration();
}

elseif(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介面):

publicclass ACME2000SportsCar:Automobile
{
public ACME2000SportsCar(string paramName):base(25040-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介面的引用。

publicclass 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);
}

publicvoid 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來顯示編碼。

privatevoid btnAccelerate_Click(object sender, System.EventArgs e)
{
Control.RequestAccelerate(
int.Parse(this.txtAmount.Text));
}

privatevoid btnDecelerate_Click(object sender, System.EventArgs e)
{
Control.RequestDecelerate(
int.Parse(this.txtAmount.Text));
}

privatevoid btnLeft_Click(object sender, System.EventArgs e)
{
Control.RequestTurn(RelativeDirection.Left);
}

privatevoid btnRight_Click(object sender, System.EventArgs e)
{
Control.RequestTurn(RelativeDirection.Right);
}

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

publicvoid 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介面的方法。

publicvoid DisableAcceleration()
{
this.btnAccelerate.Enabled =false;
}

publicvoid EnableAcceleration()
{
this.btnAccelerate.Enabled =true;
}

publicvoid DisableDeceleration()
{
this.btnDecelerate.Enabled =false;
}

publicvoid EnableDeceleration()
{
this.btnDecelerate.Enabled =true;
}

publicvoid DisableTurning()
{
this.btnRight.Enabled =this.btnLeft.Enabled =false;
}

publicvoid EnableTurning()
{
this.btnRight.Enabled =this.btnLeft.Enabled =true;
}

publicvoid Update(IVehicleModel paramModel)
{