在 segmentfault 写文章的过程中，发现它的草稿功能设计的很有意思，这篇文章来剖析一下它的设计逻辑。

新建文章

当你点击撰写，进入写文章页面有三个可编辑的区域：题目、标签、注释。只有触发其中一个扭转，大略4秒后没有动作就会被主动保留为草稿。

这时如果你有其余事件，不能实现文章的编写公布，没有关系，等你有工夫时能够在撰写的下拉菜单中关上你的草稿，持续编辑即可。

  • 再你正式公布文章前这样的操作能够重复进行，只会保留一个草稿。
  • 当你公布文章后，对应的草稿会被删除。
  • 当你的文章曾经公布，再次编辑时，会为你生成一个上次内容的就版本，而且每进行一次编辑公布，都会产生一个新的版本，便于你复原文章。

主动保留草稿

在你进行输出后4秒钟左右，会主动调用更新文章的接口：

URL: https://segmentfault.com/gateway/draft/1220000041678229Method：PUTPayload:{    "title": "文章草稿功能设计",    "tags": [1040000000089899, 1040000000391379, 1040000000089799],    "text": "> 在 segmentfault 写文章的过程中，发现它的草稿功能设计的很有意思",    "object_id": "",    "type": "article",    "cover": "",    "id": 1220000041678229}

文章公布后

文章公布后，文章id就确定了 1190000041680161， 再次编辑

Request URL: https://segmentfault.com/gateway/draft/1220000041680164Request Method: PUT

能够发现它保留草稿的时候id变成了1220000041680164，揣测这个草稿id就是与那个版本想对的，每次编辑实现公布时会产生一个最新版本的草稿。

延时4秒主动保留实现

const autoSave = () => {    if (timer) {      clearTimeout(timer)    }    const t = setTimeout(function () {      form.submit()      clearTimeout(timer)      setTimer(null)    }, 4000)    setTimer(t)  }

每次表单输出区域变动都触发这个主动保留的办法，延时4秒执行。

总结

所以这个草稿性能波及到数据库表，为draft和article两张表。draft中有版本字段。