Javascript MV* pattern

Time:2019-6-18

There are three very important architectural patterns of javascript:

  • MVC (Model-View-Controller) Backbone

  • MVP (Model-View-Representer)

  • MVVM (Model-View-View Model)

1. MVC

Separating Business Data (Model), User Interface (View), Management Logic (Controller) and User Input

  • Model represents domain-specific data and does not understand the user interface (View), Controller (Controller). When a Model changes, it notifies its observers.

  • View describes the current state of the Model. Observer mode is used to let View know when the Model is updated or modified

  • Presentation is concerned by View, but not just a single View (View) and Controller (Controller). View-Controller pairs are required for every part or element displayed on the screen.

  • Controller’s role in this View-Controller pair is to process user interactions (such as keystrokes and clicks) and make decisions for View.

1.1 Model

A very simple model (model) implemented with Backbone

var Photo = Backbone.Model.extend({
    // Photo's default properties
    defaults: {
       src: "placeholder.jpg",
       caption: "A default image",
       viewed: false
    },
    
    // Ensure that each photo has an SRC
    initialize: function(){
        this.set({"src": this.defaults.src});
    }
});

When using Model (Model) in real applications, we generally require Model (Model) to be persistent. Persistence allows us to edit and update the Model, save its latest state in memory, in the user’s local Storage data store, or synchronize with the database.

A model may have multiple Views that observe it.

Managing the Model in the Backbone allows us to write application logic based on notifications received from the Group, and all the Model contained in that Group should be changed.

var PhotoGallery = Backbone.Collection.extend({
    
    // Reference to the set model
    model: Photo,
    
    // Filter all images that have been viewed
    viewed: function(){
        return this.filter(function(photo){
            return photo.get("viewed");
        });
    },
    
    // Filter all unviewed pictures
    unviewed: function(){
       return this.without.apply(this, this.viewed());
    }
    
});

1.2 View (View)

Views are visual representations of models, and JavascriptView views are about building and maintaining a DOM element.

1.3 Controller (Controller)

2. MVP

3. MVVM