作者:nuysoft/高云/[email protected]
原文链接:http://www.cnblogs.com/nuysoft/archive/2012/03/18/2404274.html
JSMVC职责划分
M 模型
- 业务模型:业务逻辑、流程、状态、规则
- (核心)数据模型:业务数据、数据校验、增删改查(AJAX)
V 视图
- (核心)视图:定义、管理、配置
- 模板:定义、配置、管理
- 组件:定义、配置、管理
- (核心)用户事件配置、管理
- 用户输入校验、配置、管理
C 控制器/分发器
- (核心)事件分发、模型分发、视图分发
- 不做数据处理、业务处理,即业务无关
- 扩展:权限控制、异常处理等
- C是JSMVC框架的核心,实现集中式配置和管理,可以有多个控制器
工具库
- 主要是异步请求、DOM操作,可以依赖于jQuery等
JSMVC实现探讨
MVC的模型Model、视图View、控制器Control三个相互独立又相互联系,C作为其中的桥梁。MVC作为由来已久的成熟开发模型,已经有经典的实现可控参考,在浏览器和JS这个特定应用场景中,我们做如下探讨:
M模型是自包含的,可以嵌套包含,不会主动引用视图和控制器;可以是简单的JSON对象/数组,也可以用组合模式Composite实现嵌套包含;
V视图是嵌套包含的,可以用组合Composite实现;视图需要引用模型(M-V),一个视图引用一个多个视图,视图会收到模型的通知并自动更新,可以用观察者模式Observer实现;视图需要响应用户的交互,使用浏览器事件模型;
C控制器作为MVC框架关注的核心,采取集中配置的策略(V-C);可以有多个控制器(C+C),用策略模式Strategy实现;hash事件驱动需要用到浏览器事件模型。
可以看到M模型和C控制器之间没有关联,一般我认为是不需要的;但是在有的框架中实现了M模型和C控制器事件的关联(比如公司在用的Magix),也是一种实践,可以参考。
上边的论述解析MVC在JS中定位,但是理解JSMVC如何运行的关键在于对事件驱动的理解。
事件驱动
在浏览器中JSMVC有三种事件驱动方式:
1. hash驱动,通过popstate/hashchange事件驱动控制器(前边有过介绍,后续结合Backbone的Router和History详细讲解它原理、实现、技巧)
2. DOM事件,用来驱动视图(这个我们已经很熟悉了)
3. 模型事件(业务模型事件和数据模型事件),用来驱动模型和模型结合(这个后续结合Backbone的Model讲解)
今天就写到这里,下节介绍Backbone的架构、能做什么、不能做什么、以及还能扩展什么。
参考资料
http://documentcloud.github.com/backbone/
http://www.csser.com/tools/backbone/backbone.js.html
官网介绍
Backbone通过提供模型Models、集合Collection、视图Veiew赋予了Web应用程序分层结构。通过以下方式实现分层结构:
? 模型Model绑定键值数据和自定义事件;
? 集合Colection是模型的有序或无序集合,带有丰富的可枚举API;
? 视图View声明事件监听函数;
? 将模型、集合、视图与服务端的RESTful JSON接口连接。
自调用匿名函数
整个Backbone的源码用一个自调用匿名函数包裹,可以通过闭包特性引用变量(例如 previousBackbone、slice、splice等),同时避免污染全局命名空间。
整体结构如下,还是很清晰的:
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);
依赖库
Backbone必须依赖于 Underscore.js,DOM操作和AJAX请求依赖于第三方jQuery/Zepto/ender之一,也可以通过 Backbone.setDomLibrary( lib ) 设置其他的第三方库。
自定义事件模块 Backbone.Events
可以和任意对象合体(将方法赋值到其他对象或原型上),合体后的对象可以自定义事件,提供三个方法来绑定、移除、触发自定义事件。
模型 Backbone.Model
是 JavaScript 应用程序的核心,包含业务数据和对业务数据的读写和持久化,模型的主要方法包括读写和持久化。
集合 Backbone.Collection
集合是模型的有序集合,可以在集合上绑定 "change" 事件,当集合中的任何模型发生变化时收到通知,集合也可以监听 "add" 和 “remove" 事件, 从服务器获取数据,并能使用 Underscore.js 提供的全套方法。
为了方便,在集合中的模型上触发的任何事件都会在集合上直接触发。这样就可以监听集合中模型的指定属性的变化。 例如:Documents.on("change:selected", ...)
集合的主要方法包括读写、维护和持久化。
路由配置器 Backbone.Router
Web应用程序通常需要为重要页面提供可链接、收藏、可分享的 URL。 直到最近, 锚文片段(hash #page)可以被用来提供这种固定链接;同时随着 History API 的到来,锚文现在可以用于处理标准 URLs (/page)。
Backbone.Router 为客户端页面路由提供了许多方法,并能连接到指定的动作(actions)和事件(events)。对于不支持 History API 的旧浏览器,路由器提供了优雅的回调函数并可以透明的进行 URL 片段的转换。
页面加载期间,当应用程序已经创建了所有的路由表,需要调用 Backbone.history.start(),或 Backbone.history.start({pushState : true}) 确保路由初始 URL。
路由器 Backbone.History
作为全局路由器,用于处理 hashchange 或 pushState事件,匹配适合的路由表,并触发回调函数。
如果使用带有路由表的路由器,会自动创建一个History对象,此时不要再创建一个History对象,而是使用 Backbone.history。
Backbone 会自动判断浏览器对 pushState 的支持,以做内部的选择。 不支持 pushState 的浏览器将会继续使用基于锚点的 URL 片段。
关于官网疑惑:
如果兼容 pushState 的浏览器访问了某个 URL 锚点,将会被透明的转换为真实的 URL。 注意使用真实的 URLs 需要 web 服务器支持直接渲染那些页面,因此后端程序也需要做修改。
浏览器发起HTTP请求时并不会把锚文部分放在请求头中,查看 http rfc2612 也没有发现相关的说明,保留疑问。
http://www.w3.org/Protocols/rfc2616/rfc2616.html
视图 Backbone.View
视图的使用相当方便,不需要判断任何HTML、CSS,可以任意JavaScript模板引擎集成。
通用的做法是,将界面组织成基于模型的诗句,当模型改变时视图立即更新,而不需要重画整个页面。
不再需要纠结于JSON对象、查找DOM元素、手动更新HTML,只需把视图 render 方法绑定到模型的 change 事件,模型数据会立即显示到UI上。
扩展方法 extend
模型、集合、视图、路由器都一个extend方法,用于扩展原型属性和静态属性,创建自定义的视图、集合、视图、路由器类。