Beispiel für die Implementierung des zugrunde liegenden Codes zur Simulation responsiver Prinzipien durch Vue

Die Gesamtanalyse der Grundstruktur von Vue ist in der folgenden Abbildung dargestellt: (Hinweis: Die vollständige GitHub-Adresse des Codes lautet https://github.com/1512955040/MiniVue.)

In der obigen Abbildung simulieren wir die Gesamtstruktur des minimalen Vue. Zuerst erstellen wir einen Vue-Typ, der dafür verantwortlich ist, Mitglieder in Daten in die Vue-Instanz einzufügen und sie in Getter/Setter umzuwandeln. Die Rolle des Beobachters besteht darin, Daten zu kapern, die Attribute in Daten zu überwachen und den neuesten Wert abzurufen, wenn sich die Daten ändern, und Dep zu benachrichtigen. Die Rolle des Compilers besteht darin, die Anweisungen und Differenzialausdrücke in jedem Element zu analysieren und durch entsprechende Daten zu ersetzen. Die Rolle von Dep besteht darin, Beobachter hinzuzufügen und alle Beobachter zu benachrichtigen, wenn sich die Daten ändern. Innerhalb von Watcher gibt es eine Update-Methode, die für die Aktualisierung der Ansicht verantwortlich ist. Lassen Sie uns sie nacheinander im Code implementieren.

1.Vue.js-Funktionen:

1-1 ist für den Empfang von Initialisierungsparametern (Optionen) verantwortlich.

1-2 ist dafür verantwortlich, die Attribute in Daten in die Vue-Instanz einzufügen und sie in Getter/Setter umzuwandeln.

1-3 ist für den Aufruf eines Beobachters verantwortlich, der Änderungen in allen Attributen in den Daten überwacht

1-4 ist für den Aufruf des Compilers zum Parsen des Befehls/Differenzausdrucks zuständig

Die Struktur des Klassendiagramms ist wie folgt:

Wie in der obigen Abbildung gezeigt: Es gibt drei Attribute in der Vue-Klasse, nämlich $options, $el und $data. Diese drei Attribute zeichnen die im Konstruktor übergebenen Parameter auf. _proxyData ist eine Methode in der Vue-Klasse

Daher sind Mitglieder, die mit _ beginnen, private Mitglieder. Die Funktion dieser Methode besteht darin, die Eigenschaften in Daten in Getter und Setter umzuwandeln und sie in die Vue-Instanz einzufügen.

Klasse Vue{
    Konstruktor(Optionen) {
        //1. Speichere die Daten in den Optionen über Attribute this.$options = options || {}
        dies.$data = options.data || {}
        dies.$el = Typ von options.el === 'Zeichenfolge' ? document.querySelector(options.el) : options.el
        //2. Konvertieren Sie die Mitglieder in den Daten in Getter und Setter und fügen Sie sie in die Vue-Instanz this._proxyData(this.$data) ein.
        //3. Rufen Sie das Observer-Objekt auf, um Datenänderungen zu überwachen new Observer(this.$data)
        //4. Rufen Sie das Compilerobjekt auf, um Anweisungen und Differenzausdrücke zu analysieren new Compiler(this)
    }
    //Konvertiere die Eigenschaften von Vue in Getter und Setter und injiziere sie in die Vue-Instanz_proxyData(data){
        //Alle Attribute in dataObject.keys(data).forEach(key=>{ durchlaufen
          //Füge die Datenattribute global in die Vue-Instanz ein Object.defineProperty(this, key, {
              aufzählbar:wahr,
              konfigurierbar:true,
              erhalten(){
                Daten zurückgeben [Schlüssel]
              },
              setze(neuerWert){
                wenn(neuerWert===Daten[Schlüssel]){
                    zurückkehren 
                }
                Daten[Schlüssel]=neuerWert
             }
        })    
      })
    }
}

2.Observer.js-Funktion (Datenentführung):

2-1 Verantwortlich für die Konvertierung der Attribute in der Datenoption in responsive Daten

2-2 Eine Eigenschaft in Daten ist auch ein Objekt. Konvertieren Sie die Eigenschaft in responsive Daten

2-3 Senden Sie Benachrichtigungen, wenn sich Daten ändern

Die Struktur des Klassendiagramms ist wie folgt:

Wie in der Abbildung oben gezeigt:

Mit der Walk-Methode werden alle Attribute in den Daten durchlaufen, und mit defineReactive werden reaktionsfähige Daten definiert, d. h. Attribute werden durch Aufrufen der Methode defineReactive in Getter und Setter umgewandelt.

Klasse Beobachter{
    Konstruktor(Daten) {
        dies.walk(Daten)
    }
    //Die Walk-Methode durchläuft alle Attribute in den Daten walk(data) {
        //1. Bestimmen Sie, ob Daten ein Objekt sind, if(!data || typeof data !=='object'){
            zurückkehren 
        }
        //2. Durchlaufe alle Eigenschaften des Datenobjekts Object.keys(data).forEach(key=>{
            this.defineReactive(Daten, Schlüssel, Daten[Schlüssel])
        })
    }
    //Die Methode „defineReactivce“ definiert responsive Daten, um Eigenschaften in Getter und Setter umzuwandeln
    defineReactive(Objekt,Schlüssel,Wert) {
        lass das = dies
        // Verantwortlich für das Sammeln von Abhängigkeiten und Senden von Benachrichtigungen let dep = new Dep()
        //Wenn val an ein Objekt übergeben wird, füge den Eigenschaften im Objekt Getter- und Setter-Methoden hinzu this.walk(val)
        Objekt.defineProperty(Objekt,Schlüssel,{
            aufzählbar:wahr,
            konfigurierbar:true,
            erhalten(){
                // Abhängigkeiten sammeln Dep.target && dep.addSub(Dep.target)
                Rückgabewert
            },
            setze(neuerWert){
                wenn(neuerWert==Wert){
                    zurückkehren 
                }
                val=neuerWert
                //Wenn Sie das Attribut einem Objekt neu zuweisen, fügen Sie dem Attribut im Objekt erneut Getter- und Setter-Methoden hinzu //Beispiel: historische Daten vm.msg="Hallo Welt" Nach der Änderung vm.msg={a:'Hwllo World'}
                //Rufen Sie diese Methode erneut auf, um die Getter- und Setter-Methoden wieder zu vm.msg.a that.walk(newValue) hinzuzufügen.
                //Benachrichtigung senden dep.notify()
            }
        })
    }
}

3. Compiler.js-Funktionen:

3-1 Verantwortlich für das Kompilieren von Vorlagen und das Parsen von Anweisungen/Differenzausdrücken

3-2 Verantwortlich für das erste Rendering der Seite

3-3 Rendern Sie die Ansicht erneut, wenn sich die Daten ändern

Die Struktur des Klassendiagramms ist wie folgt:

Wie in der Abbildung oben gezeigt:

el ist options.el, das vom Konstruktor übergeben wird, vm ist eine Instanz von vue und Folgendes sind alles Methoden von vm, um auf DOM zu operieren. Die Kompilierungsmethode durchläuft alle Knoten des DOM-Objekts und

Bestimmen Sie, ob diese Knoten Textknoten sind. Wenn es sich um Textknoten handelt, analysieren Sie den Differenzausdruck. Wenn es sich um Elementknoten handelt, analysieren Sie die Anweisung. Die Methoden isTextNode und isElementNode bestimmen, ob es sich um Textknoten handelt oder

Ist ein Elementknoten. Die Methoden „compileElement“ und „compileText“ analysieren unterschiedliche Ausdrücke und Anweisungen. Die Methode isDirective bestimmt, ob ein Elementattribut eine Direktive ist.

4.Dep.js-Funktionen:

4-1 Abhängigkeiten sammeln und Beobachter hinzufügen

4-2 Alle Beobachter benachrichtigen

Wie in der Abbildung oben gezeigt:

Im Reaktionsmechanismus von Vue wird der Beobachtermodus verwendet, um auf Datenänderungen zu reagieren. Die Rolle von Dep besteht darin, Abhängigkeiten zu sammeln, Abhängigkeiten in der Getter-Methode zu sammeln und Abhängigkeiten in der Setter-Methode zu benachrichtigen.

Eine responsive Eigenschaft verfügt über ein Dep-Objekt, das für das Sammeln aller Orte verantwortlich ist, die von der Eigenschaft abhängen. Alle Orte, die von der Eigenschaft abhängen, erstellen ein Watcher-Objekt.

Dep ist das in der Eigenschaft gesammelte Watcher-Objekt, verwendet die Setter-Methode, um die Abhängigkeit zu benachrichtigen, ruft die Nodify-Methode auf, um eine Benachrichtigung zu senden, wenn sich die Eigenschaft ändert, und ruft dann das Watcher-Objekt auf

Die Update-Methode.

Der Unterricht ist wie folgt aufgebaut:

Wie in der Abbildung oben gezeigt:

subs ist ein Array, das alle Beobachter in dep speichert, die Methode addSub fügt einen Beobachter hinzu und die Methode notify veröffentlicht eine Benachrichtigung

Klasse Dep{
    Konstruktor() {
        //Alle Beobachter speichern this.subs=[]
    }
    // Beobachter hinzufügen addSub(sub){
        wenn(sub && sub.update) {
            dies.subs.push(sub)
        }
    }
    //Benachrichtigung senden notify(){
        dies.subs.forEach(sub =>{
            unter.update()
        })
    }
}

5.Watcher.js-Funktionen:

5-1 Wenn Datenänderungen Abhängigkeiten auslösen, benachrichtigt dep alle Watcher-Instanzen, die Ansicht zu aktualisieren

5-2 Sich selbst zum Dep-Objekt hinzufügen, wenn man sich selbst instanziiert

Wie in der Abbildung oben gezeigt:

Für jedes Attribut in den Daten wird ein Dep-Objekt erstellt. Beim Sammeln von Abhängigkeiten werden die Wächter aller Objekte zum Subs-Array des Dep-Objekts hinzugefügt und eine Mitteilung wird im Setter-Objekt gesendet.

Rufen Sie die Benachrichtigungsmethode des Dep-Objekts auf, um alle zugehörigen Watcher-Objekte zu benachrichtigen, dass die Ansicht aktualisiert werden soll.

Die Struktur des Klassendiagramms ist wie folgt:

Wie in der Abbildung oben gezeigt:

Das Aktualisierungsobjekt aktualisiert die Ansicht und die CB-Rückruffunktion gibt an, wie die Ansicht aktualisiert wird. Beim Aktualisieren der Ansicht ist ein Attributschlüssel (der Attributname in den Daten) erforderlich, und „oldvalue“ ist der Wert, der dem Schlüssel entspricht.

Klasse Watcher{
    Konstruktor(vm,Schlüssel,cb) {
        dies.vm=vm
        //Der Attributname in den Daten this.key=key
        //Die Rückruffunktion ist für die Aktualisierung der Ansicht verantwortlich this.cb=cb
        // Zeichne das Watcher-Objekt im statischen Attributziel der Dep-Klasse auf
        Dep.target = dies
        //Löst die get-Methode aus, in der addSub aufgerufen wird
        this.oldValue=vm[Schlüssel]
        Dep.target=null
    }
    // Aktualisiere die Ansicht, wenn sich die Daten ändern update() {
        let neuerWert = this.vm[this.key]
        wenn(dieser.alterWert === neuerWert){
            zurückkehren
        }
        this.cb(neuerWert)
    }
}

Das folgende Diagramm fasst den Gesamtprozess zusammen:

Damit ist dieser Artikel über das Beispiel der zugrunde liegenden Codeimplementierung des simulierten Responsive-Prinzips von Vue abgeschlossen. Weitere relevante Inhalte zum Responsive-Prinzip von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!