文章草稿功能设计

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

新建文章

当你点击撰写，进入写文章页面有三个可编辑的区域：标题、标签、正文。只要触发其中一个改变，大概4秒后没有动作就会被自动保存为草稿。

这时假如你有其他事情，不能完成文章的编写发布，没有关系，等你有时间时可以在撰写的下拉菜单中打开你的草稿，继续编辑即可。

• 再你正式发布文章前这样的操作可以反复进行，只会保存一个草稿。
• 当你发布文章后，对应的草稿会被删除。
• 当你的文章已经发布，再次编辑时，会为你生成一个上次内容的就版本，而且每进行一次编辑发布，都会产生一个新的版本，便于你恢复文章。

自动保存草稿

在你停止输入后4秒钟左右，会自动调用更新文章的接口：

URL: https://segmentfault.com/gateway/draft/1220000041678229

Method：PUT

Payload:
{
    "title": "文章草稿功能设计",
    "tags": [1040000000089899, 1040000000391379, 1040000000089799],
    "text": "> 在 segmentfault 写文章的过程中，发现它的草稿功能设计的很有意思",
    "object_id": "",
    "type": "article",
    "cover": "",
    "id": 1220000041678229
}

文章发布后

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

Request URL: https://segmentfault.com/gateway/draft/1220000041680164
Request 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中有版本字段。