Backbone.js 初探

分享backbone的使用场景及实例分析-- 圈圈36期

Transcript

1. backbone.js  
2. Google上的趋势图  
3. 谁在用Backbone.js   WordPress.com! LinkedIn mobile! Foursquare! Pandora
4. 越来越复杂，强大的web应用   为什么要用Backbone.js  
5. 越来越复杂，强大的web应用   越来越多的数据像胶水一样耦合在Dom上   通过疯狂的尝试，让服务端的数据与UI保持同步   一堆jQuery选择器和回调函数，且绑定了写死的ｄｏｍ节点   为什么要用Backbone.js  
6. 为什么要用Backbone.js   jQuery等类库仅仅完成DOM、事件、   异步等基本功能    有计划开发，结构化管理   ?  
7. 什么是Backbone.js   是一套轻量级的MVC框架   将杂乱的js代码结构化的管理起来   将数据、视图、逻辑分离   建立与服务端、视图之间的无缝连接  
8. 需要准备一些东西   Backbone.js源文件（6.3kb）   唯一必选依赖Underscore.js（4kb）   Dom操作，jQuery或者Zepto二选一   它封装了对集合、数组、对象、函数的常用操作，就像jQuery封装DOM对 象一样，你能通过Underscore轻易地访问和操作JavaScript内部对象。     还提供了一些非常实用的函数方法，如：函数节流、模板解析等。    
9. 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。  
10. 简单实例  
11. 简单实例-剖析   Model Collection
12. 简单实例-剖析   todos-View App-View
13. 简单实例-代码框架  
14. 简单实例-Model  
15. 简单实例-collection  
16. 简单实例-item  view  
17. 简单实例-item  view  
18. 简单实例-app  view  
19. Backbone.js的适用性   如果你正准备构建一个大型或复杂的单页Web应用，那么Backbone再适 合不过。     如果想将Backbone应用到你的网站页面中，且页面中并没有复杂的逻辑和 结构，那么这只会让你的页面更加繁琐和难以维护。  
20. 谢谢