浅析mvc

前言:

MVC 三个对象分别做什么，伪代码示例 EventBus 有哪些 API，是做什么用的，伪代码示例 我是如何理解模块化的

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

视图view是它在屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地得到刷新自己的机会。

控制器controller定义用户界面对用户输入的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据model上的改变。 model数据层

const m = {
data:,
update(data){
Object.assign(m.data, data)
eventBus.trigger('m.updated')
},
}

视图层view（视图），负责所有UI界面

const v = {
html:`<section id="app1">
            <div class="output">
                <span id="number">100</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>
        </section>`
}

控制层controller

const c ={ init(container){ v.init(container) v.render(m.data.n) c.autoBindEvents() eventBus.on('m:updated',()=>{ v.render(m.data.n) }) } }

**EventBus**
假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想=通知 B页面。
```javascript


<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; 
</script>

接下来，我们需要在 B页面 中接收这则消息。

<template>
  <p>{{msg}}</p>
</template>

<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  }
};
</script>

在vue中用到的方法

// vue中发送消息
EventBus.$emit(channel: string, callback(payload1,…))

// vue中监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

//  
eventBus.on
eventBus.trigger

---

表驱动编程是做什么的 表驱动方法是一种使你可以在表中查找信息，而不必用很多的逻辑语句（if或Case）来把它们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富有吸引力了。 用法详解 代码有很多重复的地方，那么使用表驱动编程法

const day = new Date().getDay()
let day_zh;
if(day === 0){
    day_zh = '星期日'
}else if(day === 1) {
    day_zh = '星期一'
}
...
else{
    day_zh = '星期六'
}

// 或者 用 switch case
switch(day) {
    case 0:
        day_zh = '星期日'
        break;
    case 1:
        day_zh = '星期一'
        break;
        ...
}

const week = ['星期日', '星期一',..., '星期六']
const day = new Date().getDay()
const day_zh = week[day]

我是如何理解模块化的 当项目足够大的时候会有很多的功能,每一个具体的功能对应着一个模块,当我们把每一个功能封装成一个完善的模块,这便于以后进行维护代码。并且代码清晰，不会显得繁杂臃肿。并且可以解决命名冲突，提高代码的可读性，解决繁琐的文件依赖等问题。