MVC与Backbone.js的demo简析

时间 2019-11-07

标签 mvc backbone.js backbone demo 栏目 JavaScript 繁體版

原文原文链接

MVC简介

MVC是一种软件设计模式，它将应用程序分为Model、View、Controller三个部件，能够有效地将业务逻辑和数据显示分离。 javascript

Model包括算法实现、数据管理和数据库设计等。Model与数据格式无关，对返回的数据不进行格式化，因此一样的构建能被不一样的界面使用，加强了代码的复用性。 css

View是由界面设计人员进行图形界面设计，遵循单一职责原则，不进行数据处理，只是做为一种输出数据并容许用户操纵的方式，使应用程序可以处理多个不一样页面。 html

Controller负责转发请求，针对用户输入，对请求进行处理，调用相应的Model和View。前端

MVC的大体流程以下：

1.用户在View上进行操做； java

2.Controller处理这个操做； git

3.Controller经过Model对数据进行增删改查，将其传递到View； github

4.View将数据展示给用户。 web

Backbone.js简介

Web前端在变得愈来愈复杂，不只在交互体验上须要编写大量 JS代码，甚至不少业务逻辑都被搬到了前端。为了良好地组织这庞大的JS代码，能够利用一些现成的JS框架。而Backbone.js就是一套大体符合MVC构架的JavaScript框架与RESTfulJSON的应用程式接口。它以轻量为特点。算法

粗略解释一下：model表明一个数据模型，models中的数据能够建立、校验、销毁和保存到服务端。collection是模型的一个集合，和咱们平时接触的JAVA集合类类似，具备增长元素，删除元素，获取长度，排序，比较等一系列工具方法。而view能够绑定DOM和客户端事件是用来处理页面以及简单的页面逻辑的。数据库

Backbone.js经过Models进行key-value绑定及custom事件处理，经过Collections提供一套丰富的API用于枚举功能，经过Views来进行事件处理及与现有的Application经过RESTfulJSON接口进行交互。

如下是一些与backbone.js相关的技术资源：

http://documentcloud.github.com/backbone官网

http://backbonetutorials.com/ 简明教程

http://weakfi.iteye.com/blog/1391990

http://blog.csdn.net/soasme/article/details/6581029

http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html

SPA简介

SPA，Single PageApplication，即“单页应用程序”，是指用户经过浏览器加载独立的HTML页面而且无需离开此导航页面。SPA单页应用程序能够保证跨平台应用程序的稳定性，并且对于内容的改动不须要加载整个页面，给用户带来了很是好的使用体验，同时对服务器压力很小，消耗更少的带宽。

单页Web应用程序的结构很简单：首先传递HTML文档框架；而后使用JavaScript修改页面；紧接着再从服务器传递更多数据而后再修改页面，如此循环。

开发单页Web应用利器包括Backbone.js，Ember.js，Angular.js以及Meteor。国外如Gmail和Google Docs，Twitter和Facebook等大型网站都使用了SPA元素。

国内成熟的SPA应用有豆瓣的阿尔法城、新版的有道笔记 Web 版等。

前端MVC实践

（1）Todos

Todos是一个使用backbone实现经典MVC案例，demo地址： http://localtodos.com

首先，观察界面可知，主要有如下四个功能：

（1）添加任务

（2）修改任务内容或状态

（3）删除任务

（4）统计任务完成状况

观察源代码，分析数据模型，看其model层。基本的Todo Model 有title、order、done三种属性。而后是Todo Collection，是Todo对象的集合，数据经过localStorage存储在本地。

接下来使人较为费解的是使用了两个view模型，这是为了让数据展现和数据操做相分离。TodoView的做用是监听Todo Model的改变，对数据自己进行管理，展现数据模型中的数据到界面。AppView的功能是显示全部任务列表，并显示总体的列表状态，如完成多少，未完成多少等，是对总体的一个控制。为了更好地了解这个demo，推荐一个Backbone.js的中文API 网站http://www.csser.com/tools/backbone/backbone.js.html 。

原创代码框图以下：

此外，在http://todomvc.com上有用各类不一样框架实现的Todos，并进行了优劣比较，这让我想起了之前的一篇关于12种JavaScript MVC框架之比较的博文，附上地址http://www.infoq.com/cn/news/2012/05/js-mvc-framework/。

（2）hellorocket

先简单介绍一下Rocket框架。这个框架特别适用但不只限于Mobile HTML5 SPA开发，具备易维护、支持多人开发、高性能等优势。盗图两张：

hellorocket是一个相似于ppt展现的网站，观察页面源代码能够发现：

<!DOCTYPE html>

<html>

<head>

<title>hellorocket-2.0</title>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>

<metaname="viewport"content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

<metaname="format-detection"content="telephone=no"/>

<metaname="apple-mobile-web-app-status-bar-style"content="white"/>

<linkrel="stylesheet"type="text/css"href="./css/hellorocket-aio.css"/>

</head>

<body>

<divid="wrapper"class="news">

</div>

</body>

</html>

rocket.init();

</script>

body区域里仅靠一个div来大体区分页面显示，在浏览过程当中，是view监听了用户输入实践而后调用不一样的models来动态生成的。

调用的有

/tpl/globalloading.tpl.html

/tpl/pageloading.tpl.html

/page/index/html/index.html

/page/sayhello/html/sayhello.html

/page/index/tpl/index.tpl.html

/page/sayhello/tpl/sayhello.tpl.html

学习中的困惑

（1）因为初次接触MVC，对其了解仍有很深的局限性。在了解中令我感到最大困惑的就是view和controller的区分。虽然在概念理论上能够很清晰地定义，但在实际项目中彻底不是这样。view的做用就是对用户输入进行监听并做出相关反应，这就决定了view和controller是高度耦合的，如上面的实例todos中就使用了两个view来将数据展现和数据操做相分离，这是否是有点增长复杂度的感受？

（2）关于Backbone.js，我以为它的view包含了MVC框架中的VC，并且在绑定dom的操做上和有关于router的使用上还不了解，但愿课程能对有关方面做出详细的讲解。