第十七章 定制Backbonejs
最后更新于：2022-04-01 06:08:28
这里说的定制Backbonejs，主要是定制Backbone中的sync部分，也就是最后和服务器端通信的部分。
## 17.1 三个级别的定制
首先得说，在Backbone里面和后端能通信的对象也就两个——Model和Collection。这俩的主要工作就是从服务器拉取数据，保存到实例中，或者把实例中的属性发送到服务器端。
上面两中类型的对象都是基于Backbone.sync来进行通信的，同时也可以定义各自的sync方法，类似这样：
_Model级别的_
~~~
var Message = Backbone.Model.extend({
urlRoot: '/message',
// 这么写, 打印要操作的实体, 调用系统的sync
sync: function(method, model, options){
console.log(model);
return Backbone.sync(method, model, options);
},
});
~~~
_Collection级别的_
~~~
var Messages = Backbone.Collection.extend({
url: '/message',
model: Message,
// 这么写, 打印要操作的实体, 调用系统的sync
sync: function(method, collection, options){
console.log(collection);
return Backbone.sync(method, collection, options);
},
});
~~~
当然，也会存在这样的需求，要修改全局的sync：
~~~
var old_sync = Backbone.sync;
Backbone.sync = function(method, model, options) {
console.log(model);
return old_sync(method, model, options);
}
~~~
所谓定制，是Backbonejs给开发者提供的可以被重写的接口。因此定制过程也得符合Backbone对sync的定义。
## 17.2 简单实例，用socketio通信
在 [wechat](https://github.com/the5fire/wechat) 这个项目中为了保证聊天的实时性，我引入了socketio，后端使用gevent-socketio，（socketio这个东西不打算写，和主题关系不大，有需求的可以题issue）。
实时聊天的需求主要是在Message上，用户A发送一个请求，在同一聊天室内的其他用户应该立马能看见。之前有两个版本：
* 第一版是发送message时会调用messages的fetch方法，也就是用户只有发言才能看到别人发的聊天内容，代码如下：
~~~
message.save(null, {
success: function(model, response, options){
comment_box.val('');
// 重新获取，看服务器端是否有更新
// 比较丑陋的更新机制
messages.fetch({
data: {topic_id: topic_id},
success: function(){
self.message_list.scrollTop(self.message_list_div.scrollHeight);
messages.add(response);
},
});
},
});
~~~
* 第二版是引入socketio之后，在save完数据之后，通过socket把数据再次发送到服务器上的socket端，服务器再挨个发送数据到各个客户端，代码如下：
~~~
message.save(null, {
success: function(model, response, options){
comment_box.val('');
messages.add(response);
// 发送成功之后，通过socket再次发送
// FIXME: 最后可通过socket直接通信并保存
socket.emit('message', response);
},
});
// 对应着有一个socket监听, 监听服务器发来的消息
// 监听message事件，添加对话到messages中
socket.on('message', function(response) {
messages.add(response);
});
~~~
可以看得出来，上面的第二版算是比较合适了，但是还是有些别扭，数据要重复发送。因此终于到了需要定制的时刻了。
上面说了，有三种级别的定制。根据我的需求，只需要定制Model级别的就可以了，怎么定制呢？
和一开头的示例代码类似：
~~~
var Message = Backbone.Model.extend({
urlRoot: '/message',
sync: function(method, model, options){
if (method === 'create') {
socket.emit('message', model.attributes);
$('#comment').val('');
} else {
return Backbone.sync(method, model, options);
};
},
});
// 对应着上面的那个message.save后的一堆东西都可以去掉了，直接
message.save();
~~~
这样就好了，客户端只需要发送一次数据。但要记得在服务器端的监听message的接口上添加保存message的逻辑。
好了，定制就介绍这么多。关于上面提到的代码想了解上下文的，可以到我的wechat这个项目的master分支查看。