Backbone.js 初探 - Speaker Deck

Slide 1

Slide 1 text

backbone.js

Slide 2

Slide 2 text

Google上的趋势图

Slide 3

Slide 3 text

谁在用Backbone.js WordPress.com! LinkedIn mobile! Foursquare! Pandora

Slide 4

Slide 4 text

越来越复杂，强大的web应用为什么要用Backbone.js

Slide 5

Slide 5 text

越来越复杂，强大的web应用越来越多的数据像胶水一样耦合在Dom上通过疯狂的尝试，让服务端的数据与UI保持同步一堆jQuery选择器和回调函数，且绑定了写死的ｄｏｍ节点为什么要用Backbone.js

Slide 6

Slide 6 text

为什么要用Backbone.js jQuery等类库仅仅完成DOM、事件、异步等基本功能有计划开发，结构化管理 ?

Slide 7

Slide 7 text

什么是Backbone.js 是一套轻量级的MVC框架将杂乱的js代码结构化的管理起来将数据、视图、逻辑分离建立与服务端、视图之间的无缝连接

Slide 8

Slide 8 text

需要准备一些东西 Backbone.js源文件（6.3kb）唯一必选依赖Underscore.js（4kb） Dom操作，jQuery或者Zepto二选一它封装了对集合、数组、对象、函数的常用操作，就像jQuery封装DOM对象一样，你能通过Underscore轻易地访问和操作JavaScript内部对象。还提供了一些非常实用的函数方法，如：函数节流、模板解析等。

Slide 9

Slide 9 text

Backbone的特性 Model：数据对象，提供set和get操作内部属性。假如定义validate方法，每次set时候会执行，假如没有通过校验会触发error事件，且终止set Collection：模型的集合，提供add和remove方法来操作集合内容。通过Undersore.js提供的方法对数组进行高级操作。 View：UI逻辑块，并非传统意义上的HTML和模板。通过Undersore.js的_.template作为模板引擎。通过jQuery作为选择器。自身提供events进行事件委托。 Router：使URL的hash片段跟app的状态联系在一起，使url可被分享、收藏。通过 Backbone.history可以支持历史记录。将路由和一些回调函数进行合理组织，可以形成整个应用的 Controller。

Slide 10

Slide 10 text

简单实例

Slide 11

Slide 11 text

简单实例-剖析 Model Collection

Slide 12

Slide 12 text

简单实例-剖析 todos-View App-View

Slide 13

Slide 13 text

简单实例-代码框架

Slide 14

Slide 14 text

简单实例-Model

Slide 15

Slide 15 text

简单实例-collection

Slide 16

Slide 16 text

简单实例-item view

Slide 17

Slide 17 text

简单实例-item view

Slide 18

Slide 18 text

简单实例-app view

Slide 19

Slide 19 text

Backbone.js的适用性如果你正准备构建一个大型或复杂的单页Web应用，那么Backbone再适合不过。如果想将Backbone应用到你的网站页面中，且页面中并没有复杂的逻辑和结构，那么这只会让你的页面更加繁琐和难以维护。

Slide 20

Slide 20 text

谢谢