浅介MVC与Backbone
1.MVC是什么东西?
MVC (Modal View Controler) 是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。
- (控制器Controller)- 负责转发请求,对请求进行处理。
- (视图View) - 界面设计人员进行图形界面设计。
- (模型Model) - 程序员编写程序应有的功能(实现算法等等)、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。
使用MVC的目的是将M和V的实现代码分离, 从而使同一个程序可以使用不同的表现形式。C存在的目的则是确保M和V的同步,一旦M改变,V应该同步更新。
2.MVC如何工作?
MVC是一个设计模式,它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件:模型、视图、控制器。它们各自处理自己的任务。
- 视图(View)——视图是用户看到并与之交互的界面。对老式的Web应用程序来说,视图就是由HTML元素组成的界面,在新式的Web应用程序中,HTML依旧在视图中扮演 着重要的角色,但一些新的技术已层出不穷,它们包括Macromedia Flash和象XHTML,XML/XSL,WML等一些标识语言和Web services.
- 模型(Model)——模型表示企业数据和业务规则。在MVC的三个部件中,模型拥有最多的处理任务。例如它可能用象EJBs和ColdFusion Components这样的构件对象来处理数据库。被模型返回的数据是中立的,就是说模型与数据格式无关,这样一个模型能为多个视图提供数据。由于应用于 模型的代码只需写一次就可以被多个视图重用,所以减少了代码的重复性。
- 控制器(Controller)——控制器接受用户的输入并调用模型和视图去完成用户的需求。所以当单击Web页面中的超链接和发送HTML表单时,控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求,然后用确定用哪个视图来显示模型处理返回的数据。
现在我们总结MVC的处理过程,首先控制器接收用户的请求,并决定应该调用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器用相应的视图格式化模型返回的数据,并通过表示层呈现给用户。
看到这里相信大家还是不太理解MVC到底是什么,没有关系,接下来我们会介绍一个轻量级的MVC框架BackBone.js。
3.什么是BackBone?
backbone.js提供了一套web开发的框架,通过Models进行key-value绑定及custom事件处理,通过 Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.它是基于jquery和underscore的一个js框架。
Backbone主要由三个部分组成:
- model:创建数据,进行数据验证,销毁或者保存到服务器上
- collection:可以增加元素,删除元素,获取长度,排序,比较等一系列工具方法,说白了就是一个保存 models的集合类
- view:绑定html模板,绑定界面元素的事件,初始的渲染,模型值改变后的重新渲染和界面元素的销毁等
Backbone 中文版API:http://www.csser.com/tools/backbone/backbone.js.html
看到这里大家一定会说,除了了解了一堆理论,我还是不会用MVC,没关系,实践出真知,再多的概念也不如去学习一个实例:
http://backbonejs.org/docs/todos.html
https://github.com/MichaelHu/rocket_apps/tree/master/hellorocket
——by 欧阳方昕
浅介MVC与Backbone的更多相关文章
- Backbone.js源码浅介
终于看到一个只有一千多行的js框架了,于是抱着一定可以看懂他的逻辑的心态,查看了他的整个源码,进去之后才发现看明白怎么用容易,看懂怎么写的就难了,于是乎有了这篇博客的标题:浅介,只能粗浅的介绍下Bac ...
- 最轻量级的前端Mvc框架backbone
最轻量级的前端Mvc框架backbone依赖最轻量级的库understore backbone并非将前端再次切分为mvc,而是分为了七大模块,分别是:Events.Model.Collection.R ...
- 浅谈 MVC 和 MTV
浅谈 MVC 和 MTV 一.MVC M:model,模型,就是数据模型,负责数据的存取: V:view,视图,负责页面的展示逻辑: C:controller,控制器,负责业务逻辑的处理: 二.MTV ...
- 前端MVC框架Backbone 1.1.0源码分析系列
Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架.任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑.以及金字塔般的代码.而且,在传统的 ...
- 前端MVC框架Backbone 1.1.0源码分析(一)
前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...
- 前端mvc框架backbone.js入门[转]
原文地址:http://www.cnblogs.com/zhjh256/p/6083618.html 关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以 ...
- 前端mvc框架backbone.js入门
关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以长久生存,通常都是有其特定优势和擅长点的. 使用backbone.js作为前端框架的应用通常都是htm ...
- 【javascript激增的思考04】MVC与Backbone.js(beta)
前言 最近整理了很多前端面试题的东西,今天又去参加了一次面试,不知各位烦不烦,我反正有点累了,于是我们今天继续回到我们前段时间研究的问题,我们再来看看MVC吧. 什么是MVC 又回到这个问题了,到底什 ...
- 浅谈MVC模式与MVVM模式的区别
MVC模式: M:Model(数据模型),用于存放数据 V:View(视图),也就是用户界面 C:Controller是Model和View的协调者,Controller把Model中的数据拿过来给V ...
随机推荐
- PowerShell “execution of scripts is disabled on this system.”
Set-ExecutionPolicy RemoteSigned
- C语言实现输出杨辉三角
1.倒推法实现输出杨辉三角右半部分,代码如下: #include<stdio.h> int main() { ]; printf("请输入行数n:"); scanf(& ...
- Linux命令一览
Linux系统中的命令参数有长短格式之分,长格式和长格式之间不能合并,长格式和短格式之间也不能合并,但短格式和短格式之间是可以合并的,合并后仅保留一个-(减号)即可. echo命令:用于在终端输出字符 ...
- requirejs原理深究以及r.js和gulp的打包【转】
转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...
- 使用vs2010编译lua5.1源代码生成lua.lib
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wangbin_jxust/article/details/37557807 一.打开vs2010 二 ...
- Volley源码分析(五)Volley源码总结篇
volley关键的代码这里已经分析完了,下面梳理一下完整的Volley流程 Volley的使用从构造Request对象开始,Volley默认提供了四种request的实现,StringRequest, ...
- BZOJ2079:[POI2010]Guilds(乱搞)
Description Zy皇帝面临一个严峻的问题,两个互相抵触的贸易团体,YYD工会和FSR工会,他们在同一时间请求在王国各个城市开办自己的办事处.这里有n个城市,其中有一些以双向马路相连,这两个工 ...
- 哪些地方会出现css阻塞,哪些地方会出现js阻塞?
Js的阻塞特性: 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.直到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容.为了提高用户体验,新一代浏览器 ...
- 启动报错:Access denied for user 'root'@'localhost' (using password:YES)
项目启动报错:Access denied for user 'root'@'localhost' (using password:YES) 原因:root帐户默认不开放远程访问权限,所以需要修改一下相 ...
- Python基础(9)——类
类的语法 类的定义 class Dog(object): print("hello,I am a dog!") d = Dog() #实例化这个类, #此时的d就是类Dog的实例化 ...