在上一章《闪电提速》的博客中，我介绍了首页加载和通信的提速方法，在这个过程中对together.JS本身的实现基础介绍的很少，这样对一些刚接触TJS的朋友来说，就不太容易理解。
这篇博客的目的是补充这部分知识，主要的内容有：
- TJS的前后端事件详解；
- TJS文件结构分析；
1、TJS的前后端事件详解
在后端逻辑中我主要介绍websocket的收发机制，我还是以”tinymce“为例，当键入一个字符后，抽象为一个"form-update"事件，它的收发逻辑如下图所示：
ws收发逻辑
构建编辑器的行为队列，为undo、redo的实现打下基础
1.1 事件的发送
forms中的_change()方法是编辑器修改的回调接口，通过该方法能拿到编辑器中的状态和内容；
// 事件回调，通过sendData结构化数据并发送内容
_change: function (e) {
if (inRemoteUpdate) {
return;
}
sendData({
tracker: this.trackerName,
element: this.element,
value: this.getContent()
});
}
//构建编辑器的行为队列，为undo、redo的实现打下基础
function sendData(attrs) {
//...
var delta = ot.TextReplace.fromChange(history.current, value);
assert(delta);
history.add(delta);
maybeSendUpdate(msg.element, history, tracker);
return;
}
/* Send the top of this history queue, if it hasn't been already sent. */
function maybeSendUpdate(element, history, tracker) {
var change = history.getNextToSend();
if (! change) {
/* nothing to send */
return;
}
var msg = {
type: "form-update",
element: element,
"server-echo": true,
replace: {
id: change.id,
basis: change.basis,
delta: {
start: change.delta.start,
del: change.delta.del,
text: change.delta.text
}
}
};
if (tracker) {
msg.tracker = tracker;
}
session.send(msg);
}
session中的session.send方法封装对了channel::_send()的调用；
1.2 事件的接收
事件的接受与发送逻辑相反，唯一不同的是在session与forms之间，经过了together.js的消息派发。我就不带着大家逐一撸代码了。事件接受时的堆栈状态如下：
2、TJS文件结构分析
together目录是这样的，有一些资源和N多库。
tjs文件结构
我对它稍加分类，整理一下，有助于新朋友的理解。
tjs文件归类
首先togeth.js有一些基本功能，为各个场景的同步行为服务，就是上图中的“共享的同步行为”中所列的内容。还有一些就是业务相关的服务，文本编辑啊 、视频播放同步啊，都是由具体的库来负责。websocket与事件的封装上一章已经介绍过了。
TJS本身的模块设计都是很合理的，仔细分析，把职责理清楚，该怎么优化就有的放矢了。如果大家还有不明白的地方，可以给我留言。
