• Save
使用backbone.js开发web应用
Upcoming SlideShare
Loading in...5
×
 

使用backbone.js开发web应用

on

  • 4,075 views

 

Statistics

Views

Total Views
4,075
Views on SlideShare
3,554
Embed Views
521

Actions

Likes
6
Downloads
0
Comments
0

2 Embeds 521

http://ichuan.net 520
http://nodeslide.herokuapp.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

使用backbone.js开发web应用 使用backbone.js开发web应用 Presentation Transcript

  • 使用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、PUT、DELETE
  • 客户端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的属性值展示给用户 – 绑定事件,把用户的更改反馈给Model• C: Backbone.Router – 程序入口 – 维护历史浏览记录和路由,创建各个View
  • backbone.js中的MVC C M V
  • 示例:一个 todo list 应用 要做成全 Ajax 无刷新应用
  • 普通代码$(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); } });
  • 普通代码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);
  • 文艺代码var Todo = Backbone.Model.extend({ defaults: { content: , done: false }});var Todos = Backbone.Collection.extend({ model: Todo, url: /todos/});
  • 文艺代码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(){}
  • 文艺代码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(); },
  • 文艺代码 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); }});
  • 文艺代码var App = Backbone.Router.extend({ routes: { : main }, initialize: function(){ // hotkeys, misc }, main: function(){ this.view = new TodoView; }});$(function(){ new App; });
  • 完整代码在 911.im/P