如何使用javascript的PureMVC框架 - Mediator/View层

本实例的最终源文件下载地址

http://download.csdn.net/detail/laogong5i0/4400288

继续前两次的

如何使用javascript的PureMVC框架 - 初始化 

如何使用javascript的PureMVC框架 - Command/controller层

后，我们接下来要学习的是View层,Mediator的使用。

在上次如何使用javascript的PureMVC框架 - Command/controller层时我们曾使用Notification来触发Command的执行，其实Notification在PureMVC随处可以，它不仅可以用来触发Command的执行，在Mediator也是随处可见的！

在Mediator里，你可以发送、接收、声明notification，当Mediator被注册时，Mediator的listNotifications（）方法会被调用，以数组形式返回该Mediator对象所关心的所有Notification。之后，当PureMVC其它角色发出同名的Notification（通知）时，关心这个通知的Mediator都会调用handleNotification（）方法并将Notification以参数传递到方法。

理论上就说这么多，接下来是上代码！

首先在上两次教程里的html文件里添加一个div标签，内容为

<div align="center">
	<form id="userForm">
		<label>First Name</label>
		<input id="firstNmae" type="iniput" required />
		<label>Last Name</label>
		<input id="lastNmae" type="iniput" required />
		<input id="submit" type="button" value="Submit" />
	</form>
</div>

然后在demo文件夹下新建view文件夹，并在view文件夹下新建components文件夹

跟着在components文件夹下新建UiComponent.js以及UserForm.js文件

UiComponent.js文件是一个用于程序的UI组件的基类，它主要添加一个基于UiComponent的实现，让UI组件从Mediators监听

UserForm.js是继承自UiComponent.js类的UI组件，主要是实现对form表单的引用及操作。

UiComponent.js文件内容为

/**
 * @class
 * 一个用于程序的UI组件的基类
 * 它主要添加一个基于UiComponent的实现，让UI组件从Mediators监听
 * 实现者和监听者是负责匿名事件对象的发送和接受
 */
var UiComponent = Objs("demo.view.components.UiComponent",
{
	/**
	 * @construct
	 * 初始化一个UiComponent实例
	 */
	initialize: function()
	{
		this.listenerMap = {};
	},
	
	/**
	 * 一个UiComponent.listenerDescriptor的映射对象
	 * @type {Object}
	 * @private
	 */
	listenerMap: null,
	
	/**
	* 发送事件到事件流
	* @param {String} type
	* 		发送的事件类型
	* @param {Object} properties
	* 		可选的匿名对象，当dispatch时会被发送到事件监听器
	*/
	dispatchEvent: function( type, properties )
	{
		if( typeof type == 'undefined' )
			return;
			
		if( typeof this.listenerMap[UiComponent.QUEUE_PATTERN + type] == 'undefined' )
			return;
	
		var queue/*Array*/ = this.listenerMap[UiComponent.QUEUE_PATTERN + type].slice(0);
		
		var props/*Object*/ = properties || {};
		var len/*Number*/ = queue.length;
		for(var i/*Number*/=0; i<len; i++)
		{
			var listenerDescriptor/*UiComponent.ListenerDescriptor*/ = queue[i];
	
			if( typeof listenerDescriptor.listener == 'function' )
			{
				if( typeof listenerDescriptor.context != "undefined" )
					listenerDescriptor.listener.call( listenerDescriptor.context, props );
				else
					listenerDescriptor.listener.call( this, event, props );
			}
		}
	},
	
	/**
	 *  添加一个监听器去监听接收事件通知
	 * @param {String} type
	 * 		添加的事件类型
	 * @param {Function} listener
	 * 		添加事件监听器方法
	 * @param {Object} context
	 * 		添加事件监听方法的附加内容
	 */	
	addEventListener: function
	(
		type,
		listener,
		context
	)
	{
		if( typeof type == "undefined" )
			return;
	
		if( typeof listener == "undefined" )
			return;
			
		var newListener/*UiComponent.ListenerDescriptor*/ = new UiComponent.ListenerDescriptor( listener, context );
	
		var queue/*Object*/;
		if( typeof this.listenerMap[ UiComponent.QUEUE_PATTERN + type ] == "undefined" )
			queue = this.listenerMap[ UiComponent.QUEUE_PATTERN + type ] = [];
		else
			queue = this.listenerMap[ UiComponent.QUEUE_PATTERN + type ];
	
		var len/*Number*/ = queue.length;
		for(var i/*Number*/=0; i<len; i++ )
		{
			var listenerDescriptor/*UiComponent.ListenerDescriptor*/ = queue[i];
			if( listenerDescriptor.equals( newListener ) )
				return;
		}
	
		queue.push(newListener);
	},
	
	/**
	 * 删除一个事件监听器以便监听器停止接受notification事件
	 * @param {String} type
	 * 		删除的事件类型
	 * @param {Function} listener
	 * 		删除的事件监听器方法
	 * @param {Object} context
	 * 		删除事件监听方法的附加内容
	 */
	removeEventListener: function
	(
		type,
		listener,
		context
	)
	{
		if( typeof type == "undefined" )
			return;
	
		if( typeof listener == "undefined" )
			return;
	
		if( typeof this.listenerMap[UiComponent.QUEUE_PATTERN + type] == "undefined" )
			return;
			
		var queue/*Object*/ = this.listenerMap[ UiComponent.QUEUE_PATTERN + type ];
		var len/*Number*/ = queue.length;
		for(var i/*Number*/=0; i<len; i++)
                {
                        var listenerDescriptor/*UiComponent.ListenerDescriptor*/ = queue[i];
                        if( listenerDescriptor.equals( new UiComponent.ListenerDescriptor( listener, context ) ) )
			{
				queue.splice(i,1);
				return;
			}
                }
	}
});

/**
 * @class
 * @private
 * Event对象由UiComponent类派发到它的事件监听器
 */
UiComponent.Event = Objs("demo.view.components.UiComponent.Event",
{
	/**
	 * 事件类型
	 * @type {String}
	 */
	type: null,
	
	/**
	 * 随着dispatche event一起发送的属性
	 * @type {Object}	
	 */
	properties: null

});

/**
 * @private
 * 使用UiComoponent.listenerMap描述符对象鉴定各个事件监听器
 * 这是Javascript的内部类
 */
UiComponent.ListenerDescriptor = Objs("demo.view.components.UiComponent.Event",
{
	/**
	 * @construct
	 * 初始化实例
	 * @param {Function} listener
	 * 		被调用的方法
	 * @param {Function} listener
	 * 		被调用方法的内容
	 */	
	initialize: function( listener, context )
	{
		this.listener = listener;
		this.context = context;
	},

    /**
     * @private
     * 对比两UiComponent.ListenerDescriptor 以确定与目标相同的事件监听器。
     *
     * @param {UiComponent.ListenerDescriptor} compared
     *		descriptor将与当前的内容做对比
     * @return {Boolean}
	 * 		两个对比监听的的boolean值
     */
    equals: function( compared )
    {
        if( compared.listener == this.listener )
        {
            if( typeof compared.context != "undefined" )
            {
                if( compared.context == null && this.context == null )
                    return true;

                if( compared.context == this.context )
                    return true;
            }
        }

        return false;
    }
});

//一个字符前缀，用于防止项目名冲突
UiComponent.QUEUE_PATTERN = '@_@';

在编写UserForm.js前我们先在demo文件夹下新建一个model文件夹，然后在model文件夹下新建一个vo文件夹来存放user对象类,吧user信息写成一个对象类,方便以后使用，以及程序看起来跟清晰。

在vo文件夹下新建User.js文件夹，内容为

var UserVO = Objs("demo.model.vo.UserVO",
{

	firstName: "",
	lastName: "",
	
	/*
	* 判断用户是否合法
	*/
	getIsValid: function()
	{
		return 	this.firstName != "" 
				&&
				this.lastName != ""
		;
	}
	
});

接下是UserForm.js内容

var UserForm = Objs("demo.view.components.UserForm",
    UiComponent,
{
    
    user: null,
    sweepsFields: null,
    firstName: null,
    lastName: null,
    submit: null,
    /**
     * @construct
     * @override
     * 初始化UserForm实例.
     */
    initialize: function()
    {
        //调用父类中的initialize函数
        UserForm.$super.initialize.call( this );
        
        this.initializeChildren();
        this.configureListeners();
        
        this.clearForm();
        this.setEnabled(false);
        
    },

    /**
     * 初始化对html元素的引用
     */
    initializeChildren: function()
    {
        this.sweepsFields = $("#userForm");
    
        this.firstName = this.sweepsFields.find("#firstNmae");
        this.lastName = this.sweepsFields.find("#lastNmae");

        this.submit = this.sweepsFields.find("#submit").button();
    },
    
    /**
     * 注册监听事件
     */
    configureListeners: function()
    {
        var that = this; 
        this.submit.click( function(evt){ that.submit_clickHandler(evt) } );
    },
    
    /**
     * 设置一个user用来填充表单
     * @param {UserVO} user
     */
    setUser: function( user )
    {
        this.user = user;
        
        if( !user )
            this.clearForm();
        else
        {
            this.firstName.val(user.firstName);
            this.lastName.val(user.lastName);
        }
    },
    /**
     * 获取用户
     */
    getUser: function()/*UserVO*/
    {
        this.updateUser();
        return this.user;
    },
    
    /**
     * 根据fields的值更新用户属性
     */
    updateUser: function()
    {
        this.user = new UserVO();
        this.user.firstName = this.firstName.val();
        this.user.lastName = this.lastName.val();
    },
    
    /**
     * 清除整个表单
     */
    clearForm: function()
    {
        this.firstName.val("");
        this.lastName.val("");
    },

    /**
     * 时用或者禁用form表单
     * @param {Boolean} isEnabled
     */
    setEnabled: function( isEnabled )
    {
        if( isEnabled )
        {
            this.firstName.removeAttr("disabled");
            this.lastName.removeAttr("disabled");
        }
        else
        {
            this.firstName.attr( "disabled", "disabled" );
            this.lastName.attr( "disabled", "disabled" );
        }        
    },

    /**
     * 按下submit时调用
     */
    submit_clickHandler: function()
    {
        this.updateUser();
        //判断user信息是否合法，如果不合法提示并返回
        if( !this.user.getIsValid() )
        {
            alert('Please typing you First Name and Last Name');
            return;
        }
        // 调用基类UiComponent的dispatchEvent方法，派发UserForm.ADD事件
        this.dispatchEvent( UserForm.ADD );
    },
    
});

/*
 * Event names
 */
UserForm.ADD/*String*/        = "add";

接下来就是在Mediator里面操作UserForm实例了！

在view文件夹下新建UserFormMediator.js文件内容如下，主要功能是按Submit按钮后发送this.sendNotification( NotificationNames.USER_LISTS_ADD_ITEM, user );命了

var UserFormMediator = Objs("demo.view.UserFormMediator",
    Mediator,
    {    

    /**
     * @construct
     * @override
     * 初始化UserFormMediator实例
     * @param {String} name
     *         Mediator的名称
     * @param {UserForm} viewComponent
     *         Mediator所管理的UserForm视图组件
     */
    initialize: function( name, viewComponent )
    {
        UserFormMediator.$super.initialize.call( this, name, viewComponent );
    
        var userForm = this.getUserForm();
        //注册监听事件userForm.ADD，当触发时会调用onAdd方法，即监听submit按钮是否按下
        userForm.addEventListener( UserForm.ADD, this.onAdd, this );
        
        var user = new UserVO();
        user.firstName='pat';
        user.lastName='chen';
        
        userForm.setUser(user);
    },
    

    /**
     * @private
     * 获取UserFrom视图组件
     */
    getUserForm : function()
    {
        return this.viewComponent;
    },

    /**
     * @private
     * 当用户按submit时调用
     * @param {UiComponent.Event} event
     *         The dispatched event object.
     */
    onAdd: function( event )
    {
        var user = this.getUserForm().getUser();
        //使用PureMVC发送notification消息
        //在这里你需要在上次如何使用javascript的PureMVC框架 - Command/controller层提到的NotificationNames.js文件里添加
        //NotificationNames.USER_LISTS_ADD_ITEM = "user_lists_add_item";内容
        this.sendNotification( NotificationNames.USER_LISTS_ADD_ITEM, user );
        var userForm = this.getUserForm();
        userForm.clearForm();
        userForm.setEnabled(true);
    },
    
    /**
     * @override
     * 注册时被调用
     */
    onRegister: function()
    {
    },
    
    /**
     * @override
     * 当本Mediator被移除是被调用
     */
    onRemove: function()
    {
    },
    /**
     * 把要监听的事件添加到这个数组里去，
     * 当this.facade.sendNotification( notice, data)；时，就会调用handleNotification();方法
     * @override
     */
    listNotificationInterests: function()
    {
        return [
        ];
    },
    
    /**
     * 在这里处理使用 this.facade.sendNotification( notice, data)；发出来的事件
     * @override
     */
    handleNotification: function( note )
    {
        var userForm = this.getUserForm();
        var user;
        switch ( note.getName() )
        {
            
        }
    }
});

/*
 * Constants
 */
UserFormMediator.ADD/*String*/            = "add";

使用this.sendNotification( NotificationNames.USER_LISTS_ADD_ITEM, user ); 发出来的消息可以在Mediator 里监听也可一在Command里监听，下面我写再写一个Mediator来监听由 UserFormMediator发出来的 NotificationNames.USER_LISTS_ADD_ITEM消息。

在view文件夹下新建UserListsMediator.js文件，内容如下

var UserListsMediator = Objs("sweeps.view.UserListsMediator",
    Mediator,
    {

    /**
     * @construct
     * @override
     * 初始化UserListsMediator实例
     * @param {String} name
     *         Mediator的名称
     * @param {UserlistsForm} viewComponent
     *         Mediator所管理的UserlistsForm视图组件
    */
    initialize: function( name, viewComponent )
    {
        UserFormMediator.$super.initialize.call( this, name, viewComponent );
    },
    

    /**
     * 把要监听的事件添加到这个数组里去，
     * 当this.facade.sendNotification( notice, data)；时，就会调用handleNotification();方法
     * @override
     */
    listNotificationInterests: function()
    {
        return [
            NotificationNames.USER_LISTS_ADD_ITEM
        ];
    },
    
    /**
     * 在这里处理使用 this.facade.sendNotification( notice, data)；发出来的事件
     * @override
     */
    handleNotification: function( note )
    {
        var data = note.getBody();
        switch ( note.getName() )
        {
            case NotificationNames.USER_LISTS_ADD_ITEM:
                alert('firs name: ' + data.firstName + " \nlast name: " + data.lastName);
            break;
        }
    }
});

到这里我们还需要吧写好的Mediator注册到PureMVC中，

在上次如何使用javascript的PureMVC框架 - Command/controller层所提到的PrepViewCommand类里面知道到  execute方法，修改  execute（）方法

execute: function( note )
	{
	    //初始化View对象
		var userForm = new UserForm();

		//初始化Mediator对象
		var userFormMediator = new UserFormMediator( 'USER_FORM_MEDIATOR', userForm );
		var userListsMediator = new UserListsMediator( 'USER_LISTS_MEDIATOR',null);

		//注册Mediators
		this.facade.registerMediator( userFormMediator );
		this.facade.registerMediator( userListsMediator );
	}

最后所有文件的目录树为

那么所有类都写好了！就是剩下吧所有使用到的类导入到html里面了；

    <script type="text/javascript" src="src/demo/model/vo/UserVO.js"></script>
    <script type="text/javascript" src="src/demo/view/UserFormMediator.js"></script>
    <script type="text/javascript" src="src/demo/view/UserListsMediator.js"></script>
    <script type="text/javascript" src="src/demo/view/components/UiComponent.js"></script>  
    <script type="text/javascript" src="src/demo/view/components/UserForm.js"></script>  
    
    <script type="text/javascript" src="src/demo/abc/NotificationNames.js"></script>  
    <script type="text/javascript" src="src/demo/controller/PrepViewCommand.js"></script>  
    <script type="text/javascript" src="src/demo/controller/StartupCommand.js"></script>  
    <script type="text/javascript" src="src/demo/ApplicationFacade.js"></script>

这里的类文件比较多，这就是面向对象的特色啦，文件比较多，但当你熟悉后你就不觉得了，反而维护起来很方便。

如果你觉得太多，怕影响浏览速度的话，你只要在发布的时候吧这些文都压缩到一个文件里去就行了，我这里没有压缩，所有看起来比较麻烦。

按一下submit按钮看看吧！