Implementieren Sie ein einfaches Datenantwortsystem

Klasse Dep{
  Konstruktor() {
    dies._subs = [];
  }
  abhängen() {
    dies._subs.push(Dep.target)
  }
  benachrichtigen() {
    this._subs.forEach(item => {
      Element.fn();
    })
  }
}

// Tatsächlich ist dies der Beginn der Liebe zwischen Dep und Watcher. // Eine globale Eigenschaft wird in Watcher verwendet, um Watcher zu speichern
Dep.Ziel = null;

Funktion pushTarget(watch) {
  Dep.target = beobachten;
}

Funktion popTarget() {
  Dep.Ziel = null;
}

// In Accessor-Eigenschaftsfunktion konvertieren defineReactive (obj, key, val, shallow) {

  // Einen Container für die Abhängigkeitssammlung erstellen let dep = new Dep();
  let childOb = !shallow und observe(val)

  Objekt.defineProperty(Objekt, Schlüssel, {
    aufzählbar: wahr,
    konfigurierbar: true,
    get: Funktion reactiveGetter () {
      wenn(Dep.target) {
        // Abhängigkeiten sammeln dep.depend();
      }
      Rückgabewert;
      // ...
    },
    set: Funktion reactiveSetter (newVal) {
      wenn (neuer Wert === Wert) return;
      // Weiter rekursiv durchlaufen observe(newVal);
      //Abhängigkeit auslösen dep.notify();
      // ...
    }
  })
}

Klasse Beobachter{
  Konstruktor(Daten) {
    dies.walk(Daten);
  }

  gehe(Daten) {
    const keys = Objekt.keys(Daten)
    für (lass i = 0; i < Schlüssel.Länge; i++) {
      defineReactive(Daten, Schlüssel[i], Daten[Schlüssel[i]])
    }
  }
}

// Alle Eigenschaften des Datenobjekts rekursiv in Accessor-Eigenschaften umwandeln function observe (data) {
  wenn(Object.prototype.toString.call(data) !== '[Objekt Objekt]') return;
  neuer Beobachter (Daten);
}

const Daten = {
  ein: 1,
  b: 2
}

//Überwachen Sie zuerst ein Objekt. observe(data);

Klasse Watcher{
  /**
  * @params {Funktion} exp ein Eigenschaftsausdruck * @params {Funktion} fn Rückruf */
  Konstruktor(Ausdruck, Funktion) {
    dies.exp = exp;
    dies.fn = fn;

    //Watcher speichern
    // Dep.target = dies;
    drückeZiel(dieses);

    //Führen Sie die Ausdrucksfunktion zunächst einmal aus und führen Sie im aufrufenden Prozess
    // Den Accessor für data.a auslösen und das Abrufen von data.a wird ausgeführt.
    // Lösen Sie dep.depend() aus, um mit dem Sammeln von Abhängigkeiten zu beginnen. this.exp();

    // Dep.target freigeben
    popZiel();
  }
}

// neuer Watcher Eine solche Abhängigkeit wird gesammelt new Watcher(() => {
  gib Daten.a + Daten.b zurück;
}, () => {
  console.log('ändern')
})

data.a = 3; // ändern
data.b = 3; // ändern