开发者社区> 范大脚脚> 正文

【javascript激增的思考04】MVC与Backbone.js(beta)

简介:
+关注继续查看
前言

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

什么是MVC

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

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

① 数据(模型,model)

② 展现层(视图,view)

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

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

复制代码
① 用户和应用产生交互
② 控制器的事件处理器被触发
③ 控制器从模型中请求数据,并将其交给视图
④ 数据将数据呈现给用户

以一个聊天呈现为例:

① 用户提交一个新的聊天信息
② 控制器的事件处理器被触发
③ 控制器创建一个新的聊天模型记录
④ 控制器更新视图
⑤ 用户看到聊天窗口新的信息
复制代码
以上的过程很简单,但是有复杂的情况,于是我们会清晰的分割各个部分,这样各个部分可以独立开发,方便测试与维护,对解耦有好处。

模型

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

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

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

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

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

1 var user = User.find('叶小钗');
2 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

模型

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

1 var User = Backbone.Model.extend({
2     initialize: function () { }
3 });
extend第一个参数是一个对象,他成为了模型实例的属性,第二个参数是可选的类属性的哈希,多次调用extend可以生成模型的子类,他们将继承父亲所有的类和实例的属性。

复制代码
1 var User = Backbone.Model.extend({
2     //实例属性
3     instanceProperty: 'foo'
4 }, {
5     //类属性
6     classProperty: 'bar'
7 });
复制代码
当模型实例化时,他的initialize函数可接受任意实例参数,背后的工作原理是Backbone模型本身是构造函数,所以可以使用new生成一个新的实例:

复制代码
1 var User = Backbone.Model.extend({
2     initialize: function (name) {
3         this.set({name, name});
4     }
5 });
6 var user = new User('叶小钗');
复制代码
PS:至于你们懂不懂,我反正是不懂了,所以继续学习下去吧,囧.....

模型与属性

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

user.set({name: '叶小钗'});
可以使用validate函数验证一个属性:

复制代码
 1 var User = Backbone.Model.extend({
 2     validate: function (atts) {
 3         if(!atts.email || atts.email.length < 3) {
 4             return 'email error';
 5         }
 6     }
 7 });
 8 var user = new User();
 9 user.bind('error', function (model, error) {
10 //错误处理
11 });
12 //这样就会报错
13 user.set({email: 'ss'});
复制代码
结语

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


本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/p/3165396.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
19810 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29190 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22540 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
16462 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20708 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23582 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14901 0
+关注
3656
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载