obaa
Version:
Observe any object's any change.
133 lines (88 loc) • 2.45 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>obaa test</title>
<script src="util.js"></script>
<script src="../index.js"></script>
</head>
<body>
<script>
var result = [
['a', { b: 1 }, 1, '#'],
['b', 'abc', 1, '#-a'],
['c', 3, undefined, '#'],
['c', 4, 3, '#'],
['d', 5, undefined, '#'],
['h', {i:100}, undefined, '#-e'],
['i', 22, 100, '#-e-h'],
["1" ,3, 2, "#"]
]
</script>
<script>
var count = 0
var obj = { a: 1, e: { f: { g: 2 } } }
obaa(obj, function (prop, value, old, path) {
count++
var item = result.shift()
log(deepEqual(prop, item[0]), deepEqual(value, item[1]), deepEqual(old, item[2]), deepEqual(path, item[3]))
})
obj.a = { b: 1 }
obj.a.b = 'abc'
obaa.set(obj, 'c', 3);
obj.c = 4;//c__4__3__#
obaa.add(obj, 'd');
obj.d = 5;//c__4__3__#
obaa.set(obj.e, 'h', {i:100})
obj.e.h.i = 22
log(count === 7)
</script>
<script>
var arr = [1, 2]
obaa(arr, function (prop, value, old, path) {
count++
if (count === 9) {
log(deepEqual(prop, 'Array-push'), deepEqual(value[2], 'abc'), deepEqual(old, [1, 3]), deepEqual(path, '#'))
} else if (count === 10) {
} else if (count === 11) {
log(prop === 'newItem', value === 22, old === 11, path === '#-3')
} else if (count === 12) {
log(prop === 'Array-size', value.length === 2, old.length === 4, path === '#')
} else if (count === 13) {
//console.log(prop, value, old, path)
} else if(count==8){
var item = result.shift()
log(deepEqual(prop, item[0]), deepEqual(value, item[1]), deepEqual(old, item[2]), deepEqual(path, item[3]))
}
})
arr[1] = 3
arr.push('abc')
arr.push({ newItem: 11 })
arr[3].newItem = 22
//out range using push or obaa.set!! don't do this blow
// arr[4] = 5
//please use size,don't use length
arr.size(2)
arr.push(111)
//will not trigger callback
arr.purePush(111)
log(count === 13)
</script>
<script>
var countB = 0
var objB = { a: 1, b: 2 }
obaa(objB, ['b'], function (prop, value, old, path) {
countB++
log(prop == 'b', value == 3, old == 2, path == '#')
})
objB.a = 2
objB.b = 2
objB.b = 3
log(countB === 1)
</script>
<script>
</script>
<a href="https://github.com/Tencent/omi" target="_blank" style="position:absolute;right:0;top:0;">
<img src="http://alloyteam.github.io/github.png" alt="" />
</a>
</body>
</html>