前言

最近整理了很多前端面试题的东西,今天又去参加了一次面试,不知各位烦不烦,我反正有点累了,于是我们今天继续回到我们前段时间研究的问题,我们再来看看MVC吧。

什么是MVC

又回到这个问题了,到底什么是MVC呢?

MVC是一种设计模式,他将应用划分为:

① 数据(模型,model)

② 展现层(视图,view)

③ 用户交互(控制器,control)

一个事件发生的过程是这样的:

① 用户和应用产生交互
② 控制器的事件处理器被触发
③ 控制器从模型中请求数据,并将其交给视图
④ 数据将数据呈现给用户 以一个聊天呈现为例: ① 用户提交一个新的聊天信息
② 控制器的事件处理器被触发
③ 控制器创建一个新的聊天模型记录
④ 控制器更新视图
⑤ 用户看到聊天窗口新的信息

以上的过程很简单,但是有复杂的情况,于是我们会清晰的分割各个部分,这样各个部分可以独立开发,方便测试与维护,对解耦有好处。

模型

模型用以存放应用的所有数据对象,比如一个User模型,用以存放用户列表、它们的属性及所有与模型有关的逻辑。

模型不必知道视图与控制器的细节,模型只需要包含数据以及直接和这些数据相关的逻辑。

任何事件处理代码,视图模板,以及那些和模型无关的逻辑都应该隔离刀模型以外。

模型与视图代码混到一起是违法MVC规则的。

当控制器从服务器获取数据时,他就将数据包装成模型实例,来一个简单的例子,不然我们都晕了:

 var user = User.find('叶小钗');
user.destroy();

怎么样够简单吧,先不要在意这个,后面点我们还会讲到他。

视图

视图层是呈现给用户的,用户与之产生交互。

在js中,视图大多是HTML+CSS+Javascript模板组成的,模板中除了简单的条件语句外,不要有其它逻辑。

视图不必知道模型和控制器干了什么,视图中处理逻辑的代码应该少一点

控制器

控制器是视图与模型之间的纽带,控制器由视图获取事件和输入(事件来源于视图),对他们进行处理,并更新视图。

当页面加载时,控制器会给视图添加事件监听,当用户和应用发生交互时,控制器中的事件触发器就开始工作了。

var Controller = {};
(Controller.users = function ($) {
var nameClick = function () {};
//在页面上增加事件监听
$(function () {
$('#view').click(nameClick);
})
})(jQuery);

这坨莫名其妙的代码,就是我们的控制器啦。

PS:现在各位觉得看着有点晕是很正常的,我研究了几次了都还是有点晕呢,你们不孕的话我就要哭了

由于我们这里不是要详细的介绍MVC,所以就不多说了,后面点我们会有单独的系列研究MVC这个东西,我们进入BackBone的学习吧。

什么是Backbone

Backbone是构建javascript应用程序的一个优秀的类库,他简洁、轻量级但是他功能齐全,覆盖了所有基础功能,同时灵活性也很高。

该类库提供了model、controller、view由此构成了我们构建应用程序的骨架。

backbone只有4k,只提供了模型、事件、集合、视图、控制器和持久化等核心概念。

PS:backbone依赖于underscore.js

模型

模型是保存应用程序数据的地方,我们可以把模型想象为对应用程序原始数据精心设计的抽象,并且添加了一些工具函数和事件。

 var User = Backbone.Model.extend({
initialize: function () { }
});

extend第一个参数是一个对象,他成为了模型实例的属性,第二个参数是可选的类属性的哈希,多次调用extend可以生成模型的子类,他们将继承父亲所有的类和实例的属性。

 var User = Backbone.Model.extend({
//实例属性
instanceProperty: 'foo'
}, {
//类属性
classProperty: 'bar'
});

当模型实例化时,他的initialize函数可接受任意实例参数,背后的工作原理是Backbone模型本身是构造函数,所以可以使用new生成一个新的实例:

 var User = Backbone.Model.extend({
initialize: function (name) {
this.set({name, name});
}
});
var user = new User('叶小钗');

PS:至于你们懂不懂,我反正是不懂了,所以继续学习下去吧,囧.....

模型与属性

使用set()和get()函数来设置和获取实例里的属性:

user.set({name: '叶小钗'});

可以使用validate函数验证一个属性:

 var User = Backbone.Model.extend({
validate: function (atts) {
if(!atts.email || atts.email.length < 3) {
return 'email error';
}
}
});
var user = new User();
user.bind('error', function (model, error) {
//错误处理
});
//这样就会报错
user.set({email: 'ss'});

结语

这块有点晦涩,我们今天暂时到这里,我私下研究下再写了。。。

【javascript激增的思考04】MVC与Backbone.js(beta)的更多相关文章

  1. 前端mvc框架backbone.js入门[转]

    原文地址:http://www.cnblogs.com/zhjh256/p/6083618.html 关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以 ...

  2. 前端mvc框架backbone.js入门

    关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以长久生存,通常都是有其特定优势和擅长点的. 使用backbone.js作为前端框架的应用通常都是htm ...

  3. 【javascript激增的思考02】模块化与MVC

    前言 之前我们遇到了这么一个项目,也就是我们昨天提到的,有很多的小窗口的,昨天说的太抽象了,今天我们再来理一理什么是小窗口(后面点说下),当时由于js有一点复杂,我自己也装B跟风用了一下传说中MVC! ...

  4. 【javascript激增的思考03】MVVM与Knockout

    前言 今天搞的有点快,因为上午简单研究了下MVC,发现MVC不太适合前端开发,然后之前看几位前端前辈都推荐前端使用MVVM,但是我对其还不甚了解,所以我觉得下午还是应该先看看他是神马先,后面再决定要不 ...

  5. 【javascript激增的思考01】模块化编程

    前言 之前我做过一个web app(原来可以这么叫啦),在一个页面上有很多小窗口,每个小窗口都是独立的应用,比如: ① 我们一个小窗口数据来源是腾讯微博,需要形成腾讯微博app小窗口 ② 我们一个小窗 ...

  6. 浅介MVC与Backbone

    1.MVC是什么东西? MVC (Modal View Controler) 是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controll ...

  7. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  8. 前端MVC框架Backbone 1.1.0源码分析系列

    Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架.任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑.以及金字塔般的代码.而且,在传统的 ...

  9. 前端MVC框架Backbone 1.1.0源码分析(一)

    前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...

随机推荐

  1. nyoj 925 国王的烦恼(最小生成树)

    /* 题意:N个城市中每两个城市有多条路径连接,可是因为路径存在的天数是有限的!以为某条路经不存在了 导致N个城市不能连通了,那么村名们就会抗议!问一共会有多少次抗议! 思路:最小生成树....我们用 ...

  2. Redis在win7上的可视化应用

    Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  3. shell脚本学习心得

    近来主要捣鼓ubuntu,大多数项目中都用到了sh脚本作为启动脚本等,以前只是大概明白如何使用,今天需要自己修改并运行脚本就碰到了很多问题,所以决定静下心来学习一下shell脚本,学习了几个小时,现将 ...

  4. Unity3D 游戏前端开发技能树(思维导图)

    如果做游戏也是一种游戏,那么这个游戏的自由度实在是太高了.(导图源文件链接:http://pan.baidu.com/s/1eSHpH5o 密码:qzl5) 最近要用思维导图软件Xmind把自己的思路 ...

  5. Android 2.x中使用actionbar - Actionbarsherlock

    1. 范例说明 从Android 3.0开始,Android引入了ActoinBar,不得不说3.0之前android的标题栏确实比较丑,并且还没有任何功能. 之前很多应用的顶部栏很多都是仿苹果的,比 ...

  6. Glyphish – 精心打造的 iPhone & iPad 应用程序图标

    Glyphish 是一套精心打造的图标库,包含 iOS 工具栏.标签栏.导航条等等,Glyphish 图标也完美的用在 Android.Windows Mobile App 和移动网站的 UI 设计等 ...

  7. .net using使用小结

    在.net中using使用方法有3种,分别是using指令.using定义使用范围.using别名. using指令,即引用命名空间. using System; using System.Colle ...

  8. Hyperledger区块数据的访问

    简介 本文介绍了访问Hyperledger区块数据的几种方法. REST API Hyperledger提供了多个REST API (https://hyperledger-fabric.readth ...

  9. nagios的nrpe的check_command配置优化

    问题处理了两个小时,MMD,各种问题: 先是出现了check_load的时候说参数错误. 然后我就希望 在nagios客户端获取到命令日志 在这篇:NREP将日志放入message中 的引导下终于解决 ...

  10. html的块级、内联、内联块级元素基础

    概念 块级:block 内联:inline 内联块级:inline-block 在html元素中,元素会有display属性 display属性默认值是block,那么该元素是块级元素. displa ...