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
140
Other Decks in Technology
See All in Technology
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
3
250
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
130
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
140
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
270
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
3
1.4k
20250623 Findy Lunch LT Brown
3150
0
750
OAuth/OpenID Connectで実現するMCPのセキュアなアクセス管理
kuralab
5
840
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
270
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
140
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
150
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
9
2.2k
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
920
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Visualization
eitanlees
146
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How STYLIGHT went responsive
nonsquared
100
5.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
4 Signs Your Business is Dying
shpigford
184
22k
Designing for Performance
lara
609
69k
A designer walks into a library…
pauljervisheath
206
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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应用到你的网站页面中,且页面中并没有复杂的逻辑和 结构,那么这只会让你的页面更加繁琐和难以维护。
谢谢