《浅析MVC》

potS
151 阅读2分钟

MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。

这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三层：

1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。

2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。

3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。

这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。

换种说法，不仅编写程序可以用MVC模式，家用电器也可以用。

以家用微波炉为例，可以将它也理解成三层结构。最简单的情况下，微波炉的操作用两个转盘实现，一个控制温度，另一个控制时间。这两个转盘就是"视图层"（view），而其内部的微波产生装置则是"数据层"（Model），这里的"数据"需要理解成"核心功能"。至于将用户通过转盘输入的信息，转换成对微波产生器的操作，则用"控制层"来实现。

如果每一层都是独立的，那么微波炉外部更换一个新潮的外壳，或者内部更换更大功率的微波产生器，完全可以在不更改其他层的情况下实现。这就是MVC模式的优势。

MVC 三个对象分别做什么？

M:model（模型） 负责操作数据与服务器的交互，将请求到的数据传给controler

V:View （视图） 负责所有UI界面，比如el,templete，render 

C:controller（控制器）负责其他,比如初始化和事件,负责监听和处理View事件，并更新和调用 Model,负责监听Model数据变化，并更新View 

/** 模拟 Model, View, Controller */
var M = {}, V = {}, C = {};

/** Model 负责保存数据 */
M.data = "hello world";

/** View 负责把数据显示到屏幕(视图) */
V.render = (M) => { alert(M.data); }

/** Controller M,V的桥梁 */
C.handleOnload = () => { V.render(M); }

/** 在网页获取数据时使用到 Controller */window.onload = C.handleOnload;

const m={
  data={},
  create(){},
  delete(){},
  update(){},
  get(){}
}

const v={
  el:null,
  html:`代码`,
  init(container){
    v.el=$(container)
  },
  render(n){}
}

const c={
  init(constainer){}
  events:{事件}
  add(){执行}
  minus(){执行}
  update(){执行}
  get(){执行}
  autoBindEvents(){逻辑}
}

EventBus 有哪些 API，是做什么用的？

_self.getEventBus
	方法：getEventBus:function(){}
	描述：直接返回前端EventBus对象，不推荐直接使用。	
_self.subscribeEvent
	方法：subscribeEvent:function(event,fn,pointcut){}
	描述：注册事件，并指定实现方法和插入点
	参数：event：字符串形式事件名，命名规则为Event或ActionEvent结尾
	      fn：实现方法
	      插入点类型：after、overwrite、before      
_self.unSubscribeEvent
	方法：unSubscribeEvent:function(event){}
	描述：取消注册事件
	参数：event：字符串形式事件名，命名规则为Event或ActionEvent结尾	
_self.fireEvent
	方法：fireEvent:function(event){}
	描述：触发某个具体事件，执行这个事件对于的实现方法队列
	参数：event：字符串形式事件名，命名规则为Event或ActionEvent结尾
	其他参数：可以增加一些后续参数
Handler实现说明：
	参数：接收fireEvent方法传递过来的参数
	特殊参数e：只有按钮绑定的页面功能才有值，手工调用不会有e的。页面功能代码生成时，默认会生成这个e，值为jquery.event
	返回值：无返回值的处理，只能通过返回值确定是否继续执行后续的方法队列
	        true/无：继续执行后续的实现方法队列
	        false：停止执行后续的实现方法队列    
	        其他：返回true
	Handle队列中数据的传递：只能利用页面的全局变量，本身没有提供处理机制

表驱动编程是做什么的？

Table-Driven Approach

解决if else面对多种情况的情形，以表的形式进行获取数据，通过下标索引来查

methods{
  add(){执行}
  delete(){执行}
  minus(){执行}
  ...
}

如何理解模块化:

模块化就是把一个模块的代码放在一个文件里，再进行引入，简化了代码之间的影响

//app1.js
let string=`内容`
import default string//导出

//main.js
import $ from `string`//引入

模块化的有点：可以避免命名冲突，减少命名空间污染，更好的分离，按需加载，更高的复用性，高可维护性。

关于MVC的变化历程可参考文章《前端MVC变形记》：efe.baidu.com/blog/mvc-de…


avatar
文章
阅读
粉丝