Question

Android中怎么使用PureMVC框架

Answer 1

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

[html] view plain copy print?
<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文件内容为

[javascript] view plain copy print?
/**
* @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信息写成一个对象类,方便以后使用，以及程序看起来跟清晰。