[转] 前端中的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,但是,代码变复杂了。的确,层次越多,需要做的工作也越多,这里需要处理各层的通信。所以,具体怎么设计,还是要分析场景,因地制宜。
[转] 前端中的MVC的更多相关文章
- 简单谈谈js中的MVC
MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): ...
- angular中的MVC思想
MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳.在学习angular的过程中,我在网上查找关于angular MVC ...
- 【转】前端Web开发MVC模式-入门示例
前端Web开发MVC模式-入门示例 MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:cont ...
- 稍微谈一下 javascript 开发中的 MVC 模式
随着前台开发日益受到重视,客户端代码比重日益增加的今天,如何在javascript开发里应用MVC模式,这个问题似乎会一直被提到,所以偶在这里粗略的谈一下自己的看法吧. MVC模式的基本理念,是通过把 ...
- 浅谈js中的MVC
MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器) 本文将用一个经典的例子todoList来展开 一个事件发生的过程(通信单向流动): 1.用户在视图V ...
- 生活中的MVC模式,一个吃货的理解。
以下是生活中对于MVC模式的领悟,虽然可笑,轻喷. 2015年 8月 26日 M => Model 模型 我认为叫做模具更好的理解.批量加工生产具有相同特征的东西. ...
- 【干货理解】理解javascript中实现MVC的原理
理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程 ...
- 说说移动前端中 viewport (视口)
转载网络资源的文章:来源不详~~ 移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dip ( device-independent pixel 设 ...
- 移动前端中viewport(视口) 转
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间 ...
随机推荐
- Apache与Tomcat服务器
Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.在Apache基金会里面Apache S ...
- How to create vlan on Linux (with Cisco Catalyst Switch)
In this article I want to share to you on how to create and configure vlan on Linux through Cisco Ca ...
- Java排序算法——基数排序
- github提交代码时,报permission denied publickey
在像github提交代码时,报permission denied publickey. 查找了一下,可能是因为github的key失效了. 按照以下步骤,重新生成key. ssh-keygen 一路默 ...
- PAT MOOC dataStructure 4-1
数据结构练习 4-1 AVL 树 1. 题目: Input Specification: Each input file contains one test case. For each case, ...
- Linux/CentOS 搭建 SVN 项目
1.安装svn yum -y install subversion 2.创建svn仓库路径 mkdir -p /opt/svn/project1 mkdir -p /opt/svn ...
- mrjob 使用 mongoldb 数据源【转】
最近做的事情是用mrjob写mapreduce程序,从mongo读取数据.我的做法很容易也很好懂,因为mrjob可以支持sys.stdin的读取,所以我考虑用一个python程序读mongo中的数据, ...
- PROJ4初探(转并整理格式)
PROJ4初探(转并整理格式) Proj4是一个免费的GIS工具,软件还称不上. 它专注于地图投影的表达,以及转换.采用一种非常简单明了的投影表达--PROJ4,比其它的投影定义简单,但很明显.很容易 ...
- poj1703_Find them, Catch them_并查集
Find them, Catch them Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 42451 Accepted: ...
- 设置UITableView的separatorInset值为UIEdgeInsetsZero,分隔线不最左端显示的问题
一.问题描述 UITableView分割线要显示到最左端 查看UITableView的属性,发现设置separatorInset的值可以自定义分割线的位置. @property (nonatomic) ...