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.”