What is the MVC

MVC is an architectural design pattern that divides a software system into three basic parts: Model, View, and Controller.

For example, you might be writing something that feels logical step by step. After a few days, you look back at your project and you’ve lost the thread. There are a lot of repetitions, and if you change one step, you change all of them, and that can lead to serious mistakes. Using MVC, you can really break your code up into chunks, not piles

The Model (data)

Model data management, including data logic, data request, data storage and other functions.

The front-end Model is mainly responsible for storing AJAX requests or LocalStrage.

const model ={
        // Define data

        data: null./ / initialization

        init(){}

        // Various methods

        fetch(){}

        save(){}

        update(){}

        deltet(){}}Copy the code

The View (View)

The View is responsible for the user interface, and the front View is responsible for HTML rendering.

const view = {
init(){}

    template:`<div>HI</div>`

}  
Copy the code

Controller(Controller)

The Controller handles the View’s events and updates the Model, listens for changes to the Model and updates the View, and the Controller controls everything else

const controller = {
    view: null.model: null.init(view, model){
        this.view = view
        this.model = model
        this.bindEvents()
    }
    render(){
        this.view.querySelector('name').innerText = this.model.data.name
    },
    bindEvents(){}}Copy the code

Table driven programming

In the process of MVC optimization code, we extracted a “hash table” (Events); We left behind what was needed and couldn’t be simpler: doSomething.

const controller = {
    init(){...// We call this an auto-bound event
        controller.autoBindEvents()
    },
    / / event
    events: {
        'click #a1': 'method_1'.'click #a1': 'method_1'.'click #a1': 'method_n'
    },
    autoBindEvents() {
        // Implement the process, such as traversal
        for (let key in controller.events)
        // For example, divide the string containing 'event selector' into several parts and put them into different variables
    },
    method_1() {
        doSomething_a1
    },
    method_2() {
        doSomething_a2
    },
    ...
    method_n() {
        doSomething_an
    }
}
Copy the code

The role of the eventBus

  • EventBus is also a design pattern or framework for optimizing and simplifying communication between components/objects.
  • EventBus provides apis such as ON, off, and Trigger. On is used to listen for events, and trigger is used to trigger events.
const model = {
    data: {
        i: come fromSomewhere},/ / update event
    update(data) {
        // Update data to model.data
        Object.assign(model.data, data)
        // Trigger model:updated event
        eventBus.trigger('model:updated')}}const controller = {
    // Initialize method
    init() {
        // Initialize render
        view.render(model.data.i)
        // Whenever the model:updated method is heard, the updated page is rendered
        eventBus.on('model:updated'.() = > {
            v.render(model.data.i)
        })
    },
    ...
    method_1() {
        //model.update(i: model.data.i + 1)
        model.update(i: model.data.i doWithMethod_1)
    },
    method_2() {
        model.update(i: model.data.i doWithMethod_2)
    },
    ...
    method_n() {
        model.update(i: model.data.i doWithMethod_n)
    }
}
Copy the code

Summarize what modularity is

In fact, MVC is a modularity, some scattered code to encapsulate into blocks. Modularization can reduce code coupling, reduce duplicate code, improve code reuse, and make the project structure clearer and easier to maintain.

MVC is just a design pattern that gives us a primary way to structure code. Incorporating more approaches and ideas into the design pattern implementation process can bring code closer to truly “good code.”