AS3菜鸟教程12-MVC模式

    技术2026-03-28  6

    在这一节中我们来看一下MVC模式,用MVC模式去构建我们的程序会使程序结构更清晰。

    MVC模式是”Model-View-Controller”的缩写,中文翻译为”模式-视图-控制器”。MVC应用程序总是由这三个部分组成。 Event(事件)导致Controller改变Model或View,或者同时改变两者。只要Controller改变了Models的数据或者属性, 所有依赖的View都会自动更新。

    MVC模式能使界面(Viwe)和数据(Model)能有效的分开,由控制器(Controller)去控制。

    我们现在以一个比较简单的电子时钟的例子来看看如何使用MVC模式来架构我们的程序.

    首先我们来看一下Model,Model按照我的理解是数据,就是所有的共用数据都是存储在Model里面的,时钟里有这样的数据,小时,分钟,秒;现在我们来建立一个Model,ModelLocator.as:

    1.package net.smilecn.clock.model{2.    3.    import flash.events.EventDispatcher;4.    import flash.events.Event;5.    6.    public class ModelLocator extends EventDispatcher{7.    8.        private var _hour:String;9.        10.        private var _minutes:String;11.        12.        private var _second:String;13.        14.        public function ModelLocator():void{15.        }16.        17.        public function get hour():String{18.            return _hour;19.        }20.        21.        public function set hour(value:String):void{22.            _hour = value;23.            dispatchEvent(new Event("changeHour"));24.        }25.        26.        public function get minutes():String{27.            return _minutes;28.        }29.        30.        public function set minutes(value:String):void{31.            _minutes = value;32.            dispatchEvent(new Event("changeMinutes"));33.        }34.        35.        public function get second():String{36.            return _second;37.        }38.        39.        public function set second(value:String):void{40.            _second = value;41.            dispatchEvent(new Event("changeSecond"));42.        }43.    44.    }45.    46.}这个代码应该会好懂,这里ModelLocator继承了EventDispatcher这个类,继承这个类的原因是ModelLocator需要用dispatchEvent发消息出去。再来看一下Controller.as这个类:

    1.package net.smilecn.clock.control{2.    3.    import flash.utils.Timer;4.    import flash.events.TimerEvent;5.    6.    import net.smilecn.clock.model.ModelLocator;7.    8.    public class Controller{9.        10.        private var _model:ModelLocator;11.        private var _timer:Timer;12.        13.        public function Controller(model:ModelLocator):void{14.            _model = model;15.        }16.        17.        public function startTime():void{18.            _timer = new Timer(1000,0);19.            _timer.addEventListener(TimerEvent.TIMER,timerHandler);20.            _timer.start();21.        }22.        23.        private function timerHandler(event:TimerEvent):void{24.            var nowDate:Date = new Date();25.            _model.hour = nowDate.getHours()>9?String(nowDate.getHours()):"0"+nowDate.getHours();26.            _model.minutes = nowDate.getMinutes()>9?String(nowDate.getMinutes()):"0"+nowDate.getMinutes();27.            _model.second = nowDate.getSeconds()>9?String(nowDate.getSeconds()):"0"+nowDate.getSeconds();28.        }29.        30.    }31.}这个类中我们用到了Timer类,因为我们用的是时钟,所以需要一个定时器,Timer是一个很好的定时器,Timer(1000,0),这里 1000是指1000毫秒,就是1秒钟触发一次定时钟,0表示次数,这里0是无限次,如果是大于0的数就是这个数的次数。侦听 TimerEvent.TIMER事件就是1秒钟去执行一次timerHandler方法,timerHandler方法的功能是得到当前的时间然后去改 变_model里面的值,再看一下ModelLocator.as里面的代码,当hour,minutes,second的值改变的时候就会去发消

    息出去,那么谁来侦听这些消息呢,当然是View,现在来看下View.as:

    1.package net.smilecn.clock.view{2.    3.    import flash.display.Sprite;4.    import flash.events.Event;5.    import flash.text.TextField;6.    7.    import net.smilecn.clock.model.ModelLocator;8.    import net.smilecn.clock.control.Controller;9.    10.    public class View extends Sprite{11.        12.        private var _model:ModelLocator;13.        private var _controller:Controller;14.        private var time_txt:TextField;15.    16.        public function View(model:ModelLocator,controller:Controller):void{17.            _model = model;18.            _controller = controller;19.            time_txt = new TextField();20.            addChild(time_txt);21.            _model.addEventListener("changeHour",changeTimeHandler);22.            _model.addEventListener("changeMinutes",changeTimeHandler);23.            _model.addEventListener("changeSecond",changeTimeHandler);24.            25.            _controller.startTime();26.        }27.        28.        private function changeTimeHandler(event:Event):void{29.            time_txt.text = _model.hour+" : "+_model.minutes+" : "+_model.second;30.        }31.    32.    }33.}在View里面,侦听了_model的事件,所以当收到数据改变的消息后,将_model的数据显示到文本框中。

    要使程序运行,我们现加一个文档类:

    1.package net.smilecn.clock{2.    3.    import flash.display.Sprite;4.    5.    import net.smilecn.clock.model.ModelLocator;6.    import net.smilecn.clock.control.Controller;7.    import net.smilecn.clock.view.View;8.    9.    public class Clock extends Sprite{10.        11.        private var _model:ModelLocator;12.        private var _controller:Controller;13.        private var _view:View;14.        15.        public function Clock():void{16.            _model = new ModelLocator();17.            _controller = new Controller(_model);18.            _view = new View(_model,_controller);19.            addChild(_view);20.        }21.        22.    }23.}在文档类中建立了ModelLocator、Controller、View的实例,ModelLocator产生的实例被传到了 Controller和View中,这样就保证了Controller和View使用是相同的ModelLocator,其实要达到这种效果不用这种方法 也可以,可以用到上一节中用到的单例模式。

    这里作一个总结,Controller是一个控制者,它去改变ModelLocator,ModelLocator的数据被改变后去更新View, 使我们能看到数据。如果界面上有一些按钮交互,那么就应该是Controller去响应View里的按钮交互,响应后去通过一些操作后改变 ModelLocator,ModelLocator数据改变后通知View去改变界面。

    有人可以会说这个程序用更少的代码就可以完成,但这里只是演示程序的架构,当程序很大时,好的架构会使程序更清晰

    文章来自: 闪客居(www.flashas.net) 详文参考:http://www.flashas.net/asbc/20090908/4495.html

    最新回复(0)