MV* refers to various MVC, MVP, MVVM and other Web design patterns

1, the MVC

  • View: The View layer, the user interface rendering logic
  • Model: The Model layer, data related operations
  • Controller: Communication bridge between Controller, data model and view

//view: view layer,
<div>
    <span id="container">0</span>
    <button id="btn">+</button>
</div>


//model: data management layer (manipulate data, update view)
function add (node) {
    // Business logic processing
    const currentValue = parseInt(node.innerText);
    const newValue = currentValue + 1;

    // Update the view
    node.innerText = current + 1;
}


// Controller: control layer (event listener, notification model layer)
const button = document.getElementById('btn');
    // Respond to view directives
    button.addEventListener('click'.() = > {
    const container = document.getElementById('container');

    // Call the model
    add(container);
}, false);

Copy the code

2, the MVP

  • Model: Handles data processing unrelated to the specific business
  • View: User interface rendering logic
  • Presenter:
    • Event monitoring, processing related business processing
    • Update view rendering
//view: View layer
<div>
    <span id="container">0</span>
    <button id="btn">+</button>
</div>

//model: data management layer
function add (num) {
    return num + 1;
}


//controller: indicates the control layer
const button = document.getElementById(globalConfig.containerId);
const container = document.getElementById(globalConfig.buttonId);
button.addEventListener('click'.() = > {
    // Respond to view directives
    const currentValue = parseInt(container.innerText);
    
    // Call the model
    const newValue = add(currentValue);
    
    // Update the view
    container.innerText = current + 1;
}, false);

Copy the code

3, MVVM

  • View and Model have the same responsibilities as MVP
  • ViewModel
    • The View is automatically associated with the Model, mainly by DataBinding
    • Two-way data binding is realized by using the responsive principle of data
    • Use virtual DOM and diff methods for page updates
//view: View layer
<div id="test"> <! -- Data and view binding --><span>{{counter}}</span>
    <button v-on:click="counterPlus">+</button>
</div>

//model: control layer
function add (num) {
    return num + 1;
}

// ViewModel: data responsive processing, using the virtual DOM diff algorithm
new Vue({
    el: '#test'.data: {
        counter: 0
    },
    methods: {
        counterPlus: function () {
            // You only need to modify the data, no need to manually modify the view
            this.counter = add(this.counter); }}})Copy the code