• Save
前端MVC之backbone
Upcoming SlideShare
Loading in...5
×
 

前端MVC之backbone

on

  • 5,918 views

分享前端MVC

分享前端MVC

Statistics

Views

Total Views
5,918
Views on SlideShare
4,644
Embed Views
1,274

Actions

Likes
27
Downloads
0
Comments
3

13 Embeds 1,274

http://biaoge.me 1029
http://jeekundo.com 128
http://fe.com 40
http://web.vabx.com 30
http://69.85.85.110 21
http://www.jeekundo.com 10
http://jamiexie.me 9
http://xianguo.com 2
http://cache.baidu.com 1
http://reader.youdao.com 1
http://feeds.feedburner.com 1
http://biaoge.me HTTP 1
http://translate.googleusercontent.com 1
More...

Accessibility

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…
  • 请问有关于这个PPT的视频演讲吗?
    Are you sure you want to
    Your message goes here
    Processing…
  • 最近正在学这个
    Are you sure you want to
    Your message goes here
    Processing…
  • cool
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

前端MVC之backbone 前端MVC之backbone Presentation Transcript

  • 前端MVC之BACKBONE.JS
  • Single page app 特点:  页面不整体刷新  与服务器的交互均由Ajax完成  服务端只负责提供数据接口(瘦服务器)  逻辑、展现、行为都交给javascript来处理(胖客户端)  速度更快、体验较好
  • 问题 JS开发量较大、逻辑较复杂 如果整个App只有一个URL,不便于收藏和传播 无浏览器历史记录,浏览器前进后退按钮失效 对搜索引擎不友好
  • 前端MVC 使程序结构清晰、便于理解 减少重复劳动 易于扩展
  • Backbone.jsBackbone.js通过Models、Collections、Views使web应用程序具有良好的结构
  • 使用Backbone的网站
  • Backbone.Model Model包含数据和与数据相关的逻辑。 转换、验证、需计算的属性、访问控制等。
  • Javascript中一条Todo通常表示如下:{ text: ‚这是一条待做事项‛, done: false, order: 5}
  • 以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 });
  • 验证var Todo = Backbone.Model.extend({ defaults: { done: fase }, validate: function(attrs) { if (attrs.text.length < 2) { return ‚待做事项的内容不得少于两个字‛; }, … }})
  • todo.get(‚title‛);todo.set({title: ‚又一条todo‛, done: true});todo.has(‚done‛);todo.clear();todo.fetch();todo.save();
  • Backbone.Collection Collection就是Model的有序集合  change事件,当所包含的Model发生变化时触发  add、remove事件  从服务器获取(fetch)数据
  • 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() ); }});
  • 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}]);
  • 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);
  • list.fetch();list.fetch({data: {page: 3}});list.create()var todoItem = new Todo({ … });todoItem.save();list.add(todoItem);
  • 和服务器端的通信 model.save() model.fetch() model.destroy() collection.fetch() collection.creat()
  • Backbone.sync RESTful架构 http://www.ruanyifeng.com/blog/2011/09/restful.html 每一个URI代表一种资源; 客户端和服务器之间,传递这种资源的某种表现层; 客户端通过四个HTTP动词,对服务器端资源进行操作,实现"表现层 状态转化"。
  • /tasks (URL只含名词,不含动词) 四个HTTP动词表示要对资源进行何种操作 Create  POST /tasks Read  GET /tasks[/id] Update  PUT /tasks/id Delete  DELETE /tasks/id
  • Backbone.Router  Router为Web应用中的不同状态提供可链接的,可作为收藏的、可分享的URL;  为客户端页面提供路由,并将它们与方法和事件关联起来。
  • HTML5之前,使用hash,如在URL末尾加#page如:http://www.tttt.com/aaa#page现在高级浏览器支持history.pushState,可以直接在后面加/page如:http://www.tttt.com/aaa/page
  • 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 ... }});
  • var router = new Workspace();router.on(‚route:search‛, function(query) {});router.navigate(‚search/kiwis‛);router.navigate(‚search/kiwis‛, {trigger: true});
  • Backbone.history.start();Backbone.history.start({ pushState: true, root:‛/public/search‛});
  • Backbone.View Backbone.View.extend(properties, [classProperties]);
  • 实例化的时候需创建的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() {}});
  • 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() }; }});
  • var Bookmark = Backbone.View.extend({ … render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; } …});
  • JS模版引擎JS模版引擎简化了将数据转换成HTML串的过程已 成为Web app不可或缺的一部分 可减少重复劳动、节省开发和调试时间
  • 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>
  • 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; }});
  • Mustache.js
  • Mustache.to_html(template, data); https://github.com/janl/mustache.js/
  • 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
  • 事件驱动 事件引发Model的变化 click submit enter change …View Model 事件引发View的改变 Collectio n change reset add remove sync destroy …
  • ControllerController是Model和View的中介,当Model变化时负责更新View,当View发生变化时负责更新Model
  •  Model • Backbone.Model View • Backbone.Collectio n Controller • Backbone.View • Backbone.Router
  • Thank you!