AS3 mvc应用

          在程序开发中，为了降低程序的耦合度，我们经常会对程序进行模式化，这一节中，我们介绍MVC的设计模式，MVC由三层结构构成,分别是视图器(view)，模型器(model)，控制器(control)。视图器view的作用是显示对象，即我们肉眼看到的元素。而视图器需要的数据我们把它放到模型器model里，那如何操作这些数据呢，这便涉及到我们的逻辑，我们把这部分的程序放进控制器control里。所以，实际上是控制器control在操作模型器model，使其发生数据的改变，而引起model发出相应的事件，视图器view侦听到这些事件时相应的改变视图。应用MVC的结构可以让我们的程序更加有条理更加清晰。下面是一个MVC的小例子。由三个类跟一个文档类构成：

        这个例子主要是：点击按钮时让文本的数据加100.功能很简单。

        首先是视图类：MyView.as.  它只有一个按钮跟一个文本。当点击按钮时，我们调用control的方法changeNum。同时，我们在MyView监听model的数据改变事件。

package View     {   import flash.display.Sprite;   import flash.text.TextField;   import flash.events.*;   import Model.MyModel;   import Control.MyControl;   /**     * ...     * @author Never     */   public class MyView extends Sprite   {     private var _model:MyModel;     private var _control:MyControl;     private var _showBtn:CustomSimpleButton;     private var _showLabel:TextField ;     public function MyView(model:MyModel,control:MyControl)         {       this._model = model, this._control = control;       initConfig();//初始化界面       initListener();//添加侦听器     }     private function initConfig():void {       _showBtn = new CustomSimpleButton();       _showBtn.x = 50, _showBtn.y = 50;                         this.addChild(_showBtn);         _showLabel = createTextField(0, 20, 200, 20);         _showLabel.x = 50, _showLabel.y = 30;         _showLabel.text = "2";         this.addChild(_showLabel)     }     private function initListener():void {       this._showBtn.addEventListener(MouseEvent.CLICK, mouseClick)       //注册模型器的监听       _model.addEventListener("changeStr", showText);     }     //视图器触发 控制器的方法changeNum     private function mouseClick(e:MouseEvent):void {       _control.changeNum(uint(_showLabel.text))     }     public function showText(evt:Event) :void{                         _showLabel.text = String(_model.ModelNum);                 }                 private function createTextField(x:Number, y:Number, width:Number, height:Number):TextField {                         var result:TextField = new TextField();                         result.x = x; result.y = y;                         result.width = width; result.height = height;                         addChild(result);                         return result;                 }       } }       import flash.display.DisplayObject;   import flash.display.Shape;   import flash.display.SimpleButton;   class CustomSimpleButton extends SimpleButton {     private var upColor:uint     = 0xFFCC00;     private var overColor:uint = 0xCCFF00;     private var downColor:uint = 0x00CCFF;     private var size:uint            = 40;     public function CustomSimpleButton() {       downState            = new ButtonDisplayState(downColor, size);       overState            = new ButtonDisplayState(overColor, size);       upState                = new ButtonDisplayState(upColor, size);       hitTestState     = new ButtonDisplayState(upColor, size * 2);       hitTestState.x = -(size / 4);       hitTestState.y = hitTestState.x;       useHandCursor    = true;     }   }   class ButtonDisplayState extends Shape {     private var bgColor:uint;     private var size:uint;     public function ButtonDisplayState(bgColor:uint, size:uint) {       this.bgColor = bgColor;       this.size        = size;       draw();     }     private function draw():void {       graphics.beginFill(bgColor);       graphics.drawRect(0, 0, size, size);       graphics.endFill();     }   }

           其次是控制器类：MyControl.as,这里的操作视图器model，我们可以做更复杂的逻辑控制，这里我们简单化，只是让数据加100。

package Control     {   import View.MyView;   import Model.MyModel;   /**     * ...     * @author Never     */   public class MyControl       {     private var _model:MyModel;     public function MyControl(model:MyModel)         {       this._model = model;     }     public function changeNum(n:uint):void     {       //模型发出事件通知        var temp:uint = n +100       _model.showNum(temp);     }   } }

        再次是模型器MyModel.as，在这里我们可以根据程序需要定义不同的数据，这里我们的功能只需要一个textField需要的数据，我们定义为_ModelNum。当_ModelNum发生改变时，我们发出一个changeStr的事件，告诉视图器该修改显示元素啦。

package Model     {   import flash.events.Event;   import flash.events.EventDispatcher;   /**     * ...     * @author Never     */   public class MyModel extends EventDispatcher   {     private var _ModelNum:uint;     public function MyModel()         {     }     public function get ModelNum():uint     {       return _ModelNum;     }     //在控制器中调用此方法 。模型器发送数据更改的事件。     public function showNum(n:uint):void     {           _ModelNum = n;       //修改       dispatchEvent(new Event("changeStr"));     }   } }

      在上面，我们已经将程序的结构MVC化，最后我们还需要一个文档类MvcDoc.as，它将实例化我们的MVC三个结构部分。

package     {   import flash.display.Sprite;   import flash.events.Event;   import View.MyView;   import Control.MyControl;   import Model.MyModel;   /**     * ...     * @author Never     */   public class MvcDoc extends Sprite       {     private var _model:MyModel;                     private var _controller:MyControl;                     private var _view:MyView;         public function MvcDoc():void         {       if (stage) init();       else addEventListener(Event.ADDED_TO_STAGE, init);     }     private function init(e:Event = null):void         {            _model = new MyModel();                 _controller = new MyControl(_model);                _view = new MyView(_model,_controller);                addChild(_view);           removeEventListener(Event.ADDED_TO_STAGE, init);     }   } }

         最后，我们往往会提出一个疑问：不就是一个点击按钮然后改变文本数据的功能么，直接在视图类监听按钮的事件，直接改变不就行了？为什么搞那么复杂呢？如果这样，会很容易出现以下两个缺点：1，设计逻辑制作混乱，这需要开发者有高度清晰的思路，而且还要防止各段代码之间的相互影响。2，维护起来费时、费力，可能开发者对他们的代码很熟悉，某个功能可以很快的找到，但换个人进行维护，可能读代码如读天书，修改一个小小的功能可能都是噩梦。当我们在开发大项目时，这样的划分可以让我们的程序OOP面向对象化，视图层与控制层割开来，那么开发起来就更加方便维护更加有条理性.