Eine kurze Diskussion zum Debuggen von Javascript_Grundkenntnissen

Wie wir alle wissen, ist das Web-Frontend im Vergleich zu vor ein paar Jahren sehr umfangreich geworden. Es gibt verschiedene JS-Frameworks, verschiedene Objekte und wenn es zu viele Projekte gibt, sind sie öffentlich Module werden extrahiert.

Die UI-Anzeige dieser Module ist die gleiche, der Unterschied liegt in der Hintergrundlogik. Wenn wir beispielsweise Geschäftsreisen durchführen, verfügen wir normalerweise über ein öffentliches js-Modul für die Kostenstelle, das Kunden bei der Buchung von Flugtickets ausfüllen. Diese Kostenstelle wird auf Online-, Offline- und App-Buchungsterminals verteilt, was auch in Zukunft eine monatliche Abrechnung mit Kundenunternehmen ermöglicht.

Wir wissen auch, dass viele Probleme auftreten, wenn das Projekt größer und komplizierter wird und zu SOA wird. Genau wie eine Theorie im Web sind alle Front-End-Daten nicht vertrauenswürdig, ebenso die Schnittstelle der anderen Teamdaten Das Gleiche gilt, wenn das Projekt früher klein war und ich nur dann Protokolle aufzeichnete, wenn es Logikfehler gab. Schließlich sahen die Infoprotokolle nicht schön aus Außerdem würde der Verbrauch von Serverbandbreite auch die Webleistung beeinträchtigen.

Aber wenn Sie eines Tages auf einen seltsamen Fehler im Projekt stoßen, verlassen Sie sich auf die unvollständigen Protokolle und verfolgen die Schnittstelle schließlich Zeile für Zeile mit bloßem Auge Die Parameterdaten können nicht genau wiederhergestellt werden, aber Sie sind sich zu 100 % sicher, dass es sich um ein Problem mit der Schnittstellenrückgabe handelt. Sie können jedoch nicht die vollständige Meldung erhalten. Zu diesem Zeitpunkt können Sie den Schnittstellenanbieter nicht finden , du warst hilflos. Es wäre schön, jedes Mal darüber nachzudenken.

Nachdem ich die Lektion gelernt hatte, wurde der Trend, Prozessprotokolle zu führen, immer beliebter und führte schließlich zu einem großen Ereignis zu Beginn des Jahres. Viele Dinge wurden auf verwirrende Weise gesagt Ist das so, muss das aktuelle Frontend dasselbe sein? Wir wissen, dass dieses Modul, da es sich um ein öffentliches JS-Modul handelt, einige Methoden gekapselt haben muss. Es ist definitiv nicht zulässig, dass Programme von Drittanbietern ihre eigenen Textknoten betreiben, wie zum Beispiel die folgenden:

Code kopieren Der Code lautet wie folgt:

Unternehmen:
Mitarbeitername:

Um den Vorgang zu vereinfachen, stellt die Benutzeroberfläche eines Drittanbieters UI-Knoten für Firmennamen und Mitarbeiternamen bereit und kapselt eine Costcenter-Klasse, um Lesemethoden bereitzustellen. Wie Sie sehen, muss mein Reservierungsprogramm nur costCenter.getInfo lesen . und spielt auch eine Rolle bei der Kapselung.

Hier tritt jedoch das Problem auf, dass der Wert aus verschiedenen Gründen nicht in der Kostenstelle ermittelt werden kann. Natürlich kann es sich auch um einen Fehler in der allgemeinen Benutzeroberfläche handeln.

Aber zu diesem Zeitpunkt waren Sie sich nicht ganz sicher, ob der Wert wirklich erhalten wurde, aber selbst wenn der Wert nicht erhalten wurde, konnten Sie logischerweise im Prinzip nicht verhindern, dass die Bestellung übermittelt wurde. Um den Fehler gründlich zu verfolgen, Ich habe eine logCenter-Singleton-Klasse geschrieben, um Protokolle aufzuzeichnen. Diese Methode wird normalerweise zum Aufzeichnen von Protokollen mit js verwendet.

<1> Ajax

Diese Methode ist leicht vorstellbar, aber wenn Sie das native xmlhttprequest verwenden, müssen Sie auch die Browserkompatibilität berücksichtigen. Wenn Sie jedoch nicht das native verwenden, müssen Sie sich auf ein Framework eines Drittanbieters verlassen, z wie jquery, aber schließlich gibt es immer noch viele Unternehmen, die es nicht verwenden, daher sollte dies entsprechend den tatsächlichen Anforderungen verwendet werden.

Code kopieren Der Code lautet wie folgt:

//Log Center
var logCenter = (function () {
var result = {
                info: Funktion (Titel, Nachricht) {
//Ajax-Operation
                     $.get("http://xxx.com", { "title": title, "message": message }, function () {
                 }, "post");
            }
          };
         Ergebnis zurückgeben;
})();

<2>Bild

In unserem Dom gibt es ein Objekt namens Bild, sodass wir den Zweck der Anforderung der Hintergrund-URL erreichen können, indem wir seinem Quellcode dynamisch einen Wert zuweisen. Gleichzeitig müssen wir den Titel und die Nachrichteninformationen in der URL übergeben . Dies erhöht den Wert des Bildes dynamisch. Die .src-Methode muss keine Browserkompatibilitätsprobleme berücksichtigen, was sehr gut ist.

Code kopieren Der Code lautet wie folgt:

//Log Center
var logCenter = (function () {
var result = {
                info: Funktion (Titel, Nachricht) {
//Ajax-Operation
                     $.get("http://xxx.com", { "title": title, "message": message }, function () {
                 }, "post");
             },
                 info_image: Funktion (Titel, Nachricht) {
                               //image
              var img = new Image();
img.src = "http://www.baidu.com?title=" title "&message=" message "&temp=" (Math.random() * 100000);
            }
          };
         Ergebnis zurückgeben;
})();

Das Obige ist der Hauptinhalt dieses Artikels, wir werden ihn auch in Zukunft ausführlich besprechen