四、TJS 优化前传——事件详解

在上一章《闪电提速》的博客中，我介绍了首页加载和通信的提速方法，在这个过程中对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本身的模块设计都是很合理的，仔细分析，把职责理清楚，该怎么优化就有的放矢了。如果大家还有不明白的地方，可以给我留言。