谈一谈MVC

本篇博客是作为个人自学记录，如有不足之处，请批评指正。

MVC 是一种设计模式

在没有了解MVC之前，我们些项目的时候，会把所有的代码都写在同一个JS文件中，而且到最后会发现会有很多重复的代码，十分杂乱，对后续的维护带来了比较大的麻烦

所以，前端开发者使用MVC结构模式对代码进行优化

MVC 分别是什么

• 每个模块可以写成上个对象：M、V、C
• M：Model （数据模型）负责操作数据
• V：View（视图）负责 UI 界面
• C：Controller（控制器）负责其他

下面由代码示例

// M 用来存放数据
const M = {
  data: {数据},
}

// V 用来存放视图相关
const V = {
  html: `代码`
}

// C 用来存放其他代码
const C = {
  init(){} // 初始化
}

EventBus 常用 api

EventBus可以用来进行组件之间的监听和通信。

• on（监听事件）
• trigger（触发事件）
• off（取消监听）

eventBus.trigger('m:updated') // 触发事件,大叫'm 已经更新了'
eventBus.on('m:updated', () => { console.log('here') }) '监听事件，听到后执行函数'

表驱动编程是做什么的

表驱动法,这里的表是指（哈希表），从哈希表里查找信息，代替if else方法，逻辑语句往往更简单而且更直接。

代码示例：

const week = {
  "星期日"，
  "星期一"，
  "星期二"，
  "星期三"，
  "星期四"，
  "星期五"，
  "星期六"，
}
let day = week[day]

例如如果要一个可以返回每个月中天数的函数（为简单起见不考虑闰年），用if else：

function iGetMonthDays(iMonth) {
  let iDays;
  if(1 == iMonth) {iDays = 31;}
  else if(2 == iMonth) {iDays = 28;}
  else if(3 == iMonth) {iDays = 31;}
  else if(4 == iMonth) {iDays = 30;}
  else if(5 == iMonth) {iDays = 31;}
  else if(6 == iMonth) {iDays = 30;}
  else if(7 == iMonth) {iDays = 31;}
  else if(8 == iMonth) {iDays = 31;}
  else if(9 == iMonth) {iDays = 30;}
  else if(10 == iMonth) {iDays = 31;}
  else if(11 == iMonth) {iDays = 30;}
  else if(12 == iMonth) {iDays = 31;}
  return iDays;
}

用表驱动（包括闰年判断）：

const monthDays = [
  [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
  [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
]
function getMonthDays(month, year) {
  let isLeapYear = (year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0) ? 1 : 0
  return monthDays[isLeapYear][(month - 1)];
}
console.log(getMonthDays(2, 2000))

模块化

通过不同节点的功能、结构... 分出多个模块，每个互相独立不受干扰，修改维护起来也很方便。 模块化可以降低代码耦合度，减少重复代码，提高代码重用性，避免意大利面式代码并且在项目结构上更加清晰，便于维护。