《浅析MVC》

·  阅读 61

MVC是一种架构设计的模式,它包括三类对象分别是

  • Model模型:用于封装,一般有一个或多个视图来监听model,当model变化会通知相关的view。
  • View视图:对html的渲染,用来描绘model的当前状态,当model数据变化,视图view也会刷新。
  • Controller控制器:面对用户输入的响应方式,用来控制应用程序的流程,处理用户行为和数据model上的改变。

用代码分别表示为

  • Model模型
//数据相关放入m
const m ={
   data:{
     n:parseInt(localStorage.getItem('n'))
},
create(){},
delete(){},
update(data){
   Object.assign(m.data,data)
   eventBus.trigger('m:update')
   localStorage.setItem('n',m.data.n)
  },
  get(){}
}
复制代码
  • View视图
const v = {
el:null,
html:`
<div>
    <div class="output">
      <span id="number">{{n}}</span>
    </div>
    <div class="actions">
      <button id="add1">+1</button>
      <button id="minus1">-1</button>
      <button id="mul2">*2</button>
      <button id="divide2">÷2</button>
    </div>
  </div>
`,
 init(container){
   v.el = $(container)
 },
 render(n){
   if(v.el.children.length !==0) v.el.empty()
   $(v.html.replace(('{{n}}'mn))
     .appendTo(v.el)
   }
 }
复制代码
  • Controller控制器
const c = {
  init(container) { 
   v.init(container) 
   v.render(m.data.n) 
   c.autoBindEvents() 
   eventBus.on('m:updated', () => { 
    console.log('here') 
    v.render(m.data.n) 
  }) 
}, 
events: {
  'click #add1': 'add',
  'click #minus1': 'minus',
  'click #mul2': 'mul',
  'click #divide2': 'div', 
}, 
add() {
  m.update({n: m.data.n + 1}) 
}, 
minus() { 
  m.update({n: m.data.n - 1}) 
},
mul() { m.update({n: m.data.n * 2}) 
}, 
  div() { m.update({n: m.data.n / 2}) 
}, 
autoBindEvents() {
   for (let key in c.events) {
     const value = c[c.events[key]]
     const spaceIndex = key.indexOf(' ') 
     const part1 = key.slice(0, spaceIndex) 
     const part2 = key.slice(spaceIndex + 1) 
     v.el.on(part1, part2, value) 
    } 
  } 
}
复制代码

EventBus

eventbus主要负责对象间通信,提供了on、off和trigger等API,on用于监听,trigger用于触发事件。eventBus 可以满足最小知识原则,m 和 v 互相不知道对方的细节,但是却可以调用对方的功能。代码如下

// eventBus触发事件
eventBus.trigger('m:updated')

// eventBus监听事件
eventBus.on('m:updated',()=> {
    v.render(m.data.n)
})

// eventBus移除事件
eventBus.off('m:updated',()=>{
    v.render(m.data.n)
})
复制代码

表驱动编程

表驱动编程就是通过一种数据结构哈希表来优化代码,使代码不那么冗长,从而达到模块化的处理。

getweek(value){
    this.dayOfweek = value;
    if(this.dayOfweek ==1){
         this.week = '星期一';
       }else if(this.dayOfweek ==2){
         this.week = '星期二';
       }else if(this.dayOfweek ==3){
         this.week = '星期三';
       }else if(this.dayOfweek ==4){
         this.week = '星期四';
       }else if(this.dayOfweek ==5){
         this.week = '星期五';
       }else if(this.dayOfweek ==6){
         this.week = '星期六';
       }else if(this.dayOfweek ==0){
         this.week = '星期天';
       }
}
复制代码

优化后的代码:

let weekdayMap = ['星期一','星期二','星期三','星期四','星期五','星期六','星期天'];
this.Week = weekdayMap[value];
复制代码

模块化

代码模块化有效的避免的代码重复,每个模块都能实现特定的功能,代码直接互相不干扰但却可以通过一些方法互相调用,出现错误也能更快确定是哪一模块出现错误,方便后期维护。

分类:
前端
标签:
分类:
前端
标签: