What do MVC three objects do
- M: Model (data Model), responsible for manipulating all data
- V: View, responsible for all UI interfaces
- C: Controller, which handles changes in user behavior and data
Here is the sample code:
const model = {
data: {
/ / data
},
create() { / /},
delete() { / / delete},
update(data) { / /} instead,
get() { / / check}
}
Copy the code
const view = {
el: null.// Element (view)
html: `
`.init() { // Initialize the element (view)},
render() { // Render element (view)}
}
Copy the code
const controller = {
init() { // Initializes the entire application
view.init() // Initialize the view
view.render() // Render the view
controller.autoBindEvents() // Bind events
},
autoBindEvents(){},add(){},minus(){},mul(){},div(){},}Copy the code
Second, the EventBus
EventBus is an event-driven message service bus.
- On: Listening event
- Trigger (emit): Triggers the event
- Off: Cancels listening
Here is an example of code:
// EventBus.js
class EventBus {
constructor() {
this._eventBus = $(window)}on(eventName, fn) {
return this._eventBus.on(eventName, fn)
}
trigger(eventName, data) {
return this._trigger.trigger(eventName, data)
}
off(eventName, fn) {
return this._eventBus.off(eventName, fn)
}
}
export default EventBus
Copy the code
// new.js
import EventBus from 'EventBus.js'
const eventBus = new EventBus()
eventBus.on()
eventBus.trigger()
eventBus.off()
Copy the code
What does table driver programming do
Table driven programming is a way to look up information in a table without having to use a lot of logical statements (if or Case) to find it. In simple cases, logical statements tend to be simpler and more straightforward. But as the logical chain gets more complex, so does the complexity. Tables can reduce repetitive code, put only important information in tables, and then program with tables, which have a more stable complexity than logical statements. Clouds scud across the author: listen to the rain link: www.jianshu.com/p/938da4774… Source: Jane Book
Example code (without table driver) :
if (n === '1') {
console.log('a')}else if (n === '2') {
console.log('b')}else if (n === '3') {
console.log('c')}else if (n === '4') {
console.log('d')}Copy the code
Example code (using table driven) :
const obj = {
'1': 'a'.'2': 'b'.'3': 'c'.'4': 'd'
}
const n = '2'
console.log(obj[n])
Copy the code