ECMAScript MVC模式简介

介绍

MVC是模型-视图-控制器的缩写。视图和用户交互，通过事件导致控制器改变； 控制器改变导致模型改变，或者控制器同时改变两者；模型改变导致视图改变，或者视图改变，潜在的从模型里面获得参数来改变自己。它是一种抽象的模型，一种编程思维组织方式。

实例

模型modal

这里使用多年前的示例做演示。

其他ECMASCRIPT标准或实现（如Typescript、Coffescript等）同理，不再赘述

package {
    //导入相关依赖 如
    import events.Event;
    import events.EventDispatcher;
    //import ......

    public class Model extends EventDispatcher {
        private var hour:String;
        private var minute:String;
        private var second:String;

        //构造置空
        public function Model() {
        }

        public function get hour():String {
            return hour;
        }

        public function set hour(value:String):void {
            dispatchEvent(new Event("setHour"));
            hour = value;
        }

        public function get minute():String {
            return minute;
        }

        public function set minute(value:String):void {
            dispatchEvent(new Event("setMinute"));
            minute = value;
        }

        public function get second():String {
            return second;
        }

        public function set second(value:String):void {
            dispatchEvent(new Event("setSecond"));
            second = value;
        }

    }
}

实现一个构造置空的Model，通过getter和setter获取Model的私有属性。然后是View：

package {

    public class View extends Sprite {
        private var txt:TextField;
        private var model:Model;
        private var control:Control;

        public function View(model:Model, control:Control) {
            model = model;
            control = control;

            txt = new TextField()
            addChild(txt);
            model.addEventListener("setHour", setHandler);
            model.addEventListener("setMinute", setHandler);
            model.addEventListener("setSecond", setHandler);
            control.starUp();
        }

        private function setHandler(e:Event):void {
            txt.text = `${model.hour}:${model.minute}:${model.second}`;
        }

    }
}

之后，用control控制View：

package {

    public class Control {
        private var model:Model;
        private var hour:String;
        private var minute:String;
        private var second:String;
        private var timer:Timer = new Timer(1000);

        public function Control(model:Model) {
            model = model;
        }

        public function starUp():void {
            timer.start();
            timer.addEventListener(TimerEvent.TIMER, onTimer);
        }

        private function onTimer(e:TimerEvent):void {
            var date:Date = new Date();
            model.hour = date.getHours() < 9 ? "0" + date.getHours() : String(date.getHours());
            model.minute = date.getMinutes() < 9 ? "0" + date.getMinutes() : String(date.getMinutes());
            model.second = date.getSeconds() < 9 ? "0" + date.getSeconds() : String(date.getSeconds());
        }

    }
}

由于它是数据驱动的，明显的层次，逻辑是逻辑，表现是表现，随着项目越来越复杂，这种模式对项目的可控性、维护性和效率都是很好的支持。一般是中大型项目必备选择。

code enjoy! 😄😄😁

作者：indeex

链接：https://indeex.cc

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。