简单观察者模式

xing2233

于 2020-11-16 16:09:19 发布

阅读量103

点赞数

分类专栏： javascript 文章标签：观察者模式 JavaScript 属性联动回调函数数据绑定

本文链接：https://blog.csdn.net/xing_____/article/details/109723423

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>


<script>
  
  'use strict'
  // 观察者模式
  // 当被观察者a属性name改变，观察者b的属性随之改变

  // 被观察者
  const a = {}

  // 观察者
  const b = {}

  // 观察者集合
  const observerObj = []

  function observer(watcher, name) {
    for (let i; i < watcher.length; i++) {
      watcher.name = name
    }
  }

  let bValue = '小名';
  Object.defineProperty(a, 'name', {
    get: function () {
      return bValue;
    },
    set: function (newValue) {
      bValue = newValue;
      observer(observerObj, newValue)

    },
  })


  bValue = '小蓝'
  Object.defineProperty(b, 'name', {
    get: function () {
      return bValue;
    },
    set: function (newValue) {
      bValue = newValue;
    },
  })


  // 注册
  observerObj.push(b)

  a.name = '我是小北'
  console.log(b)


</script>

</body>
</html>