【MVC学习笔记01】初窥奥秘
前言
最近工作落实了,是我非常喜欢的无线前端,会接触很多新东西啦,需要努力才行。因为会用到backbone,所以要学习MVC啦。
MVC(模型-视图-控制器),这种模式最早被用于构建桌面程序和服务器端的应用程序。
最近几年由于前后端数据的转移,前端所占的业务逻辑越来越重,于是这种模式便出现在了我们前端的javascript中了,比如Backbone 然后MVP与MVVM也先后在前端出现,并且各自拥有其拥戴者。
初探MVC
MVC是一种架构设计模式,他通过关注点分离改进程序组织,从而达到优化程序的目的。
MVC强制将业务数据(model)与用户界面(view)分离,controller用以管理用户输入以及一些逻辑。 MVC其实也是经过了一些发展的:
model代表特定于领域的数据,他完全不知道什么是view或者controller,但是当model发生改变时,他会通知他的view(观察者)
view描述的是model的当前状态,观察者模式用于让view了解model什么时候发生了变化
presentation由view关注,但不只是单个view和controller,屏幕上每个部分或者元素都需要做到view-controller对应
controller在view-controller对中的作用是处理用户交互(点击、滑动等动作),为view做决定。
由此我们可以察觉,发布/订阅(publish/subscribe)(观察者模式)好像和我们的MVC有一定渊源,于是我们来简单的看一下观察者模式。
Publish/Subscribe(发布/订阅)模式
在javascript中,我们一般使用Publish/Subscribe(发布/订阅)模式。
Publish/Subscribe模式使用了一个主题/事件通道,这个通道介于希望接收到通知(订阅者)的对象和激活事件的对象(发布者)之间。
该事件系统允许代码定义应用程序的特定事件,事件可传递参数,参数包含订阅者需要的值,这样避免了订阅者与发布者之间产生依赖。
他允许任何订阅者执行适当的事件处理程序来注册和接收发布者发出的通知。
我们这里假设我们已经实现了publish、subscribe、unsubscribe方法,这里来实现一个简单的mail处理程序:
//接收消息数量
var mailCounter = 0;
//初始化订阅、名称是inbox/newMessage //呈现消息预览
var subscriber1 = subscribe('inbox/newMessage', function (topic, data) {
alert('a new message:', topic);
//使用从目标subject传递过来的data,呈现消息
$('#sender').html(data.sender);
$('#content').html(data.body);
}); //另外一个订阅者,使用同样的data,但是干了不同的事情(更新接收消息数量)
var subscriber2 = subscribe('inbox/newMessage', function (topic, data) {
$('#newMessageCounter').html(mailCounter++);
}); //发布消息啦!
publish('inbox/newMessage', [{
sender: '叶小钗',
body: '一起来看霹雳布袋戏吧!!!'
}]); //可以取消订阅
// unsubscribe(subscriber1);
// unsubscribe(subscriber2);
这段代码的中心是促进松散耦合,通过订阅另一个对象的特定任务或活动,当任务/活动发生时获得通知,而不是单个对象直接调用其他对象的方法。
我们使用Publish/Subscribe模式的好处就是分解应用程序,松散耦合的块,改进代码管理。
这种模式其实也有一个问题,就相当于领导发命令下面的士兵不一定能完成任务,他缺少一个跟踪机制,订阅者和发布者之间会相互无视。
Publish/Subscribe非常适用与javascript生态系统,因为ECMAScript是由事件驱动的,在浏览器下尤其如此,DOM将事件作为脚本编程的主要交互API,所以在代码实现中,无论ECMAscript还是dom都不会提供核心对象或方法来创建自定义事件系统(DOM3除外)。
但是很多类库帮我们实现了Publish/Subscribe系统(jquery) $('dom').trigger('channel', data);
javascript实现Publish/Subscribe
var pubsub = {};
(function (q) {
var topics = {},
subUid = -1;
//发布或者广播事件
q.publish = function (topic, args) {
if (!topics[topic]) {
return false;
}
var subscribers = topics[topic],
len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func(topic, args);
}
return false;
}; //通过特定的名称和回调函数订阅事件,topic/event触发时执行事件
q.subscribe = function (topic, func) {
if (!topics[topic]) {
topics[topic] = [];
}
var token = (++subUid).toString();
topics[topic].push({
token: token,
func: func
});
return token;
}; q.unsubscribe = function (token) {
for (var m in topics) {
if (topics[m]) {
for (var i = 0, len = topics[m].length; i < len; i++) {
if (topics[m][i].token === token) {
topics[m].splice(i, 1);
return token;
}
}
}
}
return this;
};
})(pubsub); //简单的消息处理程序 //记录所有通过订阅者接收到的主题和数据
var messageLogger = function (topics, data) {
//do something
console.log(topics + ' ' + data);
}; //订阅者监听订阅的topic,一旦该topic广播一个通知,订阅者就调用回调函数
var subscription = pubsub.subscribe('inbox/newMessage', messageLogger); //发布者发布消息
pubsub.publish('inbox/newMessage', '刀狂剑痴叶小钗'); pubsub.publish('inbox/newMessage', {
id: '叶小钗',
name: '刀狂剑痴'
});
因为,这个不是今天的重点,我们暂时写到这吧,回过头继续看我们的MVC。
再探MVC
MVC由三个核心组件组成。
model
model管理应用程序的数据,model不涉及用户界面,也不涉及表示层,他是应用程序可能需要的特殊形式的数据。
当model改变时,他会通知他的观察者(view),view就会做出相应的改变达到同步的效果。
假如我们有一个javascript图片库应用程序,在图片库中,一个图片就是一个model,他便是一个独特的数据。
这个model可以包含标题,图像源等信息 { src: '1.jpg', title: '叶小钗', viewed: false }
View
视图是model的可视化表示,表示当前状态的筛选视图,一个视图通常检测一个model(模型),并在model更改时进行通知,使view本身能够更新。
View通常是“愚钝”的,因为他对应用程序中的View与Controller了解非常有限。
用户一般与View发生交互,包括读取编辑model,我们通过操作view来编辑器元数据,更新model的实际任务是在controller上进行的。
我们下面来看一个例子:
我们在view内定义一个render方法,他负责使用javascript模板引擎渲染model的内容,并产生更新操作(还是图片相关的操作),然后model将render回调作为一个订阅者加进去,以便model改变时触发view更新
var bulidPhotoView = function (photoModel, photoController) {
var base = $('<div/>'),
photoEl = $('<div/>');
base.append(photoEl);
var render = function () {
//__template模板方法并不存在其功能为获取id标志的html模板与model生成实体html
photoEl.html(__template('id', photoModel));
};
photoModel.addSubscriber(render);
photoEl.delegate('click', function () {
photoController.handleEvent('click', photoModel);
});
var show = function () {
photoEl.show();
};
var hide = function () {
photoEl.hide();
};
return { showView: show, hideView: hide };
}
Controller
controller是model与view之间的中介,当用户操作view时,controller负责更新model。
View将委托给controller进行操作,当view觉得合适时,view也会委托controller处理model的事件。
这里有点绕,因为我们javascript中的MVC与经典的有点不一样。
比如backbone的框架,他包含Model模型和View视图,但是他其实并不包含Controller,其视图和路由行为与controller有点类似,但是他们都不是controller。
【阶段总结】
MVC关注分离,他有利于简化应用程序功能的模块化,从而带来了这些好处:
① 整体维护变得简单,数据是否改变,什么时候改变我们可以追踪,不论是model或者controller最终都会体现在view上
② 解耦model与view
③ model与controller代码的重复被消除了。
结语
我们今天一起学习了MVC,我对这块的理解还很浅,因为最近会用到backbone,所以感觉自己应该对这块知识有所掌握。
接下来我们一起来学习下吧,希望这次学习后对MVC的理解能够加深一点。
【MVC学习笔记01】初窥奥秘的更多相关文章
- STM32学习笔记之一(初窥STM32)
怎么做好学习笔记? 答:自我感知-->学习知识-->归纳总结-->自我升华(真正属于自己的知识是,抛开书本,运用时,你还能记得的思想) 自我感知--看到知识概念,先自我感觉那应该是个 ...
- MVC学习笔记-01
什么是MVC MVC是指(Model-View-Controll即模型-视图-控制器)用于表示表示一种软件架构模式,它把软件分成三个基本的部分:模型(Model),视图(view),控制器(Contr ...
- Spring MVC学习笔记 01
applicationcontext.xml的配置 <?xml version="1.0" encoding="UTF-8" ?> <bean ...
- Spring MVC 学习笔记一 HelloWorld
Spring MVC 学习笔记一 HelloWorld Spring MVC 的使用可以按照以下步骤进行(使用Eclipse): 加入JAR包 在web.xml中配置DispatcherServlet ...
- Spring MVC 学习笔记9 —— 实现简单的用户管理(4)用户登录显示局部异常信息
Spring MVC 学习笔记9 -- 实现简单的用户管理(4.2)用户登录--显示局部异常信息 第二部分:显示局部异常信息,而不是500错误页 1. 写一个方法,把UserException传进来. ...
- Spring MVC 学习笔记8 —— 实现简单的用户管理(4)用户登录
Spring MVC 学习笔记8 -- 实现简单的用户管理(4)用户登录 增删改查,login 1. login.jsp,写在外面,及跟WEB-INF同一级目录,如:ls Webcontent; &g ...
- 软件测试之loadrunner学习笔记-01事务
loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...
- MVC学习笔记索引帖
[MVC学习笔记]1.项目结构搭建及单个类在各个层次中的实现 [MVC学习笔记]2.使用T4模板生成其他类的具体实现 [MVC学习笔记]3.使用Spring.Net应用IOC(依赖倒置) [MVC学习 ...
- ASP.NET MVC学习笔记-----Filter2
ASP.NET MVC学习笔记-----Filter(2) 接上篇ASP.NET MVC学习笔记-----Filter(1) Action Filter Action Filter可以基于任何目的使用 ...
随机推荐
- javascript中的错误处理机制
× 目录 [1]对象 [2]类型 [3]事件[4]throw[5]try[6]常见错误 前面的话 错误处理对于web应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较 ...
- ISO语言代码
// Language ISO Code Abkhazian ab Afar aa Afrikaans af Albanian sq Amharic am Arabic ar Armenian hy ...
- 重置Oracle密码
在系统运行中输入: sqlplus /nolog 在命令窗口分别执行: conn /as sysdba alter user scott identified by tiger; alter user ...
- [c++] STL = Standard Template Library
How many people give up, because of YOU. Continue... 先实践,最后需要总结. 1. 数据流中的数据按照一定的格式<T>提取 ------ ...
- php基础教程-输出Hello World
<!DOCTYPE html> <!--!文档类型,一个文档类型标记是一种标准通用标记语言的文档类型声明, 它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(D ...
- 在office2010的ppt中加入音乐
Microsoft office Powerpoint,是微软公司设计的演示文稿软件.用户不仅可以在投影仪或者计算机上进行演示,也可以将演示文稿打印出来,制作成胶片,以便应用到更广泛的领域中.利用Mi ...
- Android自定义EditText去除边框并添加下划线
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- 深入浅出JSONP--解决ajax跨域问题
取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中 ...
- 使用AndroidStudio报错:INSTALL_FAILED_UPDATE_INCOMPATIBLE
安装Android Studio后,用真机调试运行项目时出现:INSTALL_FAILED_UPDATE_INCOMPATIBLE这个错误 原因: 1. 可能是设备内存不足: 2. APP已经存在: ...
- kafka设计原理介绍
背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅的消息系统.主要设计目标如下: 以时间复杂度为O(1)的方式提供消息持久化能力,即使对TB级以上数据也能保证常数时间的访问性能 高吞吐 ...