Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Backbone.js 初探
Search
Alibaba.com
May 20, 2013
Technology
2
230
Backbone.js 初探
分享backbone的使用场景及实例分析-- 圈圈36期
Alibaba.com
May 20, 2013
Tweet
Share
More Decks by Alibaba.com
See All by Alibaba.com
Atom
alibaba
0
130
jQuery Selector 源码剖析
alibaba
0
150
Other Decks in Technology
See All in Technology
SOTA競争から人間を超える画像認識へ
shinya7y
0
600
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
280
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
720
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
4
1.2k
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
1
660
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
130
20251027_findyさん_音声エージェントLT
almondo_event
2
470
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
140
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
2
370
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
1k
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
500
Featured
See All Featured
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
66
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Unsuck your backbone
ammeep
671
58k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Bash Introduction
62gerente
615
210k
Fireside Chat
paigeccino
41
3.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
It's Worth the Effort
3n
187
28k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Transcript
backbone.js
Google上的趋势图
谁在用Backbone.js WordPress.com! LinkedIn mobile! Foursquare! Pandora
越来越复杂,强大的web应用 为什么要用Backbone.js
越来越复杂,强大的web应用 越来越多的数据像胶水一样耦合在Dom上 通过疯狂的尝试,让服务端的数据与UI保持同步 一堆jQuery选择器和回调函数,且绑定了写死的dom节点 为什么要用Backbone.js
为什么要用Backbone.js jQuery等类库仅仅完成DOM、事件、 异步等基本功能 有计划开发,结构化管理 ?
什么是Backbone.js 是一套轻量级的MVC框架 将杂乱的js代码结构化的管理起来 将数据、视图、逻辑分离 建立与服务端、视图之间的无缝连接
需要准备一些东西 Backbone.js源文件(6.3kb) 唯一必选依赖Underscore.js(4kb) Dom操作,jQuery或者Zepto二选一 它封装了对集合、数组、对象、函数的常用操作,就像jQuery封装DOM对 象一样,你能通过Underscore轻易地访问和操作JavaScript内部对象。
还提供了一些非常实用的函数方法,如:函数节流、模板解析等。
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。
简单实例
简单实例-剖析 Model Collection
简单实例-剖析 todos-View App-View
简单实例-代码框架
简单实例-Model
简单实例-collection
简单实例-item view
简单实例-item view
简单实例-app view
Backbone.js的适用性 如果你正准备构建一个大型或复杂的单页Web应用,那么Backbone再适 合不过。 如果想将Backbone应用到你的网站页面中,且页面中并没有复杂的逻辑和 结构,那么这只会让你的页面更加繁琐和难以维护。
谢谢