浅谈MVC

230 阅读3分钟

为什么需要MVC

MVC可以让代码的耦合性降低,并且提高灵活性和复用性

MVC分别的作用

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

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

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

js mvc模式.png

mvc模式的工作流程:

  1. 用户输入产生事件,传递给controller
  2. controller接受到相应的事件,传递给model
  3. model做出相应的数据处理,通知view改变数据
  4. view改变数据,展示给用户

view是model的观察者,当model数据发生改变,view就会产生对应的变化

class Model={
   data(){}    		//保存数据
   
   //管理数据的用法
   create(){}  		//增加数据
   remove(){}  		//删除数据
   update(){}			//改变数据
   get(){}		        //查看数据
}

class View={
   //管理元素,
 	el
  //管理HTML
	html:
   init(){
   //需要刷新的元素
    v.el:
   },
   //页面渲染
   render(){
        }
}

class Controller {
   // 初始化相关操作
   init() {}
   
   // 用户操作的事件
   events
 
   // 绑定事件,响应用户操作
   bindEvent() {}
}

EventBus

EventBus 就是将所以的事件放置在EventBus中,可以解决模块之间的通讯问题,同时让各个模块解耦

相应的API

on监听事件
off取消监听
trigger(emit)触发事件

eventBus.trigger('m:updated') // 触发事件
eventBus.on('m:updated', () => { console.log('here') }) '监听事件,听到后执行函数'

表驱动编程

《代码大全》对表驱动编程的描述:

表驱动方法是一种使你可以在表中查找信息,而不必用逻辑语句(if 或 case)来把他们找出来的方法。事实上,任何信息都可以通过表来挑选。在简单的情况下,逻辑语句往往更简单而且更直接。但随着逻辑链的复杂,表就变得越来越富于吸引力了。

简而言之:表驱动编程更像是定向子弹,一开始就确定目标且完全不考虑子弹是否会打偏的。

//逻辑语句
function translate(term) {
   if (term === '1') {
       return '一'
   } else if (term === '2') {
       return '二'
   } else if (term === '3') {
       return '三'
   } else {
       return '???'  
   }
}
//表驱动
function translate(term) {
   let terms = {
       '1': '一',
       '2': '二',
       '3': '三'
   }
   return terms[term];
}

关于模块的理解

模块化是为了解决代码量过多和功能混杂时产生的不易维护的混乱问题,将不同类的功能分解为不同的模块,这样可以降低代码耦合性或解耦,同时也可以为提高代码的可维护性、可拓展性性、健壮性。

模块的划分也应该围绕着代码设计的六大原则

  • 单一职责原则:实现类要职责单一;

  • 里氏替换原则:不要破坏继承体系;

  • 依赖倒置原则:面向接口编程;

  • 接口隔离原则:设计接口的时候要精简单一;

  • 迪米特法则:降低耦合;

  • 开闭原则:总纲,对扩展开放,对修改关闭;