[转] 前端中的MVC

MVC是一种设计模式，它将应用划分为3个部分：数据（模型）、展现层（视图）和用户交互（控制器）。其中：

M - MODEL（模型）

V - VIEW（视图）

C - CONTROLLER（控制器）

一个事件的发生是这样的过程：
　　1. 用户和应用产生交互。
　　2. 控制器的事件处理器被触发。
　　3. 控制器从模型中请求数据，并将其交给视图。
　　4. 视图将数据呈现给用户。
不用类库或框架就可以实现这种MVC架构模式。关键是要将MVC的每部分按照职责进行划分，将代码清晰地分割为若干部分，并保持良好的解耦。这样可以对每个部分进行独立开发、测试和维护。

M-模型

模型用来存放应用的所有数据对象。比如，可能有一个User模型，用以存放用户列表、他们的属性及所有与模型有关的逻辑。模型不必知道视图和控制器的逻辑。任何事件处理代码、视图模板，以及那些和模型无关的逻辑都应当隔离在模型之外。将模型的代码和视图的代码混在一起，是违反MVC架构原则的。模型是最应该从应用中解耦出来的部分。
当控制器从服务器抓取数据或创建新的记录时，它就将数据包装成模型实例。也就是说，我们的数据是面向对象的，任何定义在这个数据模型上的函数或逻辑都可以直接被调用。

V-视图

视图层是呈现给用户的，用户与之产生交互。在JavaScript应用中，视图大都是由HTML、CSS、JavaScript模板组成的。除了模板中简单的条件语句之外，视图不应当包含任何其他逻辑。将逻辑混入视图之中是编程的大忌，这并不是说MVC不允许包含视觉呈现相关的逻辑，只要这部分逻辑没有定义在视图之内即可。我们将视觉呈现逻辑归类为“视图助手”（helper）：和视图相关的独立的小工具函数。

C-控制器

控制器是模型和视图之间的纽带。控制器从视图获取事件和输入，对它们（很可能包含模型）进行处理，并相应地更新视图。当页面加载时，控制器会给视图添加事件监听，比如监听表单提交或按钮点击。然后，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。

在网页交互中，可以这样理解：

1.用户点击了表格中的数据

2.触发了点击事件，数据变成可编辑的状态（这个时候会出现一个文本框，但是里面还没有数据）

3.第2步的点击事件从存放数据的模型中把数据放到文本框中，形成一种数据由不可编辑到可编辑的一种效果

举个例子：

<select id="drinkSelect"><option value="coffee">coffee</option><option value="milk">milk</option><option value="juice">juice</option>
</select>
<p id="theColorOfDrink"></p><script type="text/javascript">
document.getElementById("drinkSelect").onchange = function() {var color;var colorOfDrink = {"coffee":"brown","milk":"white","juice":"orange"};color = colorOfDrink[this.value];document.getElementById("theColorOfDrink").innerHTML = color;
}
</script>

上面程序会把选中的饮料的颜色显示出来，如果用MVC，就是这个样子：

<select id="drinkSelect"><option value="coffee">coffee</option><option value="milk">milk</option><option value="juice">juice</option>
</select>
<p id="theColorOfDrink"></p><script type="text/javascript">
//showDrinkColor is Controller
var showDrinkColor = {start:function(){this.view.start();},set:function(drinkName){this.model.setDrink(drinkName);}
};
//Model
showDrinkColor.model = {colorOfDrink:{"coffee":"brown","milk":"white","juice":"orange"},selectedDrink:null,setDrink:function(drinkName){this.selectedDrink = this.colorOfDrink[this.selectedDrink]?drinkName:null;this.onchange();},onchange:function(){showDrinkColor.view.update();},getDrinkColor:function(){return this.selectedDrink?this.colorOfDrink[this.selectedDrink]:"white";}
};
//View
showDrinkColor.view = {start:function(){document.getElementById("drinkSelect").onchange = this.onchange;},onchange:function(){showDrinkColor.set(document.getElementById("drinkSelect").value);},update:function(){document.getElementById("theColorOfDrink").innerHTML = showDrinkColor.model.getDrinkColor();}
};
showDrinkColor.start();
</script>

进行分层之后，各个层次的功能清晰：V层控制界面显示，将界面与数据连接；M层存放数据，处理逻辑，C层用于连接M和V，但是，代码变复杂了。的确，层次越多，需要做的工作也越多，这里需要处理各层的通信。所以，具体怎么设计，还是要分析场景，因地制宜。

转载于:https://www.cnblogs.com/chris-oil/p/6146596.html

[转] 前端中的MVC相关推荐

简单谈谈js中的MVC
MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): ...
Java三层结构的概念_Java中的mvc和三层结构究竟是什么关系
原标题:Java中的mvc和三层结构究竟是什么关系一件事,要知其然往往很简单,要知其所以然通常不是那么容易,就如最近重新巩固spring的过程中,就觉得还有许多问题其实并不是十分明了. 屈指一算,手 ...
SLAM前端中的视觉里程计和回环检测
1. 通常的惯例是把 VSLAM 分为前端和后端.前端为视觉里程计和回环检测,相当于是对图像数据进行关联:后端是对前端输出的结果进行优化,利用滤波或非线性优化理论,得到最优的位姿估计和全局一致性地图. ...
前端中的this，指的是什么?
想要学习前端,短时间内是比较困难的,web前端要学习的内容有很多,今天小编就为大家详细的介绍一下前端中的this,指的是什么?来看看下面的详细介绍. 前端中的this,指的是什么? 1.this是什么 ...
WebForm中使用MVC
http://www.cnblogs.com/encoding/articles/3556046.html ********************************************** ...
idae中spring mvc解决问题application context not configured for this file于spring框架使用中的原因
idae中spring mvc解决问题application context not configured for this file于spring框架使用中的原因参考文章: (1)idae中spr ...
php中的MVC模式运用
[size=5][color=Red]php中的MVC模式运用[/color][/size] 首先我来举个例子: 一个简单的文章显示系统简单期间,我们假定这个文章系统是只读的,也就是说这个例子 ...
第80节:Java中的MVC设计模式
第80节:Java中的MVC设计模式前言了解java中的mvc模式.复习以及回顾! 事务,设置自动连接提交关闭. setAutoCommit(false); conn.commit(); conn ...
PHP如何用mvc,在PHP中使用MVC模式进行开发
1 ,软件结构发展过程中的3个阶段: Model1模式 , Model2模式 , MVC模式 1>Model1最重要的特点就是没有分层的概念 , 也就是说把界面和业务逻辑的处理放在一个文件中来 ...

[转] 前端中的MVC

[转] 前端中的MVC相关推荐

最新文章

热门文章