suukii/state-reactivity.html

## state-reactivity.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>State Reactivity</title>
</head>

<body>
    <script>
        function observe(obj) {
            Object.keys(obj).forEach(key => {
                let internalValue = obj[key];
                const dep = new Dep();
                Object.defineProperty(obj, key, {
                    get() {
                        dep.depend();
                        return internalValue;
                    },
                    set(newVal) {
                        internalValue = newVal;
                        dep.notify();
                    },
                });
            });
        }

        class Dep {
            constructor() {
                this.subscribers = new Set();
            }
            depend() {
                activeUpdate && this.subscribers.add(activeUpdate);
            }
            notify() {
                this.subscribers.forEach(func => func());
            }
        }

        function log() {
            console.log(`update state.count to ${state.count}`);
        }

        let activeUpdate = null;

        function autorun(update) {
            function wrappedUpdate() {
                activeUpdate = update;
                update();
                activeUpdate = null;
            }
            wrappedUpdate();
        }

        const state = {
            count: 1,
        };

        observe(state);
        autorun(log);

        setTimeout(() => {
            state.count += 1;
        }, 2000);
        setTimeout(() => {
            state.count += 1;
        }, 3000);
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>State Reactivity</title>
	</head>

	<body>
	<script>
	function observe(obj) {
	Object.keys(obj).forEach(key => {
	let internalValue = obj[key];
	const dep = new Dep();
	Object.defineProperty(obj, key, {
	get() {
	dep.depend();
	return internalValue;
	},
	set(newVal) {
	internalValue = newVal;
	dep.notify();
	},
	});
	});
	}

	class Dep {
	constructor() {
	this.subscribers = new Set();
	}
	depend() {
	activeUpdate && this.subscribers.add(activeUpdate);
	}
	notify() {
	this.subscribers.forEach(func => func());
	}
	}

	function log() {
	console.log(`update state.count to ${state.count}`);
	}

	let activeUpdate = null;

	function autorun(update) {
	function wrappedUpdate() {
	activeUpdate = update;
	update();
	activeUpdate = null;
	}
	wrappedUpdate();
	}

	const state = {
	count: 1,
	};

	observe(state);
	autorun(log);

	setTimeout(() => {
	state.count += 1;
	}, 2000);
	setTimeout(() => {
	state.count += 1;
	}, 3000);
	</script>
	</body>

	</html>