Your SlideShare is downloading. ×
使用backbone.js开发web应用      yc@2011/12/15
内容• Web应用的作用• REST模式• 客户端MVC模型• backbone.js
Web应用的作用
需求• 我们有记录、管理、计算、展示不同格式  数据的需求• 远程服务器上的数据库 + 客户端浏览器• 最简单粗暴的工具是?
php*admin
更人性化的应用
我们要做的是更具体化、人性化、   体验更好的web应用
REST模式
REST介绍• Representational State Transfer  (表征状态转移)• 一种web service实现方案• 简洁的设计• 网页浏览抽象为浏览器对URI(资源)的状  态进行的变更• 4 种操作:POST、GET、...
客户端MVC模型
一般web开发• 过程式
一般web开发• 服务端MVC模型
客户端MVC模型
客户端MVC模型• 优点 – 应用逻辑转移到浏览器端,服务端压力小 – 代码结构清晰,更易维护 – 不用再写成堆的$(…),代码更漂亮 – 服务端完成后同时具备了良好的API接口 – 不用整页刷新,传输数据少,速度更快,用户   体验更好 – ...
backbone.js
backbone.js简介• Backbone: [ˈbækˈbon n.脊骨,脊柱                    ]• 一个前端MVC模式的javascript库• 完整REST支持(也可模拟REST方式)
create
update
read
delete
backbone.js中的MVC• M: Backbone.Model  – 将属性的改变通知给View  – 从View获得新的属性值,同步到服务端• V: Backbone.View  – 将Model的属性值展示给用户  – 绑定事件,把...
backbone.js中的MVC       C M      V
示例:一个 todo list 应用 要做成全 Ajax 无刷新应用
普通代码$(function(){      $.getJSON(/todos/, function(res){                var ul = $(#todos), li;                for (var i ...
普通代码var doSubmit = function(){      var el = $(#new-todo), val = el.val();      $.post(/todo/new/, {             content: ...
文艺代码var Todo = Backbone.Model.extend({       defaults: {              content: ,              done: false       }});var To...
文艺代码var TodoRow = Backbone.View.extend({       tagName: li,       events: {              click .check: check       },     ...
文艺代码var tpl = <input id="new-todo" /><input id="submit" /><ul></ul>;var TodoView = Backbone.View.extend({       template: ...
文艺代码      addTodo: function(todo){             var row = new TodoRow({model: todo});             this.$(ul).prepend(row.el...
文艺代码var App = Backbone.Router.extend({      routes: {             : main      },      initialize: function(){             ...
完整代码在 911.im/P
完
Upcoming SlideShare
Loading in...5
×

使用backbone.js开发web应用

3,699

Published on

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

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

No notes for slide

Transcript of "使用backbone.js开发web应用"

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

×