我对MVC的理解

前言

我对于MVC的理解，应该是从大学开始学习JAVA的时候开始的。那个时候ssh三大框架还比较流行。从数据库建表，到前端和后台的开发，其中印象最深的就是后台创建一张表的时候，JAVA中的Hibernate建立表的实例对象，这就是像一个数据模型一样，然后我们会建立一些Sevice的服务，这些服务，可以利用接口类定义，然后到接口类的实现类（ServiceImpl）来进行表数据的增删改查，到前端的话，就是展示数据。那个时候，就感觉这就是一个MVC的模型。

后来，参加了工作，由于工作的需要，转向了前端，2015年的项目，公司引入了sea.js和Backbone框架，第一次接触到了前端的MVC或者说MVVM的框架。直至现在，这个项目还是用Backbone在进行MVC模式的开发。BackBone框架给我印象最深的就是，一般用Model去实现数据的查询操作，在这个Model里面实现各种接口的调用，就这相当于Model层在管理和控制数据一样，然后就是View,用View来实现页面的展示和事件的绑定，让我觉得这就是一个MV的框架，只是在V的里面会包含着C的逻辑。

MVC

对MVC简单的理解

1. M-Model:数据模型，负责操作数据。
2. V-View:视图，负责UI界面。
3. C-Controller:控制器，负责其他（事件的绑定等）

上图

伪代码示例

//利用Backbone框架实现MVC
var model = Backbone.Model.extend({
  defaults: {
    data:[]
  }
  //查询学生的数据
  getStudentInfo: function(){
  	return studetntService.getStudentInfo().then(fucntion(data){
		return this.set("data",data && data[0]);
	});
  }
});
var view = Baockbone.View.extend({
	    // 初始化方法
    initialize: function(options){
      this.el = options.el;
      this.render();
      this.bindEvnets();
    },
    //渲染界面
    render: function(){
    },
    //绑定事件
    bindEvnets: function(){
    }
})

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)
         }
     }
 }

模块化

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