frontend-knowledge/index.html at main · codeRepJamie/frontend-knowledge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <button id="addBtn">增加CheckBox</button>
  <input type="checkbox" id="handle"></input>
  <div id="checkboxWrapper"></div>
</body>
<script>

  class Subject {
    constructor() {
      this.observers = new ObserverList()
    }
    addObserver(observer) {
      this.observers.add(observer);
    }
    notify(context) {
      var observerCount = this.observers.count();
      for (var i = 0; i < observerCount; i++) {
        this.observers.get(i).update(context);
      }
    }
  }

  class Observer {
    constructor(fn) {
      this.update = fn
    }
  }

  class ObserverList {
    constructor() {
      this.list = []
    }
    count() {
      return this.list.length
    }
    add(obj) {
      this.list.push(obj)
    }
    get(index) {
      return this.list[index]
    }
  }

  const addBtn = document.getElementById('addBtn')
  let handle = document.getElementById('handle')
  const checkboxWrapper = document.getElementById('checkboxWrapper')

  addBtn.onclick = addNewObserver
  handle.onclick = changeHandle

  handle.subject = new Subject()

  function addNewObserver() {
    let check = document.createElement('input')
    check.type = 'checkbox'
    check.observer = new Observer((value) => {
      check.checked = value
    })
    handle.subject.addObserver(check.observer)
    checkboxWrapper.appendChild(check)
  }
  function changeHandle() {
    handle.subject.notify(handle.checked);
  }


</script>

</html>