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
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
440
Claude Codeは仕様駆動の夢を見ない
gotalab555
0
180
alecthomas/kong はいいぞ
fujiwara3
6
1.4k
robocopy の怖い話/scary-story-about-robocopy
emiki
0
460
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
4
500
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
inariku
3
270
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
410
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
230
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
110
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
370
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1.1k
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
6
230
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Being A Developer After 40
akosma
90
590k
Into the Great Unknown - MozCon
thekraken
40
2k
Faster Mobile Websites
deanohume
308
31k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
2.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Language of Interfaces
destraynor
158
25k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Adaptive Systems
keathley
43
2.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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应用到你的网站页面中,且页面中并没有复杂的逻辑和 结构,那么这只会让你的页面更加繁琐和难以维护。
谢谢