|
然后加上目标和观察者
- class Subject {
- constructor() {
- this.observers = []
- }
-
- add(observer) {
- this.observers.push(observer)
- }
-
- notify(data) {
- this.observers.forEach((observer) => observer.update(data))
- }
- }
-
- class Observer {
- constructor(callback) {
- this.callback = callback
- }
- update(data) {
- this.callback && this.callback(data)
- }
- }
-
- // 创建观察者ob1
- let ob1 = new Observer((text) => {
- document.querySelector('#dom-one').innerHTML(text)
- })
- // 创建观察者ob2
- let ob2 = new Observer((text) => {
- document.querySelector('#dom-two').innerHTML(text)
- })
- // 创建目标sub
- let sub = new Subject()
- // 目标sub添加观察者ob1 （目标和观察者建立了依赖关系）
- sub.add(ob1)
- // 目标sub添加观察者ob2
- sub.add(ob2)
- // 目标sub触发事件（目标主动通知观察者）
- sub.notify('这里改变了')
组合在一起是这样的
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta
- name="viewport"
- content="width=device-width,initial-scale=1,maximum-scale=1,viewport-fit=cover"
- />
- <title></title>
- </head>
- <body>
- <div id="app">
- <div id="dom-one">
- 原来的值
- </div>
- <br />
- <div id="dom-two">
- 原来的值
- </div>
- <br />
- <button id="btn">改变</button>
- </div>
- <script>
- class Subject {
- constructor() {
- this.observers = []
- }
-
- add(observer) {
- this.observers.push(observer)
- }
-
- notify() {
- this.observers.forEach((observer) => observer.update())
- }
- }
-
- class Observer {
- constructor(callback) {
- this.callback = callback
- }
- update() {
- this.callback && this.callback()
- }
- }
-
- const obj = {
- data: { description: '' },
- }
-
- // 创建观察者ob1
- const ob1 = new Observer(() => {
- console.log(document.querySelector('#dom-one'))
- document.querySelector('#dom-one').innerHTML = obj.description
- })
- // 创建观察者ob2
- const ob2 = new Observer(() => {
- document.querySelector('#dom-two').innerHTML = obj.description
- })
- // 创建目标sub
- const sub = new Subject()
- // 目标sub添加观察者ob1 （目标和观察者建立了依赖关系）
- sub.add(ob1)
- // 目标sub添加观察者ob2
- sub.add(ob2)
-
- Object.defineProperty(obj, 'description', {
- get() {
- return this.data.description
- },
- set(val) {
- this.data.description = val
- // 目标sub触发事件（目标主动通知观察者）
- sub.notify()
- },
- })
- btn.onclick = () => {
- obj.description = '改变了'
- }
- </script>
- </body>
- </html>
装饰者模式
装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能，同时又不改变其结构。
ES6/7 的decorator 语法提案，就是装饰者模式。 （编辑：91站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
