Inadvertently seeing Pure-Mvc recorded

Pure-MVC

前言

I saw some of the contents of creator when I learned some of the framework of creator, so I thought about it and summarized it. The amount of code for the PureMVC-TypeScript version is very small and easy to understand.

What is MVC

开开一图, the content depends on the 这里写图片描述

  • very obvious layered design Model View Controller
  • but these three parts are single cases are single cases It's a single case important thing to say three times
  • want to expand all kinds of MVC to use the corresponding intermediate class
  • Model - Proxy
  • View - Mediator - UI (It can be seen that MVC is a simple singleton Class The specific UI is held in Mediator)
  • Controller - Command

    and then introduce these intermediate classes

  • Proxy: Model saves references to Proxy objects, Proxy is responsible for manipulating data models, communicating with remote services data. Ex:HttpProxy TcpProxy ..

  • Mediator: View Saves a reference to a Mediator object. The specific view component is operated by the Mediator object, including: adding an event listener, sending or receiving a Notification, and directly changing the state of the view component. This achieves the separation of the view from the logic that controls it.

  • Command: Controller saves the mapping of all Commands. The Command class is stateless and is only created when needed. Command can get and interact with the Proxy object, send Notification, execute other Command

    here to do a reflection, in fact, a little as the name suggests, Controller is a controller, the simplest and straightforward way to interact with the controller. It is the command Command.

extend extension

这里写图片描述

This picture is a comprehensive introduction of Pure-MVC * Core layer MVC three single cases * Encapsulate the external docker Facade, the word is the meaning of the surface is well understood, is the shell * Then all the communication between Proxy and Mediator is realized by Notification Observer mode. * Command is the core logic and business center

工程目录

这里写图片描述

Here is a directory structure of the framework I am currently learning

  • controller: contains two directories and a startup command file boostrap Put the Command and Model and View startup files command to release all the command
  • model: contains all the proxy agent classes
  • view: contains all the Mediator intermediate classes, since creator is componentized development here There is a component directory to store UI components (that is, the UI is componentized)

Instance code

这里写图片描述

这里写图片描述

You can see the component in the UI in the life cycle function start through the only external AppFacade for registerMediator That is, add a reference to this mediator to the Map data table held by the singleton View. This mediator is the new one in the parameter.

Then, in this StartViewMediator intermediate class, related UI-related operations are performed, and onRegister will be triggered automatically in the above registerMediator.

注意点: Mediator and Proxy are the holders of the UI and the holders of the data should not interact directly, but why is it here, because in fact the actual project can not avoid getting some data, PureMvc also provides A convenient API, retrieveProxy, to obtain a proxy object of a certain data to obtain data manipulation data.

Related Links