Cocos2d-JS MVC模块化开发
Model层开发
Model层说明
PureMVC框架的目标很明确,即把程序分为低耦合的三层:Model、View和Controller,这三部分由三个单例模式类管理,分别是Model、View和Controller,三者合称为核心层或核心角色。
Model保存对Proxy对象的引用,Proxy负责操作数据模型,与远程服务通信存取数据。这样保证了Model层的可移植性。
Proxy Pattern(代理模式)
在很多场合下Proxy需要发送Notification(通知),比如:Proxy从远程服务接收到数据时,发送Notification告诉系统;或当Proxy的数据被更新时,发送Notification告诉系统。
Model通过使用Proxy来保证数据的完整性、一致性。Proxy集中程序的Domain Logic(域逻辑),并对外公布操作数据对象的API。它封装了所有对数据模型的操作,不管数据是客户端还是服务器端的,对程序其他部分来说就是数据的访问是同步还是异步的。
Model应该逻辑封装域(domain logic)证,保数据的完整性。
一般来说,Proxy Pattern(代理模式)被用来为控制、访问对象提供一个代理。在基于PureMVC的应用程序,Proxy类被设计用来管理程序数据模型。
一个Proxy有可能管理对本地创建的数据结构的访问。它是Proxy的数据对象。在这种情况下,通常会以同步的方式取得或设置数据。Proxy可能会提供访问Data Object部分属性或方法的API,也可能直接提供Data Object的引用。如果提供了更新Data Object的方法,那么在数据被修改时可能会发送一个Notifidation通知系统的其它部分。
Remote Proxy被用来封装与远程服务的数据访问。Proxy维护那些与Remote service(远程服务)通信的对象,并控制对这些数据的访问。在这种情况下,调用Proxy获取数据的方法,然后等待Proxy在收到远程服务的数据后发出异步Notification。
Proxy对象不应该通过引用、操作Mediator对象来通知系统它的Data Object(数据对象)发生了改变。
它应该采取的方式是发送Notification(这些Notification可能被Command或Mediator响应)。Proxy不关心这些Notification被发出后会影响到系统的什么。
把Model层和系统操作隔离开来,这样当View层和Controller层被重构时就不会影响到Model层。
源代码
本文代码:https://github.com/guyoung/GeneCocosMVC/tree/master/MVCHelloWorld-Part05
编译及运行
browserify
1 | browserify MVCHelloWorld-Part05jsapp.js -o MVCHelloWorld-Part05jsapp-all.js |
or
1 | browserify MVCHelloWorld-Part05jsapp.js -o MVCHelloWorld-Part05jsapp-all.js --debug |
uglifyjs
1 | uglifyjs MVCHelloWorld-Part05jsapp-all.js -o MVCHelloWorld-Part05jsapp-all.js |
http-server
1 | node_modules.binhttp-server.cmd |
View层开发
View层说明
PureMVC框架的目标很明确,即把程序分为低耦合的三层:Model、View和Controller,这三部分由三个单例模式类管理,分别是Model、View和Controller,三者合称为核心层或核心角色。
View保存对Mediator对象的引用。由Mediator对象来操作具体的视图组件(View Component,例如Cocos2d的Layer组件),包括:添加事件监听器,发送或接收Notification ,直接改变视图组件的状态。这样做实现了把视图和控制它的逻辑分离开来。
Mediator Pattern(中介者模式)
当用View注册Mediator时,Mediator的listNotifications方法会被调用,以数组形式返回该Mediator对象所关心的所有Notification。 之后,当系统其它角色发出同名的Notification(通知)时,关心这个通知的Mediator都会调用handleNotification方法并将Notification以参数传递到方法。
Mediator是视图组件与系统其他部分交互的中介,侦听View Component来处理用户动作和Component的数据请求。Mediator通过发送和接收Notification来与程序其他部分通信。
Mediator保存了一个或多个View Component的引用,通过View Component自身提供的API管理它们。一个View Component应该把尽可能自己的状态和操作封装起来,对外只提供事件、方法和属性的简单的API。
Mediator的主要职责是处理View Component派发的事件和系统其他部分发出来的Notification(通知)。因为Mediator也会经常和Proxy交互,所以经常在Mediator的构造方法中取得Proxy实例的引用并保存在Mediator的属性中,这样避免频繁的获取Proxy实例。
Mediator负责处理与Controller层、Model层交互,在收到相关Notification时更新View Component。
源代码
本文代码:https://github.com/guyoung/GeneCocosMVC/tree/master/MVCHelloWorld-Part06
编译及运行
browserify
1 | browserify MVCHelloWorld-Part06jsapp.js -o MVCHelloWorld-Part06jsapp-all.js |
or
1 | browserify MVCHelloWorld-Part06jsapp.js -o MVCHelloWorld-Part06jsapp-all.js --debug |
uglifyjs
1 | uglifyjs MVCHelloWorld-Part06jsapp-all.js -o MVCHelloWorld-Part06jsapp-all.js |
http-server
1 | node_modules.binhttp-server.cmd |
Controller层开发
Controller层说明
PureMVC框架的目标很明确,即把程序分为低耦合的三层:Model、View和Controller,这三部分由三个单例模式类管理,分别是Model、View和Controller,三者合称为核心层或核心角色。
Controller保存所有Command的映射。
Command Pattern(命令模式)
Command对象是无状态的;只有在需要的时候(Controller收到相应的Notification)才会被创建,并且在被执行(调用execute方法)之后就会被删除。所以不要在那些生命周期长的对象(long-living object)里引用Command对象。 Command可以获取Proxy对象并与之交互,发送Notification,执行其他的Command。经常用于复杂的或系统范围的操作,如应用程序的“启动”和“关闭”。应用程序的业务逻辑应该在这里实现。
Controller会注册侦听每一个Notification,当被通知到时,Controller会实例化一个该Notification对应的Command类的对象。最后,将Notification作为参数传递给execute方法。
Command要实现ICommand接口。在PureMVC中有两个类实现了ICommand接口:SimpleCommand、MacroCommand。SimpleCommand只有一个execute方法,execute方法接受一个Inotification实例做为参数。实际应用中,你只需要重写这个方法就行了。MacroCommand让你可以顺序执行多个Command。每个执行都会创建一个Command对象并传参一个对源Notification的引用。
MacroCommand在构造方法调用自身的initializeMacroCommand方法。实际应用中,你需重写这个方法,调用addSubCommand添加子Command。你可以任意组合SimpleCommand和MacroCommand成为一个新的Command。
源代码
本文代码:https://github.com/guyoung/GeneCocosMVC/tree/master/MVCHelloWorld-Part07
编译及运行
browserify
1 | browserify MVCHelloWorld-Part07jsapp.js -o MVCHelloWorld-Part07jsapp-all.js |
or
1 | browserify MVCHelloWorld-Part07jsapp.js -o MVCHelloWorld-Part07jsapp-all.js --debug |
uglifyjs
1 | uglifyjs MVCHelloWorld-Part07jsapp-all.js -o MVCHelloWorld-Part07jsapp-all.js |
http-server
1 | node_modules.binhttp-server.cmd |