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)便于团队协作开发

浙公网安备 33010602011771号