Your SlideShare is downloading. ×
0
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
前端MVC之backbone
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

前端MVC之backbone

6,013

Published on

分享前端MVC

分享前端MVC

Published in: Technology, Design
3 Comments
28 Likes
Statistics
Notes
  • 请问有关于这个PPT的视频演讲吗?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 最近正在学这个
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,013
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
3
Likes
28
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. 前端MVC之BACKBONE.JS
  • 2. Single page app 特点:  页面不整体刷新  与服务器的交互均由Ajax完成  服务端只负责提供数据接口(瘦服务器)  逻辑、展现、行为都交给javascript来处理(胖客户端)  速度更快、体验较好
  • 3. 问题 JS开发量较大、逻辑较复杂 如果整个App只有一个URL,不便于收藏和传播 无浏览器历史记录,浏览器前进后退按钮失效 对搜索引擎不友好
  • 4. 前端MVC 使程序结构清晰、便于理解 减少重复劳动 易于扩展
  • 5. Backbone.jsBackbone.js通过Models、Collections、Views使web应用程序具有良好的结构
  • 6. 使用Backbone的网站
  • 7. Backbone.Model Model包含数据和与数据相关的逻辑。 转换、验证、需计算的属性、访问控制等。
  • 8. Javascript中一条Todo通常表示如下:{ text: ‚这是一条待做事项‛, done: false, order: 5}
  • 9. 以Backbone来表示这条Todo: var Todo = Backbone.Model.extend({ … toggle: function(){ this.save({done: !this.get(‚done‛)}); }, initialize: function() { console.log(‚model已经创建‛); } … }); var todoItem = new Todo({ text: ‚这是一条待做事项‛, done: false, order: 5 });
  • 10. 验证var Todo = Backbone.Model.extend({ defaults: { done: fase }, validate: function(attrs) { if (attrs.text.length < 2) { return ‚待做事项的内容不得少于两个字‛; }, … }})
  • 11. todo.get(‚title‛);todo.set({title: ‚又一条todo‛, done: true});todo.has(‚done‛);todo.clear();todo.fetch();todo.save();
  • 12. Backbone.Collection Collection就是Model的有序集合  change事件,当所包含的Model发生变化时触发  add、remove事件  从服务器获取(fetch)数据
  • 13. var TodoList = Backbone.Collection.extend({ url : ./todos, model: Todo, done : function() { return this.filter(function(todo) { returntodo.get(done); }); }, remaining: function() { return this.without.apply( this, this.done() ); }});
  • 14. var list = new TodoList([ {text: "aaa", done: false, order: 1}, {text: "bbb", done: false, order: 2}, {text: "ccc", done: false, order: 3}, {text: "ddd", done: false, order: 4}]);
  • 15. list.add({text: ‚一条待做事项‛, done: false, order: 5});list.reset({text: ‚待做事项‛, done: false, order: 7});var todoItem = new Todo({ … });list.add(todoItem);list.toJSON();list.get(id);list.at(5);
  • 16. list.fetch();list.fetch({data: {page: 3}});list.create()var todoItem = new Todo({ … });todoItem.save();list.add(todoItem);
  • 17. 和服务器端的通信 model.save() model.fetch() model.destroy() collection.fetch() collection.creat()
  • 18. Backbone.sync RESTful架构 http://www.ruanyifeng.com/blog/2011/09/restful.html 每一个URI代表一种资源; 客户端和服务器之间,传递这种资源的某种表现层; 客户端通过四个HTTP动词,对服务器端资源进行操作,实现"表现层 状态转化"。
  • 19. /tasks (URL只含名词,不含动词) 四个HTTP动词表示要对资源进行何种操作 Create  POST /tasks Read  GET /tasks[/id] Update  PUT /tasks/id Delete  DELETE /tasks/id
  • 20. Backbone.Router  Router为Web应用中的不同状态提供可链接的,可作为收藏的、可分享的URL;  为客户端页面提供路由,并将它们与方法和事件关联起来。
  • 21. HTML5之前,使用hash,如在URL末尾加#page如:http://www.tttt.com/aaa#page现在高级浏览器支持history.pushState,可以直接在后面加/page如:http://www.tttt.com/aaa/page
  • 22. var Workspace = Backbone.Router.extend({ routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() { ... }, search: function(query, page) { //query = kiwis page = 7 ... }});
  • 23. var router = new Workspace();router.on(‚route:search‛, function(query) {});router.navigate(‚search/kiwis‛);router.navigate(‚search/kiwis‛, {trigger: true});
  • 24. Backbone.history.start();Backbone.history.start({ pushState: true, root:‛/public/search‛});
  • 25. Backbone.View Backbone.View.extend(properties, [classProperties]);
  • 26. 实例化的时候需创建的View的根节点var DocumentRow = Backbone.View.extend({ tagName: "li‛, className: ‛todo-item‛, 给视图内的元素绑定事件 events: { "click .check" : "toggleDone", "dblclick div.todo-text" : "edit", "click span.todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter‛ }, render: function() { $(this.el).html(this.template(this.model.toJSON())); }, 事件处理函数和其他方法 toggleDone: {}, edit: function() {}, clear: function() {}});
  • 27. this.$(selector) $(selector, this.el)ui.Chapter = Backbone.View.extend({ serialize : function() { return { title: this.$(".title").text(), start: this.$(".start-page").text(), end : this.$(".end-page").text() }; }});
  • 28. var Bookmark = Backbone.View.extend({ … render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; } …});
  • 29. JS模版引擎JS模版引擎简化了将数据转换成HTML串的过程已 成为Web app不可或缺的一部分 可减少重复劳动、节省开发和调试时间
  • 30. Underscore.js template{text: ‘这是一条待做事项’, done: false, order: 5}<script id="item-template" type="text/template"> <div class="todo <%= done ? done : %>"> <div class="display"> <input class="check" type="checkbox" <%= done ?checked="checked" : %> /> <div class="todo-text"></div> <span id="todo-destroy"></span> </div> <div class="edit"> <input type="text" value="" class="todo-input"/> </div> </div></script>
  • 31. window.TodoView = Backbone.View.extend({ tagName : "li‛, template: _.template( $(#item-template).html() ), render : function() { $(this.el).html(this.template(this.model.toJSON())); this.setText(); return this; }});
  • 32. Mustache.js
  • 33. Mustache.to_html(template, data); https://github.com/janl/mustache.js/
  • 34. EJStemplate = new EJS({url: /mytemplate.ejs})html = new EJS({url: /template.ejs}).render(data)f = new EJS({url: /mytemplate.ejs}).update(my_element)new EJS({url: /mytemplate.ejs}).update(my_element, /data.json)new EJS({url: /mytemplate.ejs}).update(my_element, {supplies:[mop]})http://embeddedjs.com/http://code.google.com/p/embeddedjavascript/wiki/Templates
  • 35. 事件驱动 事件引发Model的变化 click submit enter change …View Model 事件引发View的改变 Collectio n change reset add remove sync destroy …
  • 36. ControllerController是Model和View的中介,当Model变化时负责更新View,当View发生变化时负责更新Model
  • 37.  Model • Backbone.Model View • Backbone.Collectio n Controller • Backbone.View • Backbone.Router
  • 38. Thank you!

×