对象操作的撤回与反撤回 (ctrl + z
与 ctrl + y
)
1. ES Module
import { Revocable } from "yourPath/object-revocable.js"
const target = Revocable({
fir: "fir",
sec: "sec"
})
target.third = "third"
target.sec = "changed sec"
delete target.fir
// target now is {
// sec:"changed sec",
// third:"third",
// }
// _rollback 为撤销方法,可理解为ctrl+z⚠️
// _cancelRollback 为反撤销方法,可理解为ctrl+y ⚠️
target._rollback()
// target now is {
// sec:"changed sec",
// third:"third",
// fir: "fir",
// }
target._rollback()
// target now is {
// sec:"sec",
// third:"third",
// fir: "fir",
// }
target._rollback()
// target now is {
// sec:"sec",
// fir: "fir",
// }
target._cancelRollback()
// target now is {
// sec:"sec",
// fir: "fir",
// third:"third",
// }
2. script
<script src="yourpath/object-revocable.umd.cjs"></script>
<script>
const { Revocable } = RevocableModule
let target = Revocable({
...
})
...
</script>
3. snapshot 模式
const target = Revocable({
fir: "init value",
sec: "init value"
},true)// 或者写为target = Revocable({...},{ snapable: true })
target.fir = "first change"
target.sec = "first change"
target.third = "first change"
// target now is {
// fir: "first change",
// sec: "first change",
// third: "first change"
// }
target._snapshot() ⚠️// 将此时的对象看作一个快照,即将前面的三次操作视为一次操作
target.fir = "second change"
target.sec = "second change"
target.third = "second change"
target._snapshot()
target.fir = "third change"
target.sec = "third change"
target.third = "third change"
// target now is {
// fir: "third change",
// sec: "third change",
// third: "third change"
// }
target._rollback()
// target now is {
// fir: "second change",
// sec: "second change",
// third: "second change"
// }
target._rollback()
// target now is {
// fir: "first change",
// sec: "first change",
// third: "first change"
// }
target._rollback()
// target now is {
// fir: "init value",
// sec: "init value"
// }
####develop
npm install
npm run dev
npm run test
npm run lib
或直接使用dist文件夹中的 js 文件