Your SlideShare is downloading. ×
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
使用backbone.js开发web应用
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

使用backbone.js开发web应用

3,683

Published on

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,683
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 使用backbone.js开发web应用 yc@2011/12/15
  • 2. 内容• Web应用的作用• REST模式• 客户端MVC模型• backbone.js
  • 3. Web应用的作用
  • 4. 需求• 我们有记录、管理、计算、展示不同格式 数据的需求• 远程服务器上的数据库 + 客户端浏览器• 最简单粗暴的工具是?
  • 5. php*admin
  • 6. 更人性化的应用
  • 7. 我们要做的是更具体化、人性化、 体验更好的web应用
  • 8. REST模式
  • 9. REST介绍• Representational State Transfer (表征状态转移)• 一种web service实现方案• 简洁的设计• 网页浏览抽象为浏览器对URI(资源)的状 态进行的变更• 4 种操作:POST、GET、PUT、DELETE
  • 10. 客户端MVC模型
  • 11. 一般web开发• 过程式
  • 12. 一般web开发• 服务端MVC模型
  • 13. 客户端MVC模型
  • 14. 客户端MVC模型• 优点 – 应用逻辑转移到浏览器端,服务端压力小 – 代码结构清晰,更易维护 – 不用再写成堆的$(…),代码更漂亮 – 服务端完成后同时具备了良好的API接口 – 不用整页刷新,传输数据少,速度更快,用户 体验更好 – 防普通爬虫 –…
  • 15. backbone.js
  • 16. backbone.js简介• Backbone: [ˈbækˈbon n.脊骨,脊柱 ]• 一个前端MVC模式的javascript库• 完整REST支持(也可模拟REST方式)
  • 17. create
  • 18. update
  • 19. read
  • 20. delete
  • 21. backbone.js中的MVC• M: Backbone.Model – 将属性的改变通知给View – 从View获得新的属性值,同步到服务端• V: Backbone.View – 将Model的属性值展示给用户 – 绑定事件,把用户的更改反馈给Model• C: Backbone.Router – 程序入口 – 维护历史浏览记录和路由,创建各个View
  • 22. backbone.js中的MVC C M V
  • 23. 示例:一个 todo list 应用 要做成全 Ajax 无刷新应用
  • 24. 普通代码$(function(){ $.getJSON(/todos/, function(res){ var ul = $(#todos), li; for (var i = 0, j = res.length; i < j; i++){ li = $(<li><divclass="check"></div></li>); li.text(res[i].content); if (res[i].done) li.addClass(done); ul.append(li); } });
  • 25. 普通代码var doSubmit = function(){ var el = $(#new-todo), val = el.val(); $.post(/todo/new/, { content: val }, function(){ el.text(); $(#todos).prepend($(<li/>).text(val)); });};$(#submit).click(doSubmit);$(#new-todo).keydown(function(e){ (e.keyCode == 13) && $(#submit).trigger(click);
  • 26. 文艺代码var Todo = Backbone.Model.extend({ defaults: { content: , done: false }});var Todos = Backbone.Collection.extend({ model: Todo, url: /todos/});
  • 27. 文艺代码var TodoRow = Backbone.View.extend({ tagName: li, events: { click .check: check }, initialize: function(){ _.bindAll(this, render, check, remove); this.model.bind(change, this.render); this.model.bind(destroy, this.remove); this.render(); }, render: function(){ var el = $(this.el).text(this.model.get(content)); if (this.model.get(done)) el.addClass(done); return this; }, check: function(){}
  • 28. 文艺代码var tpl = <input id="new-todo" /><input id="submit" /><ul></ul>;var TodoView = Backbone.View.extend({ template: tpl, events: { click #submit: doSubmit, keydown #new-todo: testReturn }, initialize: function(){ $(document.body).append(this.el); _.bindAll(this, addTodo, render); this.todos = new Todos; this.todos.bind(add, this.addTodo); this.todos.bind(reset, this.render); this.todos.fetch(); }, testReturn: function(e){ (e.keyCode == 13) && this.doSubmit(); },
  • 29. 文艺代码 addTodo: function(todo){ var row = new TodoRow({model: todo}); this.$(ul).prepend(row.el); }, doSubmit: function(){ var val = this.$(#new-todo).val(), todo = new Todo; todo.save({content: val}, { success: this.addTodo } }, render: function(){ $(this.el).html(this.template); this.todos.each(this.addTodo); }});
  • 30. 文艺代码var App = Backbone.Router.extend({ routes: { : main }, initialize: function(){ // hotkeys, misc }, main: function(){ this.view = new TodoView; }});$(function(){ new App; });
  • 31. 完整代码在 911.im/P
  • 32.

×