讲解JavaScript的Backbone.js框架的MVC结构设计理念

什么是Backbone.js?
Backbone.js是十大JS框架之首,Backbone.js 是一个重量级js  MVC 应用框架,也是js MVC框架的鼻祖。它通过Models数据模型进行键值绑定及custom事件处理,通过模型集合器Collections提供一套丰富的API用于枚举功能,通过视图Views来进行事件处理及与现有的Application通过JSON接口进行交互。

简而言之,Backbone是实现了web前端MVC模式的js库

什么是MVC?
MVC:后端服务器首先(过程1)通过浏览器获取页面地址,对网址进行解析,得到视图View给它的一个网址,然后通过控制器controller进行解析,然后去找对应的数据(过程2),找到数据后,再将数据Model返回给控制器(过程3),控制器controller再对数据进行加工,最后返回给视图(过程4),即更新视图View。这种结构在后端是非常清晰且易实现的

2016214155352464.jpg (440×329)

Backbone中MVC的机制
Backbone将数据呈现为模型, 你可以创建模型、对模型进行验证和销毁,甚至将它保存到服务器。 当UI的变化引起模型属性改变时,模型会触发"change"事件; 所有显示模型数据的视图会接收到该事件的通知,继而视图重新渲染。 你无需查找DOM来搜索指定id的元素去手动更新HTML。 — 当模型改变了,视图便会自动变化。———百度百科

模式:一种解决问题的通用方法

—设计模式:工厂模式、适配器模式和观察者模式
 —框架模式:MVC、MVP、MVVM
控制器:通过控制器来连接视图与模型。

MVC模式的思想:

就是把模型与视图分离,通过控制器来连接他们
服务器端MVC模式非常容易实现
Model:模型即数据,模型 是所有 js 应用程序的核心,包括交互数据及相关的大量逻辑: 转换、验证、计算属性和访问控制。你可以用特定的方法扩展 Backbone.Model

View:即你在页面上所能看到的视图。每一个单一的数据模型对应一个视图View

web页面本身就是一个很大的view,不太容易做到分离操作,backbone.js适合复杂的大型开发,并为我们解决了这些难题

backbone的模块
backbone有如下几个模块:

Events:事件驱动模块

Model:数据模型

Collection:模型集合器

Router:路由器(对应hash值)

History:开启历史管理

Sync:同步服务器方式

View:视图(含事件行为和渲染页面 相关方法)

集合器Collection是对单独的数据模型进行统一控制

直接创建对象
Backbone依赖于Underscore.js, DOM 处理依赖于 Backbone.View 和 jQuery ,因此,在引入Backbone.js之前,Underscore.js必须在它之前引入,而jQuery也最好一并引入,最后再引入Backbone.js

<head lang="en"> <meta charset="UTF-8"> <title></title> <script src = "jquery-2.0.3.min.js"></script> <script src = "underscore-min.js"></script> <script src = "backbone.js"></script> </head> <body> var model = new Backbone.Model(); var col = new Backbone.Collection(); var view = new Backbone.View(); </body>

new后面是一个构造函数,而Backbone是作为构造函数的命名空间来使用的

Model模块

Backbone.Model.extend(properties, [classProperties])

Backbone通过extend来扩展实例方法和静态方法:

<script type="text/javascript"> //extend接收的第一个参数是json格式的字符串,用来扩展实例方法 //第二个参数也是json格式的字符串,用来扩展静态方法 var M = Backbone.Model.extend({ abc : function(){ //实例方法 alert("hello backbone"); } },{ def : function(){ //静态方法 alert("hi"); } }); var model = new M; model.abc();//实例方法要用实例对象来访问 M.def();//静态方法直接挂载到了构造函数上,可以通过构造函数来直接访问 </script>

静态方法其实就是多了一个命名空间。以上是给构造函数添加实例方法和静态方法

var M = Backbone.Model.extend({})

通过extend来为模型的构造函数扩展方法,M就是扩展之后的构造函数

继承

<script type="text/javascript"> //继承 var Mod = backbone.Model.extend({ abc : function(){ alert(123); } }); var ChildMod = Mod.extend(); var model = new ChildMod; model.abc();//子类继承了父类的方法 </script>

Backbone源码结构

2016214155552836.png (600×143)

1:  (function() {

2:      Backbone.Events        // 自定义事件

3:      Backbone.Model        // 模型构造函数和原型扩展

4:      Backbone.Collection    // 集合构造函数和原型扩展

5:      Backbone.Router        // 路由配置器构造函数和原型扩展

6:      Backbone.History        // 路由器构造函数和原型扩展

7:      Backbone.View            // 视图构造函数和原型扩展

8:      Backbone.sync            // 异步请求工具方法

9:      var extend = function (protoProps, classProps) { ... } // 自扩展函数

10:      Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend; // 自扩展方法

11:  }).call(this);
JS MVC职责划分
M 模型

业务模型:业务逻辑、流程、状态、规则
(核心)数据模型:业务数据、数据校验、增删改查(AJAX)
V 视图

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwysy.html