分享前端MVC

1. 前端MVC之BACKBONE.JS

2. Single page app
特点：
 页面不整体刷新
 与服务器的交互均由Ajax完成
 服务端只负责提供数据接口（瘦服务器）
 逻辑、展现、行为都交给javascript来处理（胖客户端）
 速度更快、体验较好

3. 问题
 JS开发量较大、逻辑较复杂
 如果整个App只有一个URL，不便于收藏和传播
 无浏览器历史记录，浏览器前进后退按钮失效
 对搜索引擎不友好

4. 前端MVC
 使程序结构清晰、便于理解
 减少重复劳动
 易于扩展

5. Backbone.js
Backbone.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) { return
todo.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；
 为客户端页面提供路由，并将它们与方法和事件关联起来。

22. HTML5之前，使用hash，如在URL末尾加#page
如：http://www.tttt.com/aaa#page
现在高级浏览器支持history.pushState，可以直接在后面加/page
如：http://www.tttt.com/aaa/page

23. 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
...
}
});

24. var router = new Workspace();
router.on(‚route:search‛, function(query) {
});
router.navigate(‚search/kiwis‛);
router.navigate(‚search/kiwis‛, {trigger: true});

25. Backbone.history.start();
Backbone.history.start({
pushState: true,
root:‛/public/search‛
});

26. Backbone.View
Backbone.View.extend(properties, [classProperties]);

27. 实例化的时候需创建的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() {}
});

28. 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()
};
}
});

29. var Bookmark = Backbone.View.extend({
…
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
…
});

30. JS模版引擎
JS模版引擎简化了将数据转换成HTML串的过程已
成为Web app不可或缺的一部分
可减少重复劳动、节省开发和调试时间

31. 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>

32. 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;
}
});

33. Mustache.js

36. Mustache.to_html(template, data);
https://github.com/janl/mustache.js/

37. EJS
template = 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

38. 事件驱动
事件引发Model的变化
click submit enter change …
View Model
事件引发View的改变
Collectio
n
change reset add remove
sync destroy …

39. Controller
Controller是Model和View的中介，当Model变
化时负责更新View，当View发生变化时负责更新
Model

40.  Model • Backbone.Model
 View • Backbone.Collectio
n
 Controller
• Backbone.View
• Backbone.Router

41. Thank you!