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
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
490
20251024_TROCCO/COMETAアップデート紹介といくつかデモもやります!_#p_UG 東京:データ活用が進む組織の作り方
soysoysoyb
0
120
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
160
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
2
330
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
450
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
280
仕様駆動開発を実現する上流工程におけるAIエージェント活用
sergicalsix
1
240
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
140
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
5
1.3k
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
3
1.2k
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
1
510
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
233
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Facilitating Awesome Meetings
lara
57
6.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Statistics for Hackers
jakevdp
799
220k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
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应用到你的网站页面中,且页面中并没有复杂的逻辑和 结构,那么这只会让你的页面更加繁琐和难以维护。
谢谢