Mar 15, 2011

PureMVC 我也會 [6]

Mediator
  • ViewComponents 與 pureMVC 架構的中介
  • 監聽並反應 View Component 發出的 Event
  • 可以發送與接收 Notification
  • 儘量少操作 Proxy 公開方法,多用 sendNotification...

Mediator design pattern
要多認識這個 Mediator 設計模式的話,請自行看連結說明啊! 簡單來講,假使有一個 View 裡面有好幾個 MovieClip
組成,而這些 MovieClip 會互相影響對方...這個情況在 Flash 中,通常都會變成下圖:

MovieClip 直接控制其他 MovieClip 搞到整個關係很複雜...換一個元件簡直是災難。
加入 Mediator 後,示意圖就會變成:

這樣,所有的 MovieClip 都透過 Mediator 來跟其他 MovieClip 溝通,當某一個 MovieClip 替換成別的元件,這時候也只需要修改 Mediator 中的引用即可,是不是變得很乾淨?如果同一組 MovieClip 有另外一個操作模式,也只需要替換掉 Mediator 即可!天下太平啊~~~

而 PureMVC 中就是利用 Mediator class 為與前端 ViewComponent 的中介,這樣可以切開 ViewComponent 與 PureMVC framework 的關係,不管你前端介面使用 Flash or Flex 製作都跟程式核心無關。

所以 ViewComponent 製作時只需要兩個原則,一把所有的請求都以 Event 送出由 Mediator 處理,二提供公開方法, Mediator 只需要監聽 View 的 Event,將收到的資訊透過公開方法喂進 ViewComponent 即可。
如在 ViewComponent 中:

public function setList( result:Object ):void{
list.dataProvider = result as ArrayCollection;
}

//然後在按下取得資料的按鈕 Click action 寫上:
dispatchEvent( new Event( "GET_LIST" ));

新建 Mediator 的時候一樣有幾個重點方法需要覆寫,onRegister, onRemove, listNotificationInterests and handleNotification。
處理 List ViewComponent 的 Mediator:

package com.mvc.views
{
import com.mvc.models.ListProxy;
import fl.core.UIComponent
import flash.events.Event;

import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.mediator.Mediator;

public class ListMediator extends Mediator
{
public function ListMediator(mediatorName:String=null, viewComponent:Object=null)
{
super(mediatorName, viewComponent);
}
override public function listNotificationInterests():Array
{
//要處理啥訊息都在這邊列好,列出有興趣的 Notification
return [
ListProxy.LIST_CHANGED
];
}
override public function onRegister():void{
//監聽 view 的 Event
view.addEventListener( "GET_LIST" , onClick );
}
override public function onRemove():void{
//記得在 onRemove 中移除監聽
view.removeEventListener( "GET_LIST" , onClick );
}
override public function handleNotification(notification:INotification):void
{
//listNotificationInterests 有列這邊才收的到喔!
switch(notification.getName()){
case ListProxy.LIST_CHANGED:
view.setList( notification.getBody());
}
}
private function onClick(event:Event):void{
//假使已經做了一個 Command 來處理 ListProxy request...
//facade.registerCommand( "GET_DATA_LIST", ListProxyCommand );
sendNotification( "GET_DATA_LIST" );
}
//給自己看的,重點還是轉換物件型態
private function get view():UIComponent {
return viewComponent as UIComponent;
}
}
}


當然,要先註冊 ListMediator:

//listViewComponent 為畫面中某個 ViewComponent
facade.registerMediator( new ListMediator("ListMediator", listViewComponent );

Mediator 跟 ViewComponent 並不是只有一對一,也是可以控制多個 ViewComponent 喔!完全是看你要如何組織而已。
在 team work 中,處理前端介面的工程師其實只需要會串接 Mediator 即可,可以不用真正的熟悉整個 PureMVC 的運作,這樣分工起來簡單很多。

可喜可賀!!!恭喜大家撐到現在,主要的 class 都講完了!這份教學就是要配合實作才會更容易理解,就請各位多看一些範例吧!多練習才是王道啊!

相關連結:
PureMVC 官網上範例
[Flex] pureMVC Standard 練習筆記
[Flex] pureMVC 練習筆記啪兔
[ AS3] 簡單講客製 Event
[Flex] pureMVC and Utility - StateMachine
[Flex] pureMVC and Utility - StateMachine(2)
[AS3]PureMVC Utility - AsyncNotifier
Google PureMVC 任意門

Mar 14, 2011

PureMVC 我也會 [5]

寫在前面...為日本地震海嘯受災戶祈福,為地球祈福...~_~



Proxy
  • 收集資料,提供公開方法给外部使用
  • 封裝資料區域邏輯(反正就是弄好資料才給別人)
  • 只能發送 Notification
  • 絕對不要引用到任何的 mediator,越自閉越好

Proxy 也是一個設計模式:Proxy design pattern,有興趣的請看 wiki 連結,以最簡單的解釋 Proxy 就是資料的「代理人」要什麼資料就是透過這個代理人取得,請求資料的對象不需要知道代理人是如何得到資料。

隨便畫個示意圖,MVC 中為什麼要分開 Model 用意就是當 Model 更改服務的時候,也只需要修改 Model。上圖中,如果你原本的服務是 PHP 會通過 ProxyA 去與後端溝通,當後端更改成 .NET 的時候,前面都不需要變動,也只需要更改為 ProxyB,在上一篇中有特別建議將 Proxy 取用寫在 Command 也是為了因應這種情況產生,這樣你只需要修改 proxyCommand 相關引用就可以了。

使用 Proxy 的時候通常都會伴隨 ValueObject 來使用,VO 的用意是為了強制資料型態,免得在開發過程中過度使用 Object 來做傳遞結果無法檢查資料型別而出現的 bug。

ValueObject

package com.mvc.models.vo
{
public class listVO
{
public function listVO(label:String, data:String){
this.label = label;
this.data = data;
}
public var label:String;
public var data:String;
}
}

當然你也可以使用 getter and setter 來定義屬性。

Value Object 好處是,使用 remoting 的時候可以直接與後端輸出物件型別綁定,前端收到後端吐出資料時,完全不需要做轉型,如:

package com.mvc.models.vo
{
[RemoteClass(alias='com.serverside.vo.listVO')]
public class listVO {
--以下省略--
}
}


以下是簡單的 Proxy 寫法:
兩個建議一定要覆寫的方法是:onRegister and onRemove
這隻 Proxy 作用只是當執行 getList() 時載入外部 xml,並發送清單資料

package com.mvc.models
{
import com.mvc.models.vo.listVO;

import mx.collections.ArrayCollection;
import mx.rpc.IResponder;

import org.puremvc.as3.patterns.proxy.Proxy;

public class ListProxy extends Proxy implements IResponder
{
public static const NAME:String = 'listProxy';
public static const LIST_CHANGED:String ="list_changed";

private var service : HTTPService;

public function ListProxy()
{
super(NAME, new ArrayCollection);
}
override public function onRegister():void
{
/*
* 通常建議要初始的東西寫在這邊,不要寫在 constructor 內
* Standard 版本感覺不出來有什麼差別
* Multi-code 版本就很容易有問題
*/
}
override public function onRemove():void
{
//移除 Proxy 後要做的事情
service = null;
}
public function getList():void{
if( service ){
sendNotification( LIST_CHANGED, list );
}else{
service = new HTTPService();
service.resultFormat = 'xml';
service.url = "data/list.xml";
service.send();
}
}
//隱藏的 getter 給自己看的,順便轉換資料型態
private function get list() : ArrayCollection {
return data as ArrayCollection;
}
/**
* Implemented mx.rpc.IResponder
*/
public function result( event:Object ):void{
var xml:XML = XML(event.result);
var list:ArrayCollection = new ArrayCollection;
for each (var subxml:XML in xml.list){
list.addItem( new listVO ( subxml.@name, subxml.@data));
}
setData(list);
//改完就要發 Notification
sendNotification( LIST_CHANGED, list );
}
public function fault( obj:Object ):void{
trace("XML 載入錯誤");
}
}
}

你會發現 基本上 Proxy 的 new 是帶有 proxyName:String, data:Object 兩個屬性,如果你的 Proxy 是唯一的,就使用 static var NAME:String 來註冊,如果 Proxy 是多個(如遊戲 room proxy)這時候的 public class ListProxy() 就需要改成:

public class ListProxy( proxyName:String ){
super( proxyName , new ArrayCollection);
}

這樣才可以建立多個 proxy instance。

通常一支 Proxy 並不會做這麼單一的事情,所以你可以將載入工作直接利用 Command or Delegate class 來執行

如:XMLServiceDelegate.as
要 load XML 的都透過這個就行了。

package com.mvc.models
{
import mx.rpc.AsyncToken;
import mx.rpc.IResponder;
import mx.rpc.http.HTTPService;

public class XMLServiceDelegate
{
public var responder : IResponder;
public var service : HTTPService;

public function XMLServiceDelegate( responder : IResponder, url:String)
{
// constructor will store a reference to the service we're going to call
this.service = new HTTPService();
this.service.resultFormat = 'xml';
this.service.url = url;

// and store a reference to the proxy that created this delegate
this.responder = responder;
}

public function load() : void
{
// call the service
var token:AsyncToken = service.send();
// notify this responder when the service call completes
token.addResponder( this.responder );
}
}
}


然後 ListProxy 修改成:

package com.mvc.models
{
import com.mvc.models.vo.listVO;

import mx.collections.ArrayCollection;
import mx.rpc.Responder;

import org.puremvc.as3.patterns.proxy.Proxy;

public class ListProxy extends Proxy
{
public static const NAME:String = 'listProxy';
public static const LIST1_CHANGED:String ="list1_changed";

private var list1:ArrayCollection;
//其他 list...這個 Proxy 用來儲存清單資料
private var list2:ArrayCollection;

public function ListProxy()
{
super(NAME, new ArrayCollection);
}
public function getList():void{
if( list1 ){
sendNotification( LIST1_CHANGED, list );
}else{
var delegate:XMLServiceDelegate = new XMLServiceDelegate(new Responder(list1Result, fault) , "data/list.xml");
delegate.load();
}
}

public function list1Result( event:Object ):void{
var xml:XML = XML(event.result);
list1 = new ArrayCollection;
for each (var subxml:XML in xml.list){
list1.addItem( new listVO ( subxml.@name, subxml.@data));
}
//改完就要發 Notification
sendNotification( LIST1_CHANGED, list1 );
}
public function fault( obj:Object ):void{
trace("XML 載入錯誤");
}
}
}

其實 Proxy 的玩法跟 Command 一樣很多,重點還是要練習才會有感覺...=)

Mar 10, 2011

PureMVC 我也會 [4]

Command
  • 當然就是 Command Design Pattern 的實作
  • 用註冊的方式 mapping Notification
  • 一般來說 Command 的生命週期只有到它的 execute 方法執行後就掛了(揮手帕~)
  • 環保!免洗!能用就儘量用!!

Command Design Pattern
顧名思義當然是「命令」設計模式了。這個模式非常好理解,為什麼叫命令?意思就是你老媽叫你去洗碗、掃地或做其他家事,不都是一個指令一個動作?如同一支電視遙控器,每按一個按鈕都有對應的命令,按了電源鈕 -> 開機,音量放大 -> 音量變大一點,選台 -> 跳台...動作做完就結束,所有命名都是有內容的,如果每一個命令都要乖乖的命名的話,光記內容不就累死了...所以你會發現繼承 Command 後,只需要 override execute():void 方法即可。

PureMVC 送你用的 Command 有兩種,SimpleCommand and MacroCommand。SimpleCommand 當然就是單次使用啦!想要一次執行一堆請愛用 MacroCommand,如果你還需要其他執行模式,可以自己手工建立,或看官網所提供的 Utilities。

StartupCommand:
官方範例中的 StartupCommand 使用 MacroCommand,就是為了分開 MVC 相關初始用 Commands

package com.me.myapp.controller
{
import org.puremvc.as3.interfaces.*;
import org.puremvc.as3.patterns.command.*;
import com.me.myapp.controller.*;
// A MacroCommand executed when the application starts.
public class StartupCommand extends MacroCommand {
// Initialize the MacroCommand by adding its subcommands.
override protected function initializeMacroCommand() : void {
addSubCommand( ModelPrepCommand ); //Model 相關準備用 Command
addSubCommand( ViewPrepCommand ); // View 相關準備用 Command
}
}
}


MacroCommand 使用:

addSubCommand( command:Class );

來加入馬上要執行的 command class

你也會發現有人會這樣寫:

package com.mvc.controllers
{
import com.mvc.models.ListProxy;
import com.mvc.views.ListMediator;

import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.command.SimpleCommand;

public class StartupCommand extends SimpleCommand
{
public function StartupCommand()
{
super();
}
override public function execute(notification:INotification):void{
facade.registerMediator( new ListMediator("ListMediator", notification.getBody()) );
facade.registerProxy( new ListProxy());
//直接都在這邊處理初始註冊
}
}
}

要使用 SimpleCommand or MacroCommand 完全是看專案規模與個人喜好應用就可以了。

寫完後當然就是要用 facade.registerCommand(); 將 "STARTUP" 與 StartupCommand mapping 起來。等到有人 sendNotification( STARTUP, body ); 後,程式自然會幫你執行 StartupCommand。

註冊 Command 的地點沒有規定一定要在 ApplicationFacade 或 StartupCommand 內,不過建議還是由其他 Command 處理,別四處亂寫是比較安全。

Command 的功用
  • 初始註冊事宜
  • 通常用來處理 multi-view 共用的 proxy 相關操作,免得每個 mediator 都抓著同一個 proxy 不放。
    如:想要取用 DataProxy 的 getList():void 方法。這時候只要將處理 DataProxy 用的 DataProxyCommand 跟 "GET_DATA_LIST" mapping 起來,所有想要 DataProxy.getList() 資料的 views 都可以利用 sendNotification( "GET_DATA_LIST" ); 到時候如果 getList() 改名了又或者改用其他 Proxy 的方法,也只需要修改 DataProxyCommand 內容就夠了。如:

    package com.controls
    {
    import com.models.DataProxy;
    import org.puremvc.as3.interfaces.INotification;
    import org.puremvc.as3.patterns.command.SimpleCommand;
    public class DataProxyCommand extends SimpleCommand
    {
    override public function execute( notification:INotification) :void
    {
    //多個 Notification 共用同一個 Command 就是用 if else or switch 處理
    if( notification.getName() == "GET_DATA_LIST" ){
    var proxy:DataProxy = facade.retrieveProxy( DataProxy.NAME ) as DataProxy;
    //用 facade.retrieveProxy 取出 DataProxy
    proxy.getList();
    }
    }
    }
    }

  • [自己填...]

其實 Command 的應用層面很大,能做的事情琳琅滿目,請大家花時間好好的跟它認識吧!

Mar 9, 2011

PureMVC 我也會 [3]

Notification & Observer
  • 簡單講就是 PureMVC 架構中的 Event 機制
  • 背後就是所謂的「Observer Design Pattern」
  • Notification 為訊息物件
  • Facade and Proxy 只能發送
  • Command and Mediator 可以接收與發送

Observer Design Pattern
「觀察者」這個設計模式被提出來一定有它的過人之處,寫程式講求的就是「別人家的事情管他去死,什麼渾水都要淌的話,怎麼被蟲咬死都不知道」。觀察者做的事情就是有興趣接收的消息,就自己乖乖訂閱,出了啥大事,就是用將訊息發出去,有訂閱的人自然會收到,收到訊息要做什麼反應當然就是自己的事情,最後收膩了還可以取消訂閱。在 PureMVC 中可以發送的 class 都可以用內建的 sendNotification() 發送訊息:

sendNotification( NotificationName:String , body:Object , type:String );
//body:Object 萬物皆物件啊,如果你還不知道能送什麼出去我也沒辦法了...


接收端會收到被打包成 notification:Notification 的物件,可以用其 getName(), getBody() and getType() 方法取得訊息的內容。

Command 中能接收到的訊息是通過 facade.registerCommand( NotificationName:String , command:Class ) 達到 mapping,而 Mediator 中要接收 Notification 要在其 listNotificationInterests 方法中列出有興趣 Notifications 清單。

Proxy 不能接收也有它的用意,Model 最大的功能就是提供資料,不需要理會外面的世界到底發生了什麼事情,如果能接收訊息的話,直接拿 Mediator 來用就好了,還需要使用 Proxy 嗎?

to be continued...

Mar 7, 2011

PureMVC 我也會 [2]

PureMVC Gestalt

• Model and Proxy
• View and Mediator
• Controller and Commands
• Facade and Core
• Observers and Notification


Facade
  1. 簡化一切,讓你只需要對一個窗口
  2. Standard version 的 Facade 是個單例
  3. Multi-core 版本是由單例的 Facade bus(Array) 控制
  4. Model, View and Controller 三個單例的總代理
  5. Commands, Mediators and Proxy 的註冊、取用與移除都是在這裡
  6. 反正就是想要操作其他 class 時,可以先參考 facade 一下...
  7. 開始寫 PureMVC 專案後,你會發現它無所不在,甩都甩不掉...

每個專案的 ApplicationFacade 都長得很像(當然命名可以修改,內容不太需要變動)。如果你有自己特有的 Singleton Class 寫法,請自行修改。懶得改的人就直接用它官網上範例的寫法即可,其實乖乖的用也不會變壞到哪去啦!
以下為標準的 ApplicationFacade 寫法:
PS:範例 code 皆使用 Standard 版本 + Flex SDK 3.x or 4.x 來呈現,也許不是完整的寫法,請勿真的照抄後執行

package com.mvc
{
import org.puremvc.as3.patterns.facade.Facade;
import org.puremvc.as3.interfaces.IFacade;
import mx.core.Application;
import com.mvc.controls.StartupCommand;

public class ApplicationFacade extends Facade implements IFacade
{
public static const STARTUP:String = 'startup';
public function ApplicationFacade()
{
super();
}
public static function getInstance() : ApplicationFacade
{
if ( instance == null ) instance = new ApplicationFacade( );
return instance as ApplicationFacade;
}

override protected function initializeController( ) : void
{
super.initializeController();
registerCommand( STARTUP , StartupCommand );
}

public function startup( app:Application ) : void
{
sendNotification( STARTUP, app );
}
}
}


初始化 Facade

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="220" height="200" layout="absolute"
applicationComplete="ApplicationFacade.getInstance().startup( this )" >

<mx:List id="list"/>
</mx:Application>



ApplicationFacade.getInstance().startup( this ) // 就是這句...


ApplicationFacade 先繼承 Facade, 做的事情就是提供一個唯一的實體,再來註冊 string key "STARTUP" 的 Command (當然這個 StartupCommand 接下來會寫出來 ),接著就是發送通知(sendNotification) "STARTUP" ,順便將傳入的 app:Application 送出去...end... 真簡單對吧?

在 Proxy, Command and Mediator 要取用 Facade 怎麼辦?難道用 var facade:ApplicationFacade = ApplicationFacade.getInstance(); 來引用嗎?當然不可能!就說你甩不掉它了,因為這基本上常用到的 Class 都會帶著一個名為 「facade」 的屬性,直接用就可以囉!

其實你要註冊一堆相關 Proxy, Command, Mediator 都可以直接寫在 ApplicationFacade,為什麼它還要分離出去將初始化寫在 StartupCommand 內?這就是程式的藝術了。與其專案開發時增增減減不斷的改寫這個檔案, 到不如快快樂樂的用不同的 Command 來處理初始豈不是更乾淨?尤其專案通常是多人開發,人多手雜蟲蟲翩飛的道理不懂嗎?XD

Facade 可以用的 function 簡單到翻臉,國中英文有學好的應該都沒問題。
PureMVC AS3 API Doc - Facade
常用還是這幾個 register(註冊), remove(刪除), retrieve(取回)has(有沒有) 系列 function。

Facade 就先到此為止囉!

Mar 4, 2011

PureMVC 我也會 [1]

為什麼要學 PureMVC ? 明明網路上一堆免費的 MVC 微型框架,為什麼 Erin 特別愛用 PureMVC?
嚴格說起來,使用 PureMVC 開發的專案寫出來的 class 檔一定比 一些簡化版 PureMVC base 的 framework 如 Robotlegs 多,也比較難入門,但是為什麼要特別推薦它?

答案很簡單,越基本的東西反而是最好延伸,留白越多的紙最好畫!也因為如此才令人著迷啊...(咦?)

百分百真情推薦:
  • 大家的職責切分的很乾淨...棒
  • 訊息傳遞機制是好物
  • 由於架構超然於 Flash / Flex 架構上,反而在 team work 分工的時候更方便
  • 擁有多個程式語言的版本,想要入門其他語言是個不錯的選擇
  • Source code 公開化,要改要加什麼隨便你~~
  • 出來的時間比較久相關資源多

接下來就來看圖說故事。
PureMVC Diagram, 出處:PureMVC 官網

當初第一眼看到這張圖的時候,真的挺像個變形蟲,不過想要快速了解 framework 的基本運作流程,最容易的方法就是看圖說故事...

PureMVC 核心是由四個單例(singleton design pattern) 組成: Facade, Model, View and Control,唯一出入口就是 Facade,你會發現圖示中 Model, View and Control 都是雙向指向連接到 Facade,它們互相不清楚其他人的存在。

這四個 Class 你也只需要認識 Facade 即可...=)

Facade :
圖示中, Facade 下方有三個圈圈分別是 Mediator, Command and Proxy,意思是所有實作這三種 class instance 都是透過 Façade 來註冊移除或取用其他資源。拿 Flash 來比喻, Facade 很像是 root,所有的 DisplayObject 顯示、操作和移除都可以透過 root 抓取實體後執行,所有實體都可以透過 root 去找到其他實體。在 PureMVC 中, 它最大的作用就是切開 MVC 彼此的依賴,也提供 user 一個統一的操作出入口。

Model, View and Control
你會發現這三個大圈圈旁邊都有一堆同色的 Proxy, Command and Mediator,當各自的 class instance 透過 Facade 註冊後,其 class instance 會被這三個單例做儲存。

Proxy, Command and Mediator
除了 Facade 外,這三個 class 一定要好好認識它們。Proxy 用來儲存資料與其邏輯運算,Command 則是頂呱呱的棒當然是能用儘量用,而 Mediator 是用來串接 ViewComponent 與 PureMVC 架構的橋樑。圖示上三個 class instances 會互相連接,這全部都是 Facade 與 Notification 的功勞啊~~

躲起來的 Observer & Notification
PureMVC 用的訊息傳遞機制,不能不認識它,不過不用擔心,實際應用起來卻是簡單到不行!

所以整個 PureMVC 其實只要將 Facade, Mediator, Command, Proxy and Notification 搞懂就圓滿了...(驚!)

同場加映:
AS3 版之 Standard and Multi-Core 的差異
Standard 版本的四個單例是基本的 Class。但是 Multi-Core 版本是 Array,用來承接複數的 Facade,Multi-Core 辨識的方法就是賦予 Facade 一個 String Key,所以要跨 Facade 應用也是挺容易的,就是透過 String Key 找到目標 facade,手工寫連接工具,或者參考官網上的 Pipes utility 來做串接。
兩個版本的寫法差異非常小,通常 Multi-Core 版本都是用來開發多人大型專案才會使用到,否則一般練習與中小型專案,使用 Standard version 其實就很足夠了!反正就是挑一個順眼的用就可以了...=)

推薦文章:
其實一堆朋友如邦邦奶綠茶Ticore 等都寫過 PureMVC 的文章。請認真的 google 一下~~
google 任意門
DesignPatterns_Singleton - 奶綠茶 << 不知道啥是 Singleton 的同學們請先到這邊補課一下。
PureMVC Best Practices 官網上的「最佳練習」中文版
[Flex] pureMVC Standard 練習筆記

to be continued....

Mar 3, 2011

PureMVC 我也會 [0]

最近感覺 PureMVC 又熱了起來,也剛好好久沒有更新文章了,
就順便將去年底做的企業內訓 PureMVC 課程部分整理寫出來,

要講 PureMVC 當然要先從啥是 MVC 講起:

Model-View-Control
出處:維基百科 MVC,大概節錄一段:
  • (控制器Controller)- 負責轉發請求,對請求進行處理。
  • (檢視View) - 介面設計人員進行圖形介面設計。
  • (模型Model) - 程式設計師編寫程式應有的功能(實作算法等等)、數據庫專家進行資料管理和數據庫設計(可以實作具體的功能)。

其實到 Flash 的世界來講,Model and Control 都是由 .as 處理,而 View 便是 .fla+.as ,為了要鬆綁之間的關係,Event 機制就相當重要。其實每個人對 MVC 的最佳解釋都不同,真的要多練習才會有所領悟。

簡單來說:

Model = 餐廳廚房
data: 西餐類
action:依照點菜單做餐點
action: 做完餐點就是將餐點放在出菜口按下通知鈴等服務生來


Control = 服務生
action: 聽到大門歡迎鈴就要說「歡迎光臨」
action: 看到客人揮揮手要去收點菜單
action: 聽到廚房通知鈴看是哪桌的餐點去送菜


View = 餐廳外場
view: 田園式的西餐廳裝潢
action: 客人進門會有歡迎鈴
action: 客人揮揮手叫服務生過來服務,是哪個服務生都無所謂,重點只要會收點菜就行了。
action: 客人收到餐點準備開動

當餐廳要改成外炒店,這時候只需要將大廚換成會中餐廚師,其出的菜就是中式快炒。
當餐廳外場由田園式外觀重新裝潢成華麗感夜店風,其進門的客層也會有所不同。

重點就是當你換掉一個地方時,對其它的部份不會造成太大的影響或者根本無所謂,這就是 MVC 所講求的境界...

一般來說,小專案有沒有必要使用 MVC 就是由各位自己判斷了,當你習慣將程式切分開來,發現 debug 不是一件痛苦的事情時,這時候有沒有強制使用 MVC 倒不是重點,因為你已經養成良好的撰寫習慣。但是開始接觸大型專案配合 team work 時,在沒有一個共用的核心框架前提下,這個專案開發到最後一定會是一個多手多腳的怪物,共用核心框架的價值就在這邊展現,這也是為什麼一堆微型 MVC 框架的產生,也讓各位不得已要開始學習它們。

講在 PureMVC 系列開始前:
初學的時候絕對別為了框架而框架。突然想到有一句佛偈語:「見山是山,見山不是山,見山又是山」,見山又是山這就是設計模式應用的最高境界啊!

[App] 國道計程收費速算器 2.0

之前的版本跟目前 國道計程官網 所列資料誤差很大,這支 App 也一直有人在使用,所以為了答謝愛用者只好做了一次大更新,因為對 CoronaSDK scrollView widget 有點怨言,所以 iOS 版本採用 Swift3 重寫了一遍,不過 Android 版本還是維...