PureMVC(JS版）源码解析（九）：View类

     在讲解View类之前，我们先回顾一下PureMVC的模块划分：

     在PureMVC中M、V、C三部分由三个单例类管理，分别是Model/View/Controller。PureMVC中另外一个单例类——Facade。Facade提供了与MVC三个单例类（核心类）通信的唯一接口。这4个单例类构建了PureMVC的骨架。

     在游戏开发中，一个游戏是由多个模块组成，如主场景模块，战斗模块等等，每个模块通常都是单独的Model/View/Controller，显然PureMVC的4个单例类是无法满足需求的，它就提供了Proxy/Mediator/Command来解决问题。

     Proxy/Mediator/Command分别对应MVC中的Model/View/Controller，也分别有对应的单例管理，Model保存所有的Proxy引用、View保存所有的Mediator引用，Controller保存所有的Command映射。

     这篇博客开始，我们就要开始讲解PureMVC的三大核心类，先看看View类。

     View保存了所有的Mediator引用，它有一个mediatorMap数组，用来存放所有的Mediator引用。

View.prototype.mediatorMap = null;

     我们知道Mediator类有一个onRegister()方法，当Mediator对象在facade中注册时调用的，实际上Mediator对象的注册是通过调用View单例的registerMediator()方法来实现。

View.prototype.registerMediator = function(mediator)
{
    if(this.mediatorMap[mediator.getMediatorName()] != null)
    {
        return;
    }
    //mediator类继承Notifier类，这是初始化Notifier,给mediator的facade属性赋值
    mediator.initializeNotifier(this.multitonKey);
    this.mediatorMap[mediator.getMediatorName()] = mediator;

    //返回mediator感兴趣的消息
    var interests = mediator.listNotificationInterests();
    // register mediator as an observer for each notification
    if(interests.length > 0)
    {
        //创建一个Observer,把notification和mediator关联起来
        var observer = new Observer(mediator.handleNotification, mediator);
        for(var i = 0; i < interests.length; i++)
        {
            this.registerObserver(interests[i], observer);
        }
    }
    //在这里调用了mediator的onRegister()方法
    mediator.onRegister();
}

从这段代码中可以明白Mediator类onRegister()方法的调用机制了，这段代码中还有一个地方需要我们去深入研究:

//这段代码什么意思呢？
this.registerObserver(interests[i], observer);

registerObserver()，通过方法名我们可以知道它是用来注册Observer对象的，我们看一下的实现代码：

View.prototype.registerObserver = function(notificationName, observer)                 
{                                                                                      
    if(this.observerMap[notificationName] != null)                                     
    {                                                                                  
        this.observerMap[notificationName].push(observer);                             
    }                                                                                  
    else                                                                               
    {                                                                                  
        this.observerMap[notificationName] = [observer];                               
    }                                                                                  
};                                                                                     

View类的observerMap属性主要用于存放消息名(notificationName)和observer(观察者）之间的映射，一个消息名可以对应几个observer，所以如果检索到observerMap中存在notificationName,则把observer推入相应的数组中。observerMap大致的数据格式如下：

{“notificationName1":[observer1,observer2],"notificationName2":[observer3,observer4]} 

 

同时，除了注册观察者【registerObserver()】，还需要从observerMap中移除观察者（removeObserver):

View.prototype.removeObserver = function(notificationName, notifyContext)  
{                                                                          
    //通过notificationName，可以检索到接受该消息的Observer,返回一个数组                                                                
    var observers = this.observerMap[notificationName];                    
    for(var i = 0; i < observers.length; i++)                              
    {                                                                      
        if(observers[i].compareNotifyContext(notifyContext) == true)       
        {      
            //移除observer                                                            
            observers.splice(i, 1);                                        
            break;                                                         
        }                                                                  
    }                                                                                                                                   
    if(observers.length == 0)                                              
    {                                                                      
        delete this.observerMap[notificationName];                         
    }                                                                      
};                                                                         

 

     另外，我们知道Mediator类还有一个与onRegister()（注册）方法对应的onRemove()(注销）方法，是Mediator对象在facade中注销时调用的，Mediator对象的注销是通过调用View单例的removeMediator()方法来实现:

View.prototype.removeMediator = function(mediatorName)                      
{                                                                           
    var mediator = this.mediatorMap[mediatorName];                          
    if(mediator)                                                            
    {                                                                       
        // for every notification the mediator is interested in...          
        var interests = mediator.listNotificationInterests();               
        for(var i = 0; i < interests.length; i++)                           
        {                                                                   
            // remove the observer linking the mediator to the notification                                               
            this.removeObserver(interests[i], mediator);                    
        }                                                                   
                                                                            
        // remove the mediator from the map                                 
        delete this.mediatorMap[mediatorName];                              
                                                                            
        //触发mediator对象的onRemove方法                  
        mediator.onRemove();                                                
    }                                                                       
                                                                            
    return mediator;                                                        
};                                                                          

     mediator对象除了在facade中注册（registerMediator)，从facade中注销(removeMediator),还有一个很重要的方法，就是从facade里面检索mediator( retrieveMediator):

View.prototype.retrieveMediator = function(mediatorName)             
{                                                                    
    return this.mediatorMap[mediatorName];                           
};                                                                                                                                     

     通过上面的例子，我们可以知道Mediator类onRegister(),onRemove()方法的使用原理（与View类的registerMediator(),removeMediator,retrieveMediator()对应）和怎么注册观察者（registerObserver())、怎么移除观察者（removeMediator())。View类还有一个重要的方法就是给所有的观察者发送消息（notifyObservers())，触发观察者的消息处理函数。

View.prototype.notifyObservers = function(notification)
{
    // SIC
    if(this.observerMap[notification.getName()] != null)
    {
        var observers_ref = this.observerMap[notification.getName()], observers = [], observer

        for(var i = 0; i < observers_ref.length; i++)
        {
            observer = observers_ref[i];
            observers.push(observer);
        }

        for(var i = 0; i < observers.length; i++)
        {
            observer = observers[i];
            //出发了观察者的消息处理函数
            observer.notifyObserver(notification);
        }
    }
};

      到目前为止，我们应该可以大致弄清楚mediator对象的消息处理机制了。

      我们在Mediator/Command/Proxy通过调用继承自Notifier类的sendNotification()发送消息，实际上是调用View单例的notifyObservers()方法。

 

     View类是个多例类，它用instanceMap来存放View类的实例，我们来看一下它的构造函数：

function View(key)
{
    if(View.instanceMap[key] != null)
    {
        throw new Error(View.MULTITON_MSG);
    };

    this.multitonKey = key;
    View.instanceMap[this.multitonKey] = this;
    this.mediatorMap = [];
    this.observerMap = [];
    this.initializeView();
};

/**
 * @protected
 * Initialize the Singleton View instance
 * 
 * Called automatically by the constructor, this is your opportunity to
 * initialize the Singleton instance in your subclass without overriding the
 * constructor
 * 
 * @return {void}
 */
View.prototype.initializeView = function()
{
    return;
};

 

     根据Multiton模式（Multiton模式不理解的可以自行搜索）的设计原理，我们可以通过一个key值调用getInstance()方法来获取某个View实例：

View.getInstance = function(key)
{
    if (null == key)
        return null;
        
    if(View.instanceMap[key] == null)
    {
        View.instanceMap[key] = new View(key);
    };
    //实际上是从instanceMap数组中检索
    return View.instanceMap[key];
};

 

       总结一下，View类的结构相对于Mediator、Command、Proxy类要复杂许多，但他是PureMVC消息机制的核心，里面的很多方法我们需要记住，反复揣摩，特别是notifyObservers()。最后，附上View类的思维导图。