Backbone进阶
演讲人：李文亮
公司：北京超图软件股份有限公司
部门：产品研发中心

大纲
MVC简述
Backbone基础
如何使用Backbone创建应用
使用Backbone.js 与 AMD (通过RequireJS)创建模块化开发

预计时间
MVC简述 —— 0.5h
Backbone基础 —— 1.0h
如何使用Backbone创建应用 —— 1.0h
使用Backbone.js 与 AMD (通过RequireJS)创建模块化开发—— 0.5h~1h

目标
知道什么是MVC以及在JavaScript中的实现
能够理解Backbone各部分的作用
能够使用Backbone创建App应用
对RequireJS产生兴趣并主动去实践

MVC简述
基本：MVC(Model-View-Controller)是一种设计模式架构，它鼓励我们将应用程序分解。它将业务数据(Model)和用户界面(View)分离，并通过控制器(Controller) 来管理逻辑、用户输入以及关联模型和视图。
概述——Model——View——Controller
JavaScript现在有许多MVC框架，其中有Ember.js、JavaScriptMVC、当然还有Backbone.js。它们都是可以解决代码可读性差、结构松散等问题。
MVC是由三个核心组件：Model、View、Controller；

Collection是Model的集合，Model管理一个应用程序的数据，它与用户接口（userinterface）和表现层没有直接联系，但它是应用程序控制数据表现所必须的。当一个model发生变化，它会触发一些操作（Render），同时影响对应的表现者(Views/Template)。

Collection是Model的集合，Model管理一个应用程序的数据，它与用户接口（userinterface）和表现层没有直接联系，但它是应用程序控制数据表现所必须的。当一个model发生变化，它会触发一些操作（Render），同时影响对应的表现者(Views/Template)。

Collection是Model的集合，Model管理一个应用程序的数据，它与用户接口（userinterface）和表现层没有直接联系，但它是应用程序控制数据表现所必须的。当一个model发生变化，它会触发一些操作（Render），同时影响对应的表现者(Views/Template)。

Collection是Model的集合，Model管理一个应用程序的数据，它与用户接口（userinterface）和表现层没有直接联系，但它是应用程序控制数据表现所必须的。当一个model发生变化，它会触发一些操作（Render），同时影响对应的表现者(Views/Template)。

假设我们有一个相册应用，相册对应Collection，照片对应Model，而具体的某张照片对应Model的一个实例（model），照片与用户操作和页面表现没有直接联系，但它又是页面表现所必须的。当这个照片发生变化的时候，它会触发一些操作，进而影响页面表现。

Backbone中的View并不是Backbone.View，真正的View是Template，在Template中它只负责页面的呈现部分。实际上Backbone.View更多的控制逻辑和如何展现Model部分。
在相册应用中，Template中大部分是html代码，并在其中为数据留有位置，以适应不同数据的显示，使它更具有灵活性和普遍性。

Backbone中没有Controller类，早期版本的Backbone有过Controller；在Backbone中有Controller功能的是View和Router。
View主要用来渲染模板并生成html，控制用户交互事件等；Router用来定向客户端页面，并触发相应的事件等操作。

Backbone是一个用于创建MVC结构应用的JavaScript库，其好处主要有一下几点：
使应用程序结构更加清晰；
简化了数据的持久化；
将DOM与数据分离；
简洁的模型(Model)数据，视图(View)和路由(Route)；
提供了Dom与model和collection之间的同步能力。

Model主要属性与方法：
id- 模型的特殊属性，可以使string、int或UUID，通过它在Collection中能够检索到模型。
idAttribute- 数据库(CouchDB,MongoDB)中的id。
get(attrName)- 返回属性值。
set(attrName, attrValue)- 为特定属性名设置属性值。
clear()- 移除一个模型中的所有属性同时触发change事件(除非silent选项被定义为true)。
toJSON()- 将模型的属性值以JSON的形式返回。
defaults – 该属性能够定义一个模型的默认属性和值。
fetch()- 从服务器中获取最新的模型数据。
save()-将模型数据存到数据库。
validate()- 在调用save()或set选项{validate:true}时验证给定属性值的合法性。
previous – 当触发了change事件后，该方法能够获取change之前的属性。

Collection主要方法：
add() 添加一个或一组模型到Collection，会触发add事件，除非设置了{silent: true}选项；
remove() 从Collection中移除一个或一组模型，会触发remove事件，触发设置选项；
push() 在Collection末尾添加一个模型，选项与add方法相同；
pop() 从Collection末尾删除一个模型，选项与remove方法相同；
unshift() 在Collection开头添加一个模型，选项与add方法相同；
shift() 从Collection开头删除一个模型，选项与remove方法相同；
comparator 定义当用户添加模型的时候进行比较的属性，以便模型放在合适的位置；
sort() 强制一个Collection重新排序；
pluck() 从Collection中的每一个模型中取出一个属性，组成一个数组返回；
where() 使用给定的属性过滤并提取模型；
fetch() 从数据库中获取Collection中默认的一组模型。

View主要方法：
el -所有的View都有一个el属性来代指它所对应的DOM元素
$el -一个jQuery缓存对象，对应view的元素
setElement -设置view的el对应的DOM元素
render -通过这个方法来使用模型数据填充模板并添加到页面
remove -从DOM中移除view

Router主要方法：
routes 定义路由的映射关系和绑定要执行的方法，使用方法类似于View中的events;
route 手动创建路由映射关系;
navigate 通过这个方法能够更新URL，如果希望触发事件，只需要设置{trigger: true};

Router定义后要调用 Backbone.history.start();
这样以后之前定义的routes就能够开始进行监听。

Events
(是Backbone的一个模块，能够和任意的对象组合，能够创建用户自定义的事件。)
on 为对象绑定一个回调函数，一旦事件触发则调用回调函数。
off 移除对象绑定的函数
trigger 触发自定义事件

Backbone基础
简单回顾

TODO 应用
如何使用Backbone创建应用

相册应用
如何使用Backbone创建应用

RequireJS：RequireJS是一个JavaScript类库，同时它是一个模块加载器。 它一般用在浏览器的环境下，但是它也能够用在其他JavaScript运行环境下，比如说Rhino和Nodejs，使用RequireJS能够提高访问速度并且提高代码质量。
使用Backbone.js 创建模块化开发

RequireJS是一个脚本加载的JavaScript库，作者是 詹姆斯·伯克(James Burke)。RequireJS能够帮助加载多个脚本文件，定义模块的依赖关系，同时装载像txt文件的非脚本内容。
为什么要在Backbone中使用RequireJS呢？虽然Backbone为应用提供清晰地结构使得一问世就受到很多人的关注，但还是有些关键领域需要额外的帮助：
Backbone本身并不支持某种模块化的开发，虽然这意味着开发人员能够更加自由的选择开发方式，例如模块式或对象字面量的形式来组织应用程序（这两种方式工作都很好），同时也意味着开发人员并不知道在真正开发过程中到底哪种方式更加优秀，例如依赖管理。

使用Backbone.js 创建模块化开发

RequireJS与AMD（一步模块定义）模式是兼容的，AMD模式的诞生是为了编写比“编写许多的脚本标签，手动的管理它们之间的隐形依赖关系”这种状况更优秀的脚本的。除了允许明确的声明依赖关系之外，AMD在浏览器上运行也是非常优秀的，支持通过字符串ID来定义依赖关系(模块可以指定其名称，模块之间的依赖能够通过这个名称来进行)，在一个文件中定义多个模块同时给你一些好用的方式来避免污染全局变量。
我们会更多的讨论依赖管理，因为如果通过手动管理依赖关系同时保持依赖关系的正确性是很具有挑战性的。当我们使用JavaScript编写模块，理想的状态是我们能够智能的复用代码模块，有时这也意味着在运行的时候动态的加载某个功能或模块所需要的脚本，这就避免了用户第一次打开应用就过多的加载脚本的问题。
使用Backbone.js 创建模块化开发

回想一下我们在使用Gmail的Web客户端的时候，当用户第一次加载页面后，Google把一些小部件或者说工具条隐藏，直到用户想要得到某个工具的时候（点击“展开”按钮）。思考一下这时候使用动态依赖加载，Google就可以在页面初始装载的时候选择不加载聊天模块，而只有在用户需要的时候去加载，这样就减轻了页面初始的时候加载脚本的负担。这样不仅提高了性能和减少了加载时间，同时在大型的应用程序中是非常有用的。
使用Backbone.js 创建模块化开发

Thank You！