zoukankan      html  css  js  c++  java
  • 记录第一次在egret项目中使用Puremvc

    这几天跟着另一个前端在做一个小游戏,使用的是egret引擎和puremvc框架,这对于我来说还是个比较大的突破吧,特此记录下。

    因为在此项目中真是的用到了mvc及面向对象编程,值得学习


    记录第一次在egret项目中使用Puremvc:

    主开发说他在使用puremvc框架时对puremvc框架的使用进行了一些改良

    程序中整个puremvc框架的使用思路:

    1. View层自己来操作自己,Mediator用来接收和处理通知,在整个框架中任何地方都可以发布全局通知(通过facade单例的 sendNotification 方法),Model只关心数据,即Model层只与程序中所需要的数据层来打交道

    具体使用:

    1.在egret项目中引入puremvc框架,具体引入方法

    Puremvc对应typescript版本的下载地址:puremvc-typescript-standard-framework点击下载,

    Egret项目中如需引入puremvc将bin文件夹内三个文件复制到项目中,具体构建第三方库方法可看下官方文档

    2.新建facade单例,具体代码如下:

    class AppFacade extends puremvc.Facade implements puremvc.IFacade {
    
        public constructor() {
            super();
        }
    
        public static STARTUP: string = "startup";
        //提供静态函数,供外界调用 
        public static getInstance(): AppFacade {
            if(puremvc.Facade.instance == null)
            {
                puremvc.Facade.instance = new AppFacade();
            }
            return <AppFacade><any>(puremvc.Facade.instance);
        }
        
        //该函数 是 该类的初始化函数,创建改类实例后会自动调用改函数  
        //注册控制器  
        public initializeController(): void {
            super.initializeController();
            RegisterCommond.Register();
        }
        //注册数据模型  
        public initializeModel():void
        {
            super.initializeModel();
            RegisterModel.init();
          
        }
        //注册View视图
        public initializeView():void
        {
            super.initializeView();
            RegisterView.Register();
        }
        public initializeFacade():void
        {
            super.initializeFacade();
        }
    
    }

    Facade的类是PureMVC的核心类,负责管理调度PureMVC中的成员交互和运作。一般来说,一个应用中创建一个facade对象就够了。PureMVC中主要有三个角色:Mediator、Command以及Proxy。这三个角色分别对应着我们通常所说的MVC思想中的V(视图)、C(控制器)、M(数据管理器)。它们只有被注册到facade类中才能运作,才有意义。通过调用facade对象的registerMediator、registerCommand或registerProxy方 法可以将它们注册到facade对象中去。一旦被注册到facade对象中去了之后,享用同一注册源的Mediator、Command以及Proxy对 象就可以通过notification(通知)进行彼此之间的通讯,而事件只有事件派发者本人或其显示列表的父容器才能侦听到。使用notification进行通讯是PureMVC最大的便利之处。在一个Mediator、Command或者Proxy对象中使用sendNotification方法可以派发一个notification通知:

    sendNotification("MyNotification");

    该 方法的首个参数代表该条notification的名字,确保notification的名字的唯一性是减少意外错误的最佳保证。如果你愿意,你可以为该 方法传入第二个参数作为该条notification所携带的数据,可以是一个String, int或者是Object、Array等复杂对象。

    3.注册Mediator

    class BaseMediator extends puremvc.Mediator{
        public autoClose:Boolean=false;
        private _panelCls:any;
        public body:SkinCell;
        public constructor(mediatorName) {
            super(mediatorName);
        }
        public onRegister(): void {
    
        }
        public initPanel(): void {
            
        }
        public get listcloseNotification(): string[]
        {
            return [];
        }
        public get listopenNotification(): string[] {
            return [];
        }
        
        public listNotificationInterests():string[]
        {
            return [];
        }
        public isOpenNotification(name:string):boolean
        {
            return this.listopenNotification.indexOf(name) != -1;
        }
        public isCloseNotification(name: string): boolean{
            return this.listcloseNotification.indexOf(name) != -1;
        }
        public hasOpen(notification: puremvc.INotification = null): boolean{
            return true;
        }
        
        public hasClose(notification: puremvc.INotification = null): boolean{
            return true;
        }
        public createUI(notification:puremvc.INotification = null):void{
        
        }
        public addBody(): void {
            if(this.body && !this.body.parent) {
                GameLayerManager.gameLayer().sceneLayer.addChild(this.body);
            }
        }
        public openPanel(notification:puremvc.INotification = null):void{
            this.createUI(notification);
            this.addBody();
        }
        public closePanel(notification: puremvc.INotification = null): void {
            this.removeBody();
            this.closeMediator(notification);
        }
        
        public removeBody():void
        {
            if(this.body) {
                this.body.cleanUp();
                this.body=null;
            }
        }
        public handleNotification(notification: puremvc.INotification):void
        {
        }
        public closeMediator(notification):void
        {
            if(this.facade.hasMediator(this.mediatorName)) {
                this.facade.removeMediator(this.mediatorName);
            }
        }
        public resizeHandler():void{
            if(this.body)
            {
                this.body.resizeHandler(); 
            }
        }
    }

    及Mediator接收处理通知

    public handleNotification(notification:puremvc.INotification): void {
            var name = notification.getName();
            switch(name){
                case StoryMNotify.addNpcdialog: 
                    (this.body as NpcDialogUI).addDialogView(notification.getBody());
                    console.trace();
                    break;
                case StoryMNotify.clearNpcdialog:
                    (this.body as NpcDialogUI).clearDialogs();
                    break;
                case GameNotify.canvasResizeHandler: 
                    this.resizeHandler();
                    break;
            }
        }

    PureMvc介绍

    参考文章:

    http://www.cnblogs.com/ribavnu/p/3874748.html

    http://blog.csdn.net/dily3825002/article/details/7333514

    http://blog.csdn.net/lyh916/article/details/50058207


     首先来一张puremvc的经典架构图,起初看起来很复杂,后来才知道其实它只是比一般的mvc框架在架构上多了一个facade实例

    Pure MVC 初识

    pureMVC框架的目标很明确,即把程序分为低耦合的三层Model、View和Controller,这三部分有三个单例模式类管理,分别是Model、veiw和controller。三者是核心层或说核心角色。
    pureMVC中还有一个单例模式类——Facade,Facade提供了与核心层通信的唯一接口,以简化开发程度。它负责初始化核心层,并访问他们的Public方法。Facade是三者的经纪人。该类可以当成抽象类,永远不要被实例化,针对具体程序编写Facade的子类,添加或重写Facade的方法来实现具体应用。

    pureMVC的通信是使用观察者模式以一种松耦合方式实现的。

    Model保存对Proxy对象的引用,Proxy负责操作数据模型,与远程服务通信存取数据。

    View保存对Mediator对象的引用,由Mediator对象来操作具体的视图组件。

    Controller保存所有Command的映射,Command类是无状态的,只有在需要时创建。

      Model保存了对Proxy对象的引用,Proxy负责操作数据模型(调用Json接收相应面板的Mediator中发送的Notification,连接后台接收数据存入相应Vo),与远程服务通信存取数据。model里面一般放着一个view向对应的Proxy和Vo。View保存对Mediator对象的引用。用Mediator对象操作具体的视图组件,包括:显示视图添加事件监听,发送或接收Notification,直接改变组件的状态。

      Controller保存所有Command的映射。command类是无状态的,只在需要时创建。

      Command可以获取proxy对象并与之交互,发送Notification,执行其他的command经常用于复杂的或系统范围操作,如应用程序的启动和关闭,应用程序业务逻辑应该在这里实现。

      Facade类应用了单例模式,负责初始化核心层,并能访问它们的Public方法。

      Proxy、Mediator和Command可以通过创建的Facade类来相互访问通信。

      PureMvc通信不采用falsh的Event/EvenDispatch,它是使用观察者模式以以一种松耦合的方式来实现。

      当View注册了Mediator时,Mediator的listNotifitions的方法会被调用,以数组的形式返回Mediator对象所关心的所有Notification。

    proxy发送但不接收Notification

      Proxy从远程服务器接收到数据,发送Notification告诉系统,或当Proxy数据被更新时发送Notification告诉系统。

      Facade类应被看做抽象类,永远不要被直接实例化。针对具体应用程序编写具体Facade的子类,添加或重写Facade的方法来实现具体应用。

  • 相关阅读:
    使用NodeJS模块-第三方提供的模块(什么是npm)
    nodejs编写后台
    解决npm下载慢的问题
    全局安装与本地安装
    NPM常用命令
    使用NodeJS模块-NodeJS官方提供的核心模块
    导出模块成员
    Node.js提供了哪些内容(API)
    node.js的安装
    什么是node.js
  • 原文地址:https://www.cnblogs.com/fighxp/p/7778385.html
Copyright © 2011-2022 走看看