@todojs/

Proxy 4 - trace()

JavaScript

No description

fork
loading
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
var o = undo ({
    value: 0
});

console.log('\n- Realizamos varias operaciones');
o.value = 1; console.log('o.value =', o.value);         // 1
o.value = 2; console.log('o.value =', o.value);         // 2
o.value = 3; console.log('o.value =', o.value);         // 3
o.value = 4; console.log('o.value =', o.value);         // 4
o.value = 5; console.log('o.value =', o.value);         // 5
o.value = 6; console.log('o.value =', o.value);         // 6
o.value = 7; console.log('o.value =', o.value);         // 7
o.value = 8; console.log('o.value =', o.value);         // 8

console.log('\n- Las deshacemos todas las operaciones');
o.undo(); console.log('o.undo(); o.value =', o.value);  // 7
o.undo(); console.log('o.undo(); o.value =', o.value);  // 6
o.undo(); console.log('o.undo(); o.value =', o.value);  // 5
o.undo(); console.log('o.undo(); o.value =', o.value);  // 4
o.undo(); console.log('o.undo(); o.value =', o.value);  // 3
o.undo(); console.log('o.undo(); o.value =', o.value);  // 2
o.undo(); console.log('o.undo(); o.value =', o.value);  // 1
o.undo(); console.log('o.undo(); o.value =', o.value);  // 0

console.log('\n- Intentamos deshacer más operaciones, pero no hay');
o.undo(); console.log('o.undo(); o.value =', o.value);  // 0

console.log('\n- Creamos una nueva propiedad');
o.z = 'a'; console.log('o.z =', o.z);                   // a
o.z = 'b'; console.log('o.z =', o.z);                   // b

console.log('\n- Deshacemos la creación de la propiedad');
o.undo(); console.log('o.undo(); o.z =', o.z);          // a
o.undo(); console.log('o.undo(); o.z =', o.z);          // undefined

console.log('\n- Creamos y borramos una propiedad');
o.x = 100;  console.log('o.x =', o.x);                  // 100
delete o.x; console.log('delete o.x; o.x =', o.x);      // undefined

console.log('\n- Deshacemos el borrado');
o.undo(); console.log('o.undo(); o.x =', o.x);          // 100


function undo(obj) {
    var states = [];
    var off = false;
    obj.undo = function() {
        if (states.length === 0) {
            return false;
        }
        var prev = states.pop();
        off = true;
        obj[prev.property] = prev.value;
        off = false;
        return true;
    };
    obj = new Proxy(
        obj,
        {
            set: (obj, prop, value) => {
                if (!off) {
                    states.push({property: prop, value: obj[prop]});
                }
                return Reflect.set(obj, prop, value);
            },
            deleteProperty: (obj, prop) => {
                states.push({property: prop, value: obj[prop]});
                return Reflect.deleteProperty(obj, prop);
            }
        }
    );
    return obj;
}
Native Browser JavaScript