【 introduction 】
MVC is a software architecture pattern or MVC framework; It consists of Model, View and Controller. The purpose of this pattern is to achieve a dynamic programming, which can simplify the modification and extension of subsequent programs.
MVC three objects
Each module can be written as M, V and C objects
- M (Model: Data Model) : is responsible for operating all data
- V (View) : responsible for all UI interfaces
- C (Controller) : Responsible for others
Requirement: to achieve a number of addition, subtraction, multiplication and division; As is shown in
Use MVC to implement this requirement (using pseudocode, just understand the idea)
- The M object operates on all data
Everything related to the data goes into the M object
const m = {
dataData: {n}create(){},
delete(){},
update(data){
Object.assign(m.data,data)// Replace old data with new data
eventBus.trigger('m:update')//eventBus start m: Update the event to refresh the interface
},
get(){}}Copy the code
- The V object is responsible for all the UI interfaces
All the views are in v,
const v = {
el: Stores pages that need to be rendered,html:'Put the HTML content here'.init(container){
v.el = $(container)
},
render(n){refresh page}}Copy the code
- C objects are responsible for the rest
Other operations are put in C
const c = {
init(container){
v.init()
v.render()
c.autoBindEvents()
eventBus.on('m:update'.() = >{v.render()},// When eventBus triggers m:update, refresh the view
},
eventsEvents: {},// Events are stored as hash tables, involving table driven programming
add(){+ concrete implementation},minus(){-concrete implementation},mul(){* concrete implementation},div(){/ concrete implementation},autoBindEvents(){automatic binding event}}Copy the code
What apis does EventBus have
Simply put, it is an event-driven message service bus
- api
The EventBus basic API has on, trigger, and OFF methods.
For communication between modules, view component level, parent-child component, and sibling component communication can all be handled using eventBus
/ / EventBus. J code
class EventBus{
constructor(){
this._eventBus =$(window)}on(eventName, fn){
return this._eventBus.on(eventName,fn)
}
trigger(eventName,data){
return this._trigger.tiggger(eventName,data)
}
off(eventName, fn){
return this._eventBus.off(eventName,fn)
}
}
export default EventBus
/ / new. Js code
import EventBus from 'EventBus.js'
const e =new EventBus()
e.on()
e.trigger()
e.off()
Copy the code
Table driven programming
Table driver is a programming pattern that looks up information from a hash table rather than using logical statements (if… else… Switch, which reduces repetitive code, puts important information into tables, and then uses tables to program, has more stable complexity than logical statements.)
For example,
bindEvents(){
v.el.on('click'.'#add1'.() = >{
m.data.n +=1
v.render(m.data.n)
})
v.el.on('click'.'#minus1'.() = >{
m.data.n-=1
v.render(m.data.n)
})
v.el.on('click'.'#mul2'.() = >{
m.data.n*=2
v.render(m.data.n)
})
v.el.on('click'.'#divide2'.() = >{
m.data.n/=2
v.render(m.data.n)
})
}
Copy the code
The above code is very similar, and each bound event is not very clearly expressed, using the table driver as follows
events:{
'click_#add1': 'add'.'click_#minus1': 'minus'.'click_#mul2': 'mul'.'click_#divide2': 'div',},add() {
m.update({n: m.data.n+1})},minus() {
m.update({n:m.data.n -=1})},mul(){
m.update({n:m.data.n *=2})},div() {
m.update({n:m.data.n /=2})},autoBindEvents(){
for(let key in c.events){
const value = c[c.events[key]]
const spaceIndex = key.indexOf('_');
const part1 = key.slice(0, spaceIndex);
console.log(part1);
const part2 = key.slice(spaceIndex+1)
console.log(part2);
console.log(value);
v.el.on(part1,part2,value)
}
}
Copy the code
This makes the code much clearer
Table driven programming is described in Code:
Table-driven methods are methods that allow you to look up information in a table without having to use logical statements (if or case) to find it. In fact, any information can be selected by the table. In simple cases, logical statements tend to be simpler and more straightforward. But as logical chains become more complex, tables become more attractive.
For example, if – else
function translate(term) {
if (term === '1') {
return '一'
} else if (term === '2') {
return '二'
} else if (term === '3') {
return '三'
} else {
return '????? '}}// If you want to add a new noun translation, you need to add an if-else logic, for example:
function translate(term) {
if (term === '1') {
return '一'
} else if (term === '2') {
return '二'
} else if (term === '3') {
return '三'
} else if (term === '4') {
// Add a new noun translation here
return 'four'
} else {
return '????? '}}Copy the code
Table driven
function translate(term) {
let terms = {
'1': '一'.'2': '二'.'3': '三'
}
return terms[term];
}
// If you want to add a new noun translation, just add a new entry to terms without modifying the entire logic
function translate(term) {
let terms = {
'1': '一'.'2': '二'.'3': '三'
'4': 'four' // Add a new noun translation
}
return terms[term];
}
Copy the code
Understanding modularity
How do I understand modularity?
1, after the code modularization, whether the integrity of the code or the later code maintenance has become clear and simple.
2, business modularization can make the business process more clear, easy to carry out the work, between each business module responsible for their module business, also avoid some unnecessary trouble, make the work efficiency will be higher.
3. Modularity is an efficient idea in my opinion, which provides a direction for code optimization and code reconstruction in the programming process.