什么事MVC?什么是MVC!
MVC 是一种设计模式,它将应用划分为3 个部分:数据(模型)、展现层(视图)和用户交互层(控制器)。
换句话说,一个事件的发生是这样的过程:
1. 用户和应用产生交互。
2. 控制器的事件处理器被触发。
3. 控制器从模型中请求数据,并将其交给视图。
4. 视图将数据呈现给用户。
现在来看一个真实的例子,图1-1 展示了在Holla 中如何发送新的聊天消息。
▲图1-1:从Holla中发送一个新的聊天消息
1. 用户提交一个新的聊天消息。
2. 控制器的事件处理器被触发。
3. 控制器创建了一个新的聊天模型(Chat Model)记录。
4. 然后控制器更新视图。
5. 用户在聊天窗口看到新的聊天消息。
我们不用类库或框架就可以实现这种MVC 架构模式。关键是要将MVC 的每部分按照职责进行划分,将代码清晰地分割为若干部分,并保持良好的解耦。这样可以对每个部分进行独立开发、测试和维护。
下面来详细讲解MVC 中的各个组成部分。
模型
模型用来存放应用的所有数据对象。比如,可能有一个User 模型,用以存放用户列表、它们的属性及所有与模型有关的逻辑。
模型不必知晓视图和控制器的细节,模型只需包含数据及直接和这些数据相关的逻辑。任何事件处理代码、视图模板,以及那些和模型无关的逻辑都应当隔离在模型之外。将模型和视图的代码混在一起,是违反MVC 架构原则的。模型是最应该从你的应用中解耦出来的部分。
当控制器从服务器抓取数据或创建新的记录时,它就将数据包装成模型实例。也就是说,我们的数据是面向对象的(object oriented),任何定义在这个数据模型上的函数或逻辑都可以直接被调用。
因此,不要这样做:
var user = users["foo"];destroyUser(user);//而要这样做:var user = User.find("foo");user.destroy();
第1 段代码没有命名空间的概念,并且不是面向对象的。如果在应用中定义了另一个destroyUser() 函数的话,两个函数就会产生冲突。我们应当确保全局变量和函数的个数尽可能少。在第2 段代码中,destroy() 函数是存放在命名空间User 的实例中的,User 中存放了所有的记录。当然这只是理想状况,因为我们控制了全局变量的个数,更好地避免了潜在的冲突,这种代码更加清晰,而且非常容易做继承,类似 destroy() 的这种函数就不用在每个模型中都定义一遍了。
在第3 章中我们会更深入地讲解模型,其中包含从服务器下载数据及创建对象关系映射(ORM)。
视图
视图层是呈现给用户的,用户与之产生交互。在JavaScript 应用中,视图大都是由HTML、CSS 和JavaScript 模板组成的。除了模板中简单的条件语句之外,视图不应当包含任何其他逻辑。
实际上,和模型类似,视图也应当从应用的其他部分中解耦出来。视图不必知晓模型和控制器中的细节,它们是相互独立的。将逻辑混入视图之中是编程的大忌。
这并不是说MVC 不允许包含视觉呈现相关的逻辑,只要这部分逻辑没有定义在视图之内即可。我们将视觉呈现逻辑归类为“视图助手”(helper):和视图有关的独立的小型工具函数。
来看下面的例子,其在视图中包含了逻辑,这是一个反例,平时不应当这样做:
// template.html
${ formatDate(this.date) }
在这段代码中,我们把formatDate() 函数直接插入视图中,这违反了MVC 的原则,结果导致标签看上去像大杂烩一样不可维护。可以将视觉呈现逻辑剥离出来放入视图助手中,正如下面的代码就避免了这个问题,可以让这个应用的结构满足MVC。
// helper.jsvar helper = {};helper.formatDate = function(){ /* ... */ };// template.html${ helper.formatDate(this.date) }
此外,所有视觉呈现逻辑都包含在helper 变量中,这是一个命名空间,可以防止冲突并保持代码清晰、可扩展。
不要太在意视图和模板的细节,我们会在第5 章中有详细讲述。本小节的目的只是简单介绍视图和MVC 架构模式之间的联系。
控制器
控制器是模型和视图之间的纽带。控制器从视图获得事件和输入,对它们(很可能包含模型)进行处理,并相应地更新视图。当页面加载时,控制器会给视图添加事件监听,比如监听表单提交或按钮点击。然后,当用户和你的应用产生交互时,控制器中的事件触发器就开始工作了。
不用使用类库和框架也能实现控制器,下面这个例子就是使用简单的jQuery 代码来实现的:
var Controller = {};// 使用匿名函数来封装一个作用域
(Controller.users = function($){var nameClick = function(){/* ... */};// 在页面加载时绑定事件监听$(function(){$("#view .name").click(nameClick);});})(jQuery);
我们创建了users 控制器,这个控制器是放在Controller 变量下的命名空间。然后,我们使用了一个匿名函数封装了一个作用域,以避免对全局作用域造成污染。当页面加载时,程序给视图元素绑定了click 事件的监听。
正如你所看到的,控制器并不依赖类库或框架。然而,为了构建需要的一个完整的MVC框架,我们需要将模型从视图中抽离出来。控制器和状态的详细内容会在第4 章详细讲解。
什么事MVC?什么是MVC!相关推荐
- The prefix “mvc“ for element “mvc:annotation-driven“ is not bound 异常
The prefix "mvc" for element "mvc:annotation-driven" is not bound 异常 参考文章: (1)Th ...
- ASP.NET开源MVC框架Vici MVC(三)HELLO WORD
ASP.NET开源MVC框架Vici MVC 最大的特点是支持ASP.NET2.0 iis不需要额外的设置 官方实例下载地址http://viciproject.com/wiki/Projects/ ...
- [.net 面向对象程序设计深入](4)MVC 6 —— 谈谈MVC的版本变迁及新版本6.0发展方向...
[.net 面向对象程序设计深入](4)MVC 6 --谈谈MVC的版本变迁及新版本6.0发展方向 1.关于MVC 在本篇中不再详细介绍MVC的基础概念,这些东西百度要比我写的全面多了,MVC从1.0 ...
- mvc中的mvc分别指什么_什么是MVC,它像三明治店吗?
mvc中的mvc分别指什么 by Adam Wattis 通过亚当·沃蒂斯(Adam Wattis) 什么是MVC,它像三明治店吗? (What is MVC, and how is it like ...
- [MVC]Asp.net MVC中的Session
[MVC]Asp.net MVC中的Session 2008年12月9日 分类: ASP.NET, ASP.NET MVC, C#, 开发笔记 最近使用ASP.NET MVC 中的Controller ...
- spring mvc示例_Spring MVC示例
spring mvc示例 Welcome to Spring MVC Example. Sometime back in Spring MVC Tutorial, I explained how to ...
- java mvc mvvm_从MVC到MVVM(为什么要用vue)
axios 功能类似于jQuery.ajax. axios.post() axios.get() axios.put() axios.patch() axios.delete() 比jQuery.aj ...
- 【MVC、Spring MVC介绍、区别、执行流程】
介绍 MVC(Model-View-Controller)是一种软件架构模式,其中应用程序被划分为三个部分:模型(Model).视图(View)和控制器(Controller).MVC框架的主要目标是 ...
- 了解MVC模式与MVC框架
MVC MVC的概念 模型(Model) 控制器(Controller) 视图(View) MVC工作流程 Java MVC框架 Struts1框架 Struts2框架 Spring MVC框架 JS ...
- MVC 和Spring MVC
MVC 和Spring MVC 我们都知道常说的MVC指的是 Model + View + Controller(数据模型 + 视图+ 控制器) 三层架构指的是:(展现层 + 应用层 + 数据访问层) ...
最新文章
- 织梦正则批量替换文章内容内链变成绝对路径
- 【Android 逆向】修改 Android 系统文件 ( Android 逆向中需要经常修改的文件和目录 | 在 root 后的设备中获取 / 目录的 rw 权限后注意事项 )
- poj 1113 Wall 凸包的应用
- 进阶丨如何让你的数据分析更加简洁专业
- 如何將Clonezilla live放到一個已經有其他作業系統存在的硬碟中
- mysql磁盘无法挂载,linux – 无法挂载磁盘(VFS:找不到ext4文件系统)
- Node.js -- 目录
- 社会关系分析_肯德基加盟费分析!肯德基加盟流程!肯德基加盟条件2021
- 作为移动开发者,你应该了解Baas(后端即服务)
- 161套javaWeb项目源码免费分享
- 青岛理工大学QUT期末考试《电子商务概论》思维导图
- python 生意参谋操作
- android 手机格式验证,android – 使用国家/地区代码验证手机号码
- 计算机进化阶段,进化计算
- 学习移动机器人SLAM、路径规划必看的几本书
- 【软考-软件设计师精华知识点笔记】第十章 网络与信息安全
- antd pro 使用
- QX5299人体感应太阳能LED灯控制器
- Palm OS Developer Suite的安装和使用
- win10电脑桌面无法右键其他地方可以解决方式