关于前端:文章草稿功能设计

在 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 中有版本字段。