怎么办!我看不懂MVC

235 阅读2分钟

参考文章:efe.baidu.com/blog/mvc-de… 提前预警:这篇博客是集百家之思想

一:什么是MVC

MVC模式的意思是,软件可以分成三个部分。
M(model)层:数据保存,Model 将新的数据发送到 View,用户得到反馈
V(view)层:用户界面。View 传送指令到 Controller
C(controller)层:业务逻辑,Controller 完成业务逻辑后,要求 Model 改变状态
所有通信都是单向的。
各层之间的通信如图所示:

Model层用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法。这里我们把需要用到的数值变量封装在Model中,并定义了add、sub、getVal三种操作数值方法。

var myapp = {}; // 创建这个应用对象

  myapp.Model = function() {

    var val = 0; // 需要操作的数据

    /* 操作数据的方法 */

    this.add = function(v) {
      if (val < 100) val += v;
    };

    this.sub = function(v) {
      if (val > 0) val -= v;
    };

    this.getVal = function() {
      return val;
    };

};

View作为视图层,主要负责数据的展示。

myapp.View = function() {

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

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

};

二:EventBus 有哪些 API,是做什么用的,给出伪代码示例

当一个事件执行,eventBus 触发 m:updated eventBus.trigger('m:updated')

eventBus 监听 m:updated,当 m:updated 触发时,执行一些内容

eventBus.on('m:updated',()=>{
     v.render(m.data.n)
 })

三:表驱动编程是做什么的

表驱动方法编程(Table-Driven Methods)是一种编程模式,适用场景:消除代码中频繁的if else或switch case的逻辑结构代码,使代码更加直白.

c = {
    events:{
        'click #add1':'add',
        'click #minus1':'minus',
        'click #mul2':'mul',
        'click #divide2':'div'
    },
    autoBindEvents(){
        for(let key in c.events){
            const value = c[c.events[key]]
            const spaceIndex = key.indexOf(' ')
            const part1 = key.slice(0, spaceIndex)
            const part2 = key.slice(spaceIndex + 1)
            v.el.on(part1,part2,value)
        }
    }
}

四:我是如何理解模块化的

这是我抄的别人的 一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要遵循一定的规范,各行其是就都乱套了

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)并进行组合。模块的内部数据的实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通信。这则就是模块化。模块化可以降低代码耦合度,减少重复代码,提高代码重用性,并且在项目结构上更加清晰,便于维护。

我自己的理解 我觉得模块化就是把功能按模块分开,各干各的,我们彼此搭配,但是又互不干扰,这样的话工作效率会更高,而且代码也会让人看了觉得整齐易懂。

MVVM

MVVM是双向绑定的思想,react单向数据流:数据自下而上,