MVC必须掌握的概念

MVC必须掌握的概念

MVC 的概念

MVC即Model（模型）、View(视图)、Controller（控制器）。

M（模型）

主要用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听模型。一旦模型的数据发生改变，模型将通知有关的视图。

const m = {
   data:{ 数据 },
   create(){ 增加数据 },
   delete(){ 删除数据 },
   get(){ 获得数据 },
   update(){ 修改数据 }
}

V (视图)

主要是在页面上能看得到的东西。当前模型的数据发生变化，视图会相应地得到刷新自己的机会。

const v = {
 el:页面元素
 html:{ 显示页面的内容 },
 init(){v.el ... 元素初始化},
 render(){ 重新渲染 }
}

C (constroller)

C(contorller)主要定义用户界面对用户输入的响应方式，用于处理用户的行为和数据model的改变。

const c = {
  init(){ 初始化 },
  BindEvents(){ 绑定事件 }
}

EventBus

EventBus 可以实现对象之间的通信，当数据或某些特性发生改变时，能自动监听事件作出一些改变。

add(){
  data+=1;
  render(data);
},
minus(){
  data-=1;
  render(data);
},
multiply(){
  data*=2;
  render(data);
},
divide(){
  data/=2;
  render(data);
},

以上代码是进行加减乘除的运算，数据data改变后，对数据data进行渲染，调用到渲染函数render();

有没有觉得这样很麻烦，代码重复非常多，但是想表达的意思就是一个：data 只要进行更新，就调用一次渲染函数render()。

问题来了：有没有办法简化呢？只要data一改变，就自动调用render()函数呢？

演示：

const eventbus=$({});  // 使用jQuery库创建了一个eventbus。
 
let xx = {
  data:{
    n:100,
  }
}
 
updata(data){
  Object.assign(xx.data,data);  //批量赋值
 
  eventbus.trigger('updataed:xx.data');  //触发事件,事件名为：'updataed:xx.data'
}
 
/* 调用jquer封装的事件监听函数 */
eventbus.on('updataed:xx.data',()=>{
  render(xx.data);
})
 
/* 改进后的加减乘除函数 */
 
add(){
  updata({n:xx.data.n+1});
},
minus(){
  updata({n:xx.data.n-1});
},
multiply(){
  updata({n:xx.data.n*2});
},
divide(){
  updata({n:xx.data.n/2});

只要一调用updata()函数，就会eventbus.trigger('updataed:xx.data')

触发，然后事件监听就会触发，自动调用render()函数进行渲染。

EventBus的API

• on（监听)

const eventBus = $(window)
evnetBus.on("监听事件",() => {})

• trigger(触发事件）

const eventBus = $(window)
eventBus.trigger("事件")

• off（取消监听）

const eventBus = $(window)
eventBus.off("监听事件")

表驱动编程

表驱动编程是一种编程模式，是从哈希表里查找信息而不是使用逻辑语句if...else..，原因是当逻辑简单时，用逻辑语句简单，且代码简短，但逻辑复杂时，逻辑语句就很麻烦，代码很长，这时候就应该使用表驱动编程。

表驱动编程可以减少重复代码，只讲重要的信息放在表里，然后利用表来编程。

例子：

假设你要优化一段代码，这是优化之前的样子，又臭又硬。

howManyDays(year, month){
    if(month === 1 ||
        month === 3 ||
        month === 5 ||
        month === 7 ||
        month === 8 ||
        month === 10 ||
        month === 12
    ){
        return 31
    }else if(month === 2){
        return isLeapYear(year) ? 29 : 28
    }else{
        return 30
    }
}

我们用表驱动的方式进行优化：

howManyDays(year, month){
    const table = {
        1: 31, 3: 31, 5: 31, 7: 31, 8: 31, 10: 31, 12:31,
        4: 30, 6:30, 9: 30, 11: 30,
        2: isLeapYear(year) ? 29 : 28
    }
    return table[month]
}

模块化

MVC本身就是一个模块化，我们将一些零散的代码进行封装成块。并且这种模块可以重复使用，如此一来，可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。