vue 響應式原理
阿新 • • 發佈：2018-11-05
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> </head>
<body> <h1 data-on="title"></h1> <span data-on="message"></span> <div> <input i-moudle="title" type="text"> </div> <input i-moudle="message" type="text"> <script> class Reactive { constructor(obj) { let _data = obj.data; this.observe = this.createObserve(_data); this.defineDescribe(_data) } createObserve(data) { return { watchers: [], emit(key, value) { this.watchers[key].forEach(cb => cb(value)) }, subscribe(key, value) { document .querySelectorAll(`[data-on=${key}]`) .forEach(item => { let cb = text => item.innerHTML = text; cb(value); if (this.watchers[key]) { this.watchers[key].push(cb) } else { this.watchers[key] = [cb]; } }) document .querySelectorAll(`[i-moudle=${key}]`) .forEach(item => { item.addEventListener('input', e => { data[key] = e.target.value; }) let cb = text => item.value = text; cb(value) if (this.watchers[key]) { this.watchers[key].push(cb) } else { this.watchers[key] = [cb]; } }) } } } defineDescribe(data) { for (let key in data) { let value = data[key]; Object.defineProperty(data, key, { get() { return value; }, set: (_value) => { value = _value; this.observe.emit(key, value) } }) this.observe.subscribe(key, value); } return data } } new Reactive({ data: { title: 'hello world', message: '你嗎好' } }) </script> </body> </html>
<head> <meta charset="UTF-8"> <title>Document</title> </head>
<body> <h1 data-on="title"></h1> <span data-on="message"></span> <div> <input i-moudle="title" type="text"> </div> <input i-moudle="message" type="text"> <script> class Reactive { constructor(obj) { let _data = obj.data; this.observe = this.createObserve(_data); this.defineDescribe(_data) } createObserve(data) { return { watchers: [], emit(key, value) { this.watchers[key].forEach(cb => cb(value)) }, subscribe(key, value) { document .querySelectorAll(`[data-on=${key}]`) .forEach(item => { let cb = text => item.innerHTML = text; cb(value); if (this.watchers[key]) { this.watchers[key].push(cb) } else { this.watchers[key] = [cb]; } }) document .querySelectorAll(`[i-moudle=${key}]`) .forEach(item => { item.addEventListener('input', e => { data[key] = e.target.value; }) let cb = text => item.value = text; cb(value) if (this.watchers[key]) { this.watchers[key].push(cb) } else { this.watchers[key] = [cb]; } }) } } } defineDescribe(data) { for (let key in data) { let value = data[key]; Object.defineProperty(data, key, { get() { return value; }, set: (_value) => { value = _value; this.observe.emit(key, value) } }) this.observe.subscribe(key, value); } return data } } new Reactive({ data: { title: 'hello world', message: '你嗎好' } }) </script> </body> </html>