前端歌谣的刷题之路-第一百五十四题-观察者模式

前端大歌谣

于 2022-07-24 21:56:32 发布

阅读量120

点赞数

分类专栏：前端牛客刷题记录文章标签：前端观察者模式 javascript

本文链接：https://blog.csdn.net/geyaoisnice/article/details/125661302

版权

前端牛客刷题记录专栏收录该内容

171 篇文章 4 订阅

订阅专栏

前言

我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣

题目

请补全JavaScript代码，完成"Observer"、"Observerd"类实现观察者模式。要求如下：
1. 被观察者构造函数需要包含"name"属性和"state"属性且"state"初始值为"走路"
2. 被观察者创建"setObserver"函数用于保存观察者们
3. 被观察者创建"setState"函数用于设置该观察者"state"并且通知所有观察者
4. 观察者创建"update"函数用于被观察者进行消息通知，该函数需要打印（console.log）数据，数据格式为：小明正在走路。其中"小明"为被观察者的"name"属性，"走路"为被观察者的"state"属性
注意：
1. "Observer"为观察者，"Observerd"为被观察者

核心代码

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>观察者模式</title>
</head>

<body>
  <!-- 
    被观察者构造函数声明三个属性分别为"name"用于保存被观察者姓名、"state"用于保存被观察者状态、"observers"用于保存观察者们
    被观察者创建"setObserver"函数，该函数通过数组的push函数将观察者参数传入"observers"数组中
    被观察者创建"setState"函数，该函数首先通过参数修改被观察者的"state"属性，然后通过遍历"observers"数组分别调用各个观察者的"update"函数并且将该被观察者作为参数传入
    观察者创建"update"函数，用于打印信息
 -->
  <script type="text/javascript">
    // 补全代码
    class Observerd {
      constructor(name) {
        this.name = name
        this.state = '走路'
        this.observers = []
      }
      setObserver(observer) {
        this.observers.push(observer)
      }
      setState(state) {
        this.state = state
        this.observers.forEach(observer => observer.update(this))
      }
    }
    class Observer {
      constructor() {

      }
      update(observerd) {
        console.log(observerd.name + '正在' + observerd.state)
      }
    }
  </script>
</body>

</html>