MVC与Backbone.js的demo简析

阅读量：6800 次

发布时间：2019-06-26

本文共 3627 字，大约阅读时间需要 12 分钟。

MVC简介

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

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

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

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

MVC的大致流程如下：

1.用户在View上进行操作；

2.Controller处理这个操作；

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

4.View将数据展现给用户。

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相关的技术资源：

官网

简明教程

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地址：

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

（1）添加任务

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

（3）删除任务

（4）统计任务完成情况

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

接下来令人较为费解的是使用了两个view模型，这是为了让数据展示和数据操作相分离。TodoView的作用是监听Todo Model的改变，对数据本身进行管理，展示数据模型中的数据到界面。AppView的功能是显示所有任务列表，并显示整体的列表状态，如完成多少，未完成多少等，是对整体的一个控制。为了更好地了解这个demo，推荐一个Backbone.js的中文API 网站。

原创代码框图如下：

此外，在上有用各种不同框架实现的Todos，并进行了优劣比较，这让我想起了以前的一篇关于12种JavaScript MVC框架之比较的博文，附上地址。

（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的使用上还不了解，希望课程能对有关方面作出详细的讲解。