1. What do the three objects of MVC do?

M: Model: data preservation V: View: user interface C: Controller: pseudo-code realization of each part of business logic:

Model

Model = {
    data:{data or information that programmers need to manipulate} creat :{add data}deleteUpdate (data) {Object. Assign (m. ata, data)// Replace old data with new data
        eventBus.triiger('m.update')//eventBus triggers the 'M :update' message, notifying the View to refresh},get:{get data}}Copy the code

View

View = {
    el: The element to refresh,html:`
MVC
... The content displayed on the page
    init(){v.l: Element to refresh},render(){refresh page}}Copy the code

Controller

Controller = {
    init(){
        v.init()/ / the View initialization
        v.render()// First render
        c.autoBindEvent()// Automatic event binding
        eventBus.on('m:update'.() = >{v.render()})// View refreshes when eventBus touches 'm:update'
    }
    events:{events are hashed},method(){data = new data after change m.update(data)},autoBindEvents(){automatically bind events}}EventBusCopy the code

2. What apis do EventBus have and what functions do they have

The DOM event mechanism is the most common implementation of the publish-subscribe model, which is probably the most common programming model on the front end, listening for an event, and when that event occurs, the listener function that listens for that event is called. EventBus is one way to implement the publish-subscribe model. In fact, jQuery and Vue construct objects have methods to listen for events, we just need to construct an object, and then call its on and trriger methods to implement communication between components. Here are a few common Vue event apis and their internal implementations.

• Subscription to $on events

$on(eventName,callback)
// Parameter 1: event name Parameter 2: event function
// Check whether the current event name exists. If not, create a key for the event name
// Value is an array and callback is pushed into the array

const eventList = {};
const $on = (eventName, callback) = >{
    if(! eventList[eventName]){ eventList[evenName] = []; } eventList[eventName].push(callback) }Copy the code

• Unbinding of the $off event

$off(eventName,[callback]) // Const eventList = {} const eventList = {} const eventList = {}; const $off = (eventName,callback)=>{ if(eventList[eventName]){ if(callback){ let index = eventList[eventName].indexOf(callback); eventList[eventName].splice(index,1) } }else{ eventList[eventName].length = 0; } } export default = { $on, $emit, $off }Copy the code

• Firing of the $emit event

$emit(evnetName,[params])
// Parameter 1: event name Parameter 2: [parameter to pass]
// Check whether the name of the current event exists, if so, go through the number group, get all the functions and execute.
// Then pass params as an argument to the function

const eventList = [];
cosnt $emit = (eventName,params) = > {
    if(eventList[eventName]){
        let arr = eventList[eventName];
        arr.map((cb) = >{
            cb(params)
        })
    }
}
Copy the code

3. Table driver programming

Start with a simple example of table driver programming

function age(name){
    if(name==="Xiao Ming") {console.log("Age is"+10)}else if(name==="White") {console.log("Age is"+14)}else if(){
    
    }
    / /... , etc.
}
Copy the code

If we were to write a function to query the age, if we were to write an if else statement, how many people would have to write an if else statement, so our code would grow linearly, what if we had a hash table to record these mappings?

const list ={
    "Xiao Ming":10."White":14./ / and so on...
}
function age(name){
    if(name in list){
        console.log(name+"The age is."+list[name])
    }else{
        console.log("No trace of him.")}}Copy the code

In this way, our data is separated from the code part. The function body just looks up the table and prints the result. That’s the basic idea of table-driven programming.

4. How to understand modularity

Modularity is a historical necessity in order to achieve code reusability, ease of management and portability, and prevent scope conflicts. Because people are tired of repetition, MVC is what separates the functions of different parts of a page, the functions of different parts of a page, the data, the view, the control of a function.