1, What the three MVC objects do respectively, and give pseudo code examples

MVC (Model view controller) pattern is an architecture design pattern in software engineering. It divides the software system into three basic parts: Model, view and controller.

• Model - used to encapsulate the data related to the business logic of the application and the processing method of the data

Model layer
Model = {
    data: { Required data }，
    create(): { Add data },
    delete(): { Delete data },
    update() {Update data},
    get():{ get data } 
}

• View - the graphical interface designed by the interface designer is the interface that the user sees and interacts with

View layer
View = {
    el:null,
    html: `......` //View template
    init(){Initialization page},
    render(){ Refresh page }
}

• Controller - a bridge connecting views and models to handle business logic operations. It handles events and responds. "Events" include user behavior and changes on the data Model.

Controller = {
   init(){
      v.init() // View initialization
      v.render() // First render
      c.autoBindEvents() // Automatic event binding
      eventBus.on('m:update', () => { v.render() }) // When eventBus triggers'm:update ', the View is refreshed
   },
   events:{ Events are recorded as hash tables }，
   method() {
      data = New data after change
      m.update(data)
   }，
   autoBindEvents() { Auto bind events }

2, What API s does EventBus have and what it is used for? Give pseudo code examples

EventBus, also known as event bus, can be used to monitor and communicate between components.

API:

• EventBus.on() listens for events: when m:updated is triggered, execute some contents

EventBus.on(eventName,callback)  
//Parameter 1: event name parameter 2: event function
//Judge whether the current event name exists. If it does not exist, create a key value as the event name
//value is an array and pushes callback into the array
 
const eventList = {};
EventBus.on = (eventName,callback)=>{
     if(!eventList[eventName]){
         eventList[eventName] = [];
     }
     eventList[eventName].push(callback)
}

• EventBus.trigger(): when an event is executed, eventBus triggers m:updated

EventBus.trigger(eventName,[params]) 
//Parameter 1: event name parameter 2: [parameters to be passed]
//Judge whether the name of the current event exists. If so, traverse the array to get all functions,
//And execute. Then pass params as an argument to the function
const eventList = {};
EventBus.trigger = (eventName,params)=>{
    if(eventList[eventName]){
         let arr = eventList[eventName];
         arr.map((cb)=>{
             cb(params)
         })
    }
}

eventBus.trigger('event') //Trigger event 
eventBus.on('event',()=>{ //Listening events
     do something()
 })

• EventBus.off, unbind event

EventBus.off(eventName,[callback])  
//Parameter 1: event name parameter 2: [event function]
//Judge whether the current event name exists. If so, continue to judge whether the second parameter exists. If so, find the corresponding index / / and remove the function from the array
//If it does not exist, the entire array is emptied
 
const eventList = {};
EventBus.off = (eventName,callback)=>{
    if(eventList[eventName]){
          if(callback){
                 let index = eventList[eventName].indexOf(callback);
                 eventList[eventName].splice(index,1)
           }
    }else{
           eventList[eventName].length = 0; 
    }
}

3, What does table driven programming do

Sample code

function age(name){
    if(name==="Xiao Hong"){
        console.log("Age is"+10)
    }else if(name==="petty thief"){
        console.log("Age is"+14)
    }else if(){
       
    }
    ....
}

• If we want to write a function to query the age, if we use if else, the amount of code increases linearly. However, it is much easier to record these mapping relationships with a hash table

const list={
    "Xiao Hong":10,
    "petty thief":14,
    //wait...
}
function age2(name){
    if(name in list){
        console.log(name+"What is your age"+list[name])
    }else{
        console.log("No one was found")
    }
}

• The data part has been separated and the division of labor is clear. The main body of the function just looks up in the table and then outputs the results, which is the basic idea of table programming.

4, How to understand modular

• Modular programming is a software design technology that emphasizes separating the functions of computer programs into independent and changeable "modules". It makes each module contain all things necessary to perform a unique aspect of the expected function.
• Modularization can reduce code coupling, reduce duplicate code, improve code reusability, and make the project structure clearer and easy to maintain.
• To put it simply: put the code in a file. If other files need to be used, just import them directly.