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

2017-09-13 本文已影响79人北塔资讯

在上一章《闪电提速》的博客中，我介绍了首页加载和通信的提速方法，在这个过程中对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()的调用；