MVC

1.MVC 三个对象分别做什么,给出伪代码示例

M--model 数据模型,负责和服务器进行交互,将请求到的数据传给controller

V--view,用户视图,HTML渲染

C--controller,监听并处理view的事件,更新和调用model,也负责监听model的变化并更新view。

const m={
    data:null,
    init(){},
    fetch(){},
    save(){},
    update(data){
    eventBus.trigger('')
},
    delete(){}
}
const v={
    el:null,
    html:`<div>模板</div>`,
    init(container){
       v.el=$(container)      
},
    render(n){}
}
const c={
    init(container){
    v.init()
    v.render()
    c.bindEvents()
    eventBus.on(event,()=>{v.render()}
},
    events:{},
    add(){},
    minus(){},
    bindEvents(){}
}

2.EventBus 有哪些 API,是做什么用的,给出伪代码示例

EventBus.on(),监听事件

EventBus.off(),取消监听

EventBus.trigger(),出发事件

class eventBus{
    constructor(){
        this._events=[]
    }
    on(event,fn){
        if(Array.isArray(event)){
            for(let i=0,l=event.length;i<l;++i){
                this.on(event[i],fn)
            }
        }else{
            (this._events[event]||(this._events[event]=[])).push(fn)
        }
    }
    off(event,fn){
        if(!arguments.length){//不传参数表示清空所有
            this._events=[]
        }
        if(Array.isArray(event)){
            for(let i=0,l=event.length;i<l;++i){
                this.off(event[i],fn)
            }
        }
        const cbs=this._events[event];
        if(!cbs){
            return
        }
        if(arguments.length===1){//不传fn表示清空所有监听函数
            this._events[event]=null
        }
        let cb,i=cbs.length
        while(i--){
            cb=cbs[i]
            if(cb===fn||cb.fn===fn){
                cbs.splice(i,1)
                break
            }
        }
    }
    trigger(event){
        let cbs=[...this._events[event]]
        if(cbs){
            for(let i=0,l=cbs.length;i<l;++i){
                try{
                    cbs[i].apply(null,[...arguments].slice(1))//接收event后可能附加的参数
                }catch(e){
                    new Error(e,`event handler for "${event}"`)
                }
            }
        }
    }
}
let test=new eventBus();
test.on('event1',(e)=>{console.log('hi'+e)});
test.trigger('event1',1);
test.off('event1');

3.表驱动编程是做什么的

 表驱动法是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if和case)。事实上,凡是能通过逻辑语句来选择的事物,都可以通过查表来选择。对简单的情况而言,使用逻辑语句更为容易和直白。但随着逻辑链的越来越发杂,查表法也就愈发显得更具吸引力。

events: {
  'click #add1' : 'add',
  'click #minus1' : 'minus',
  'click #mul2' : 'mul',
  'click #divide2' : 'div'
},
add() {
  m.update( data: {n: m.data.n +1})
},
minus() {
  m.update( data: {n: m.data.n -1})
},
mul() {
  m.update( data: {n: m.data.n *2})
},
div() {
  m.update( data: {n: m.data.n /2})
}

4.如何理解模块化

(1)对代码进行封装,降低代码复用率

(2)便于代码维护升级,专注于对模块的改进

(3)便于团队协作开发

posted @ 2021-10-30 20:09  HQL97  阅读(50)  评论(0)    收藏  举报