前端MVC之BackboneJS

前端MVC
之Backbone
miyukizhang

提纲
• Why
• What
• 案例
• Questions

Why
• JS开发现状：
1. 数据和视图耦合过紧
var list = “”;
$.each (data, function(index. value){
list += “<li id=‘item-‐‑” + value.Id + “’>” + value.Name + “</li>”;
});
$(“ul”).append(list);

Why
2. 回调过多
$.getJSON(“/Items”, function(data){
var list = “”;
$.each(data, function(index, value){
list += “<li id=‘item-‐‑” + value.Id + “’>” + value.Name + “</li>”;
});
$(“ul”).append(list);
$(“li”).click(function(){
var $this = $(this);
var id = $this.aUr(“id”).replace(“items-‐‑”, “”);
$.post(“/Items”, {id: id}, function(){
$this.fadeOut(function(){
$this.remove();
});
});
});
});

Why
• 遇到的问题：
o 程序结构不清晰，不利于理解
o 大量的字符串拼接
o 大量的回调函数
o 难以维护

Why
• 现代Web App的特点：
o 页面不整体刷新
o 与服务器的交互均由Ajax完成
o 服务器只负责提供数据接口
o 逻辑、展现、行为都交给JavaScript处理
o 速度更快、体验更好

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

Why
• So，我们需要一个解决方案：
o 使程序结构清晰、便于理解
o 将数据与UI解耦
o 不存在回调函数
o 减少重复劳动
o 易于维护和扩展

Why
• So，我们需要一个解决方案（更实际地）：
o 基于数据层的RESTful Web服务
o 事件（数据与UI解耦）
o 一个牢固的路由系统
o 一个模板引擎
o 一个可以解决上面所有需求轻量JavaScript框架

What
Backbone.js gives structure to web
applications by providing models with key-value
binding and custom
events, collections with a rich API of
enumerable functions, views with declarative
event handling, and connects it all to your
existing API over a RESTful JSON interface.

What
• 依赖：
o Underscore.js
o jQuery 或者 Zepto
o Json2.js

What
MVC
Model / Collection 数据（模型）

What
MVC
Template 展现层（视图）

What
MVC
View 控制器

What
MVC
View 控制器
Router ???

What
MVC
View 控制器
Router ???
Controller

What
• 模型（Model）
o 用来存放应用的所有数据对象
o 能够被创建、验证和销毁等
o 属性的改变会触发“change”事件

What
模型
• Fetch HTTP GET /url
• Save(new) HTTP POST /url
• Save HTTP PUT /url/id
• Destroy HTTP DELETE /url/id

What
var Comment = Backbone.Model.extend();
var comment = new Comment({
id: 6378,
text: “高富帅的设计”,
created_at: “3小时前”,
user: {
id: ”sasaliu”,
user_name_zh: “刘沙”
}
});

• extend
• constructor/initialize
• get
• set
• escape
• has
• unset
• clear
• id
• cid
• attributes
• defaults
• toJSON
comment.get(‘text’
); //高富帅的设计
comment.set(
{‘text’:”<script>console.log(‘xss’)</script>”},
{silent: true}
);
comment.escape(‘text’);//
<script>console.log(&#x27xss&#x27)</
script>
comment.has(‘city’
);//false
comment.unset(‘text’);
//触发’change’事件
var Comment = new Backbone.Model.extend({
//hash or function()
defaults: {
‘root’: ‘tea.cdc.com’
},
initialize: function(){…}
});
var comment = new Comment();
comment.get(‘root’);
//’tea.cdc.com’

• fetch
• save
• desrtoy
• validate
• url
• urlRoot
• parse
• clone
• isNew
• change
• hasChanged
• changedAttributes
• previous
• previousAttributes
urlRoot: ‘/comments’,
initialize: function(aUrs){ … }
});
var comment = new Comment({id: 123456});
comment.url();
// ‘/comments/123456’
comment.fetch();
initialize: function(aUrs){ … },
validate: function(aUrs){
if(aUrs.text.length < 1){
return ‘回复不能为空’;
}
}
});
var comment = new Comment();
comment.set({text: ‘’},{
error: function(model, error){
alert(error);
}
});

What
• 集合（Collection）
o 模型的有序组合
o Add,Remove,Fetch,Reset,Create,Sort

What
var Comments = new Backbone.Collection.extend({
model: Comment,
initialize: function(models, options){
}
});

What
[
{
id: 6378,
text: “高富帅的设计”,
created_at: “3小时前”,
user: {
id: ”sasaliu”,
user_name_zh: “刘沙”,
user_name_en: "ʺsasaliu"ʺ,
small_avatar: "ʺ/data/photo/sp__201203291751346381.jpg"ʺ
...
}
},
{...}
{...}
]

What
• extend
• model
• constructor/initialize
• models
• toJSON
• Underscore Methods(25)
• get
• getByCid
• at
• length
• comparator
• sort
• pluck
• url
• parse
Comments = Backbone.Collection.extend({
model: Comment,
initialize: function(models, options){
this.url = “/comments”;
},
comparator: function(model){
return model.get(“id”);
}
});

Add,Remove,Fetch,Reset,Create,Sort
collection.create(aUributes, [options])
var Comments = new Comments([{…}]);
Comments.create({text:”高富帅的设计”})；
var comment = new Comment({
text: “高富帅的设计”
});
comment.save();
Comments.add(comment);

What
• 视图（View）
o 一个逻辑的UI组件
o 委托DOM事件
o 负责实例化集合

App.Views.Comment = Backbone.View.extend({
className: 'ʹ comment-‐‑item'ʹ,
template: $('ʹ#comment-‐‑item-‐‑template'ʹ).html(),
events: {
"ʺmouseenter"ʺ: "ʺshowActions"ʺ,
"ʺmouseleave"ʺ: "ʺhideActions"ʺ
},
initialize: function(){
_.bindAll(this,'ʹrender'ʹ);
this.model.bind('ʹchange'ʹ, this.render);
},
render: function(){
$(this.el).html(_.template( this.template,this.model.toJSON()));
$(this.el).aUr({
'ʹdata-‐‑comment-‐‑id'ʹ: this.model.id
});
return this;
},
showActions: function(e){
this.$('ʹ.reply'ʹ).show();
},
hideActions: function(e){
this.$('ʹ.reply'ʹ).hide();
}
});

var view = new App.Views.Comment({
model: model
});
$('ʹbody'ʹ).append(view.render().el);

What
• 路由（Backbone.Router）
o 将应用程序的状态和URL的哈希片段关联在一起
o 根据路由规则，连接到指定的动作和事件

App.Router.page = Backbone.Router.extend({
routes: {
“”:
“index”,
“help”:
“help”,
// #help
“search/:query”:”search”,
// #search/miyukizhang
},
initialize: function(){
Backbone.history.start();
},
index: function(){ /* … */},
help: function(){
// …
},
search: function(query){
// …
}
});

Router Data
Source
Model/Collection
Template
View

• 其他
What Backbone.js
o Backbone.history
o Backbone.sync
o Utility Function

前端MVC之BackboneJS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a 前端MVC之BackboneJS

Similar a 前端MVC之BackboneJS (20)

Último

Último (20)

前端MVC之BackboneJS