关于MVC

402 阅读3分钟

MVC基本概念

MVC:设计模式的一种,将代码模块化,解决页面代码重复

使用MVC的目的:使程序具有对象化的特征,维护过程变得简单。 image.png

  • M:Moudle,模型,负责操作所有的数据(数据保存)
    let m = {}; // 创建这个应用对象

    m.Model = function() {
    let value = 0; // 需要操作的数据

    /* 操作数据的方法 */
    this.add = function(n) {
        if (val < 100) value += n;
    };

    this.sub = function(n) {
        if (value > 0) value -= n;
    };

    this.getValue = function() {
        return value;
    };
};

  • V:View,视图,负责所有的UI界面(用户界面)
m.View = function() {

    /* 视图元素 */
    let $num = $('#num'),
    let $incBtn = $('#increase'),
    let $decBtn = $('#decrease');

    /* 渲染数据 */
    this.render = function(model) {
        $num.text(model.getValue() + 'n');
    };
};

  • C:Controller,控制器,负责其他的部分(业务逻辑)
m.Controller = function() {
    let model = null,
    let view = null;

    this.init = function() {
        /* 初始化Model和View */
        model = new m.Model();
        view = new m.View(this);

        /* View向Model注册,当Model更新就会去通知View啦 */
        model.register(view);
        model.notify();
    };

    /* 让Model更新数值并通知View更新视图 */
    this.increase = function() {
        model.add(1);
        model.notify();
    };

    this.decrease = function() {
        model.sub(1);
        model.notify();
    };
};

MVC的优缺点

优点

  • 耦合性低,M,V,C三个模块相互之间影响很小,对其中一个模块进行更新操作等,不会过于影响其他两个模块。
  • 重用性高,MVC允许各种不同样式的视图来访问同一个服务器中的代码,只需要覆盖View的实现方式即可。
  • 部署快,可维护性高:使用MVC模式可以使开发时间大大减少,由于模块分离,开发者可以一个一个模块按需实现,无需左右顾虑。且分离了视图和逻辑层,维护起来更加方便。

缺点

  • 调试困难:因为模型和视图要严格的分离,这样也给调试应用程序带来了一定的困难,每个构件在使用之前都需要经过彻底的测试。
  • 增加系统结构和实现的复杂性:对于简单的界面,严格遵循MVC,使模型、视图与控制器分离,会增加结构的复杂性,并可能产生过多的更新操作,降低运行效率。
  • 不适用于中小型规模应用程序

EventBus

EventBus能够简化各组件间的通信,让我们的代码书写变得简单,能有效的分离事件发送方和接收方(也就是解耦的意思),能避免复杂和容易出错的依赖性和生命周期问题。

相关API

  • on(监听事件)
eventBus.on('监听内容',()=>{
    相关操作
})
  • trigger(触发事件)
eventBus.trigger('监听的内容')
/*触发绑定在监听内容上的事件*/
  • off(取消事件)
eventBus.off('监听内容')
/*取消绑定在监听内容上的事件*/

表驱动编程

表驱动编程的意义在于逻辑与数据的分离

适用场景

  • 当出现大批类似但不重复的代码时:提取重要数据,录入哈希表,通过遍历哈希达到相同的实现效果

示例

  • 不使用表驱动法编程
function toChinese(num){
    if(num == 1){
        return '一'
    } else if(num == 2){
        return '二'
    } else if(num == 2){
        return '三'
    }
}
  • 使用表驱动法编程
function toChinese(num){
    const table = {
        1: '一',
        2: '二',
        3: '三'
    }
    return table[num]
}

⭐表驱动方法可以使你不必使用逻辑语句来查询信息,而是在表中查询信息,简单的情况下,逻辑语句往往更直接有效,但随着逻辑越来越复杂,表驱动方法就更为有效了

关于模块化

  • 代码模块化使得不同模块之间的相互影响减到最小,也使得维护代码更加简单。开发人员甚至可以专注开发一个模块而不是瞻前顾后地考虑代码之间的相互影响,也可针对不同模块进行针对性开发。
  • 其次,模块化也使得代码的利用率提高,大大增加了开发的效率,使代码的可读性,可维护性增加。 参考博文--《MVC模式简介》