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