Reactivity Observer

reactivity.js

let data = {price: 5, quantity: 2}
let total, salePrice, discountedTotal
let target = null

class Dep {
	constructor() {
		this.subscriber = []
	}

	depend() {
		if(target && !this.subscriber.includes(target)) {
			this.subscriber.push(target)
		}
	}

	notify() {
		this.subscriber.forEach(sub => sub())
	}
}

Object.keys(data).forEach(key => {
	let internalValue = data[key]
	const dep = new Dep()

	Object.defineProperty(data, key, {
		get() {
			dep.depend()
			return internalValue;
		},
		set(newVal) {
			internalValue = newVal
			dep.notify()
		}
	})	
})

function watcher(myFunc) {
	target = myFunc
	target()
	target = null
}

watcher(() => {
	total = data.price * data.quantity
})

watcher(() => {
	salePrice = data.price * 0.9
})

watcher(() => {
	discountedTotal = data.price * 0.9 * data.quantity
})

data.price = 1;
console.log(total) // 2
data.price = 20;
data.quantity = 10;
console.log(total) // 200
console.log(discountedTotal) // 180