Skip to content

Commit 4b91938

Browse files
GreggGregg
committed
Added source code files
0 parents  commit 4b91938

7 files changed

+344
-0
lines changed

‎.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"trailingComma": "es5",
3+
"tabWidth": 2,
4+
"semi": false,
5+
"singleQuote": true
6+
}

‎01-basic.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
let price = 5
2+
let quantity = 2
3+
let total = 0
4+
5+
let dep = new Set()
6+
7+
let effect = () => {
8+
total = price * quantity
9+
}
10+
11+
function track() {
12+
dep.add(effect)
13+
}
14+
15+
function trigger() {
16+
dep.forEach(effect => effect())
17+
}
18+
19+
track()
20+
effect()

‎02-depsMap.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const depsMap = new Map()
2+
function track(key) {
3+
// Make sure this effect is being tracked.
4+
let dep = depsMap.get(key)
5+
if (!dep) {
6+
// There is no dep (effects) on this key yet
7+
depsMap.set(key, (dep = new Set())) // Create a new Set
8+
}
9+
10+
dep.add(effect) // Add effect to dep
11+
}
12+
function trigger(key) {
13+
let dep = depsMap.get(key) // Get the dep (effects) associated with this key
14+
if (dep) {
15+
// If they exist
16+
dep.forEach(effect => {
17+
// run them all
18+
effect()
19+
})
20+
}
21+
}
22+
23+
let product = { price: 5, quantity: 2 }
24+
let total = 0
25+
26+
let effect = () => {
27+
total = product.price * product.quantity
28+
}
29+
30+
track('quantity')
31+
effect()
32+
// console.log(total)
33+
34+
// product.quantity = 3
35+
// trigger('quantity')
36+
// console.log(total)

‎03-targetMap.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const targetMap = new WeakMap() // targetMap stores the effects that each object should re-run when it's updated
2+
function track(target, key) {
3+
// We need to make sure this effect is being tracked.
4+
let depsMap = targetMap.get(target) // Get the current depsMap for this target
5+
if (!depsMap) {
6+
// There is no map.
7+
targetMap.set(target, (depsMap = new Map())) // Create one
8+
}
9+
let dep = depsMap.get(key) // Get the current dependencies (effects) that need to be run when this is set
10+
if (!dep) {
11+
// There is no dependencies (effects)
12+
depsMap.set(key, (dep = new Set())) // Create a new Set
13+
}
14+
dep.add(effect) // Add effect to dependency map
15+
}
16+
function trigger(target, key) {
17+
const depsMap = targetMap.get(target) // Does this object have any properties that have dependencies (effects)
18+
if (!depsMap) {
19+
return
20+
}
21+
let dep = depsMap.get(key) // If there are dependencies (effects) associated with this
22+
if (dep) {
23+
dep.forEach(effect => {
24+
// run them all
25+
effect()
26+
})
27+
}
28+
}
29+
let product = { price: 5, quantity: 2 }
30+
let total = 0
31+
let effect = () => {
32+
total = product.price * product.quantity
33+
}
34+
track(product, 'quantity')
35+
effect()
36+
// console.log(total)
37+
// product.quantity = 3
38+
// trigger(product, 'quantity')
39+
// console.log(total)

‎04-all-together.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
const targetMap = new WeakMap() // targetMap stores the effects that each object should re-run when it's updated
2+
function track(target, key) {
3+
// We need to make sure this effect is being tracked.
4+
let depsMap = targetMap.get(target) // Get the current depsMap for this target
5+
if (!depsMap) {
6+
// There is no map.
7+
targetMap.set(target, (depsMap = new Map())) // Create one
8+
}
9+
let dep = depsMap.get(key) // Get the current dependencies (effects) that need to be run when this is set
10+
if (!dep) {
11+
// There is no dependencies (effects)
12+
depsMap.set(key, (dep = new Set())) // Create a new Set
13+
}
14+
dep.add(effect) // Add effect to dependency map
15+
}
16+
function trigger(target, key) {
17+
const depsMap = targetMap.get(target) // Does this object have any properties that have dependencies (effects)
18+
if (!depsMap) {
19+
return
20+
}
21+
let dep = depsMap.get(key) // If there are dependencies (effects) associated with this
22+
if (dep) {
23+
dep.forEach(effect => {
24+
// run them all
25+
effect()
26+
})
27+
}
28+
}
29+
30+
function reactive(target) {
31+
const handlers = {
32+
get(target, key, receiver) {
33+
let result = Reflect.get(target, key, receiver)
34+
track(target, key) // If this reactive property (target) is GET inside then track the effect to rerun on SET
35+
return result
36+
},
37+
set(target, key, value, receiver) {
38+
let oldValue = target[key]
39+
let result = Reflect.set(target, key, value, receiver)
40+
if (oldValue != result) {
41+
trigger(target, key) // If this reactive property (target) has effects to rerun on SET, trigger them.
42+
}
43+
return result
44+
},
45+
}
46+
return new Proxy(target, handlers)
47+
}
48+
49+
let product = reactive({ price: 5, quantity: 2 })
50+
let total = 0
51+
52+
var effect = () => {
53+
total = product.price * product.quantity
54+
}
55+
effect()
56+
57+
console.log('before updated quantity total = ' + total)
58+
product.quantity = 3
59+
console.log('after updated quantity total = ' + total)
60+
console.log('Updated quantity to = ' + product.quantity)

‎05-activeEffect.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
const targetMap = new WeakMap() // targetMap stores the effects that each object should re-run when it's updated
2+
let activeEffect = null // The active effect running
3+
4+
function track(target, key) {
5+
if (activeEffect) {
6+
// <------ Check to see if we have an activeEffect
7+
// We need to make sure this effect is being tracked.
8+
let depsMap = targetMap.get(target) // Get the current depsMap for this target
9+
if (!depsMap) {
10+
// There is no map.
11+
targetMap.set(target, (depsMap = new Map())) // Create one
12+
}
13+
let dep = depsMap.get(key) // Get the current dependencies (effects) that need to be run when this is set
14+
if (!dep) {
15+
// There is no dependencies (effects)
16+
depsMap.set(key, (dep = new Set())) // Create a new Set
17+
}
18+
dep.add(activeEffect) // Add effect to dependency map
19+
}
20+
}
21+
22+
function trigger(target, key) {
23+
const depsMap = targetMap.get(target) // Does this object have any properties that have dependencies (effects)
24+
if (!depsMap) {
25+
return
26+
}
27+
let dep = depsMap.get(key) // If there are dependencies (effects) associated with this
28+
if (dep) {
29+
dep.forEach(effect => {
30+
// run them all
31+
effect()
32+
})
33+
}
34+
}
35+
36+
function reactive(target) {
37+
const handler = {
38+
get(target, key, receiver) {
39+
let result = Reflect.get(target, key, receiver)
40+
track(target, key) // If this reactive property (target) is GET inside then track the effect to rerun on SET
41+
return result
42+
},
43+
set(target, key, value, receiver) {
44+
let oldValue = target[key]
45+
let result = Reflect.set(target, key, value, receiver)
46+
if (oldValue != result) {
47+
trigger(target, key) // If this reactive property (target) has effects to rerun on SET, trigger them.
48+
}
49+
return result
50+
},
51+
}
52+
return new Proxy(target, handler)
53+
}
54+
55+
function effect(eff) {
56+
activeEffect = eff
57+
activeEffect()
58+
activeEffect = null
59+
}
60+
61+
let product = reactive({ price: 5, quantity: 2 })
62+
let salePrice = 0
63+
let total = 0
64+
65+
effect(() => {
66+
total = product.price * product.quantity
67+
})
68+
effect(() => {
69+
salePrice = product.price * 0.9
70+
})
71+
72+
console.log(
73+
`Before updated quantity total (should be 10) = ${total} salePrice (should be 4.5) = ${salePrice}`
74+
)
75+
product.quantity = 3
76+
console.log(
77+
`After updated quantity total (should be 15) = ${total} salePrice (should be 4.5) = ${salePrice}`
78+
)
79+
product.price = 10
80+
console.log(
81+
`After updated price total (should be 30) = ${total} salePrice (should be 9) = ${salePrice}`
82+
)

‎06-ref.js

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
const targetMap = new WeakMap() // targetMap stores the effects that each object should re-run when it's updated
2+
let activeEffect = null // The active effect running
3+
4+
function track(target, key) {
5+
if (activeEffect) {
6+
// <------ Check to see if we have an activeEffect
7+
// We need to make sure this effect is being tracked.
8+
let depsMap = targetMap.get(target) // Get the current depsMap for this target
9+
if (!depsMap) {
10+
// There is no map.
11+
targetMap.set(target, (depsMap = new Map())) // Create one
12+
}
13+
let dep = depsMap.get(key) // Get the current dependencies (effects) that need to be run when this is set
14+
if (!dep) {
15+
// There is no dependencies (effects)
16+
depsMap.set(key, (dep = new Set())) // Create a new Set
17+
}
18+
dep.add(activeEffect) // Add effect to dependency map
19+
}
20+
}
21+
22+
function trigger(target, key) {
23+
const depsMap = targetMap.get(target) // Does this object have any properties that have dependencies (effects)
24+
if (!depsMap) {
25+
return
26+
}
27+
let dep = depsMap.get(key) // If there are dependencies (effects) associated with this
28+
if (dep) {
29+
dep.forEach(effect => {
30+
// run them all
31+
effect()
32+
})
33+
}
34+
}
35+
36+
function reactive(target) {
37+
const handler = {
38+
get(target, key, receiver) {
39+
let result = Reflect.get(target, key, receiver)
40+
track(target, key) // If this reactive property (target) is GET inside then track the effect to rerun on SET
41+
return result
42+
},
43+
set(target, key, value, receiver) {
44+
let oldValue = target[key]
45+
let result = Reflect.set(target, key, value, receiver)
46+
if (oldValue != result) {
47+
trigger(target, key) // If this reactive property (target) has effects to rerun on SET, trigger them.
48+
}
49+
return result
50+
},
51+
}
52+
return new Proxy(target, handler)
53+
}
54+
55+
function ref(raw) {
56+
const r = {
57+
get value() {
58+
track(r, 'value')
59+
return raw
60+
},
61+
set value(newVal) {
62+
raw = newVal
63+
trigger(r, 'value')
64+
},
65+
}
66+
return r
67+
}
68+
69+
// function ref(intialValue) {
70+
// return reactive({ value: initialValue })
71+
// }
72+
73+
function effect(eff) {
74+
activeEffect = eff
75+
activeEffect()
76+
activeEffect = null
77+
}
78+
79+
let product = reactive({ price: 5, quantity: 2 })
80+
let salePrice = ref(0)
81+
let total = 0
82+
83+
effect(() => {
84+
salePrice.value = product.price * 0.9
85+
})
86+
87+
effect(() => {
88+
total = salePrice.value * product.quantity
89+
})
90+
91+
console.log(
92+
`Before updated quantity total (should be 9) = ${total} salePrice (should be 4.5) = ${salePrice.value}`
93+
)
94+
product.quantity = 3
95+
console.log(
96+
`After updated quantity total (should be 13.5) = ${total} salePrice (should be 4.5) = ${salePrice.value}`
97+
)
98+
product.price = 10
99+
console.log(
100+
`After updated price total (should be 27) = ${total} salePrice (should be 9) = ${salePrice.value}`
101+
)

0 commit comments

Comments
 (0)