《浅析MVC》

2021年09月07日 15:28 · 阅读 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];
复制代码

模块化

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