Ich habe mich in letzter Zeit beschwert. Jeder weiß, dass das Web-Front-End im Vergleich zu vor einigen Jahren sehr schwer geworden ist. Verschiedene JS -Frameworks, verschiedene Objekte und viele Projekte, öffentliche Module werden extrahiert.
Die UI -Anzeige dieser Module ist gleich und der Unterschied ist die Hintergrundlogik. Wenn wir beispielsweise in Unternehmensreisen Geschäfte machen, haben wir normalerweise ein öffentliches JS -Modul des Kostenzentrums. Kunden füllen dieses Kostenzentrum bei der Buchung von Flugtickets ein. Dieses Kostenzentrum wird an den Reservierenden wie Online, Offline und App verteilt, was auch für die monatliche Abrechnung mit dem Kundenunternehmen in der späteren Phase zweckmäßig ist.
Wir wissen auch, dass nach dem Projekt größer, kompliziert und SOA viele Probleme auftreten. Genau wie eine Theorie im Web sind alle Front-End-Daten nicht zu vertrauenswürdig, sodass die Schnittstellendaten des anderen Teams nicht gleich sind. Als das Projekt jung war, war es nicht so unsicher, und es würde nur Logikfehler aufzeichnen. Normale Geschäftsprozesse werden im Allgemeinen selten aufgezeichnet. Schließlich sehen Info -Protokolle unansehnlich aus und konsumiert auch die Serverbandbreite und ziehen auch die Leistung des Web herunter.
Aber das Projekt ist groß. Wenn Sie eines Tages einen seltsamen Fehler im Projekt begegnen, verlassen Sie sich auf die unvollständigen Protokolle und verfolgen schließlich die Schnittstellenlinie mit dem bloßen Auge. Es gibt jedoch zu viele Parameter und es ist unmöglich, die Schnittstellenparameterdaten genau wiederherzustellen. Sie sind jedoch zu 100% zuversichtlich, dass es definitiv das Rückgabeproblem der Schnittstelle ist, aber Sie können die vollständige Nachricht nicht erhalten. Zu diesem Zeitpunkt können Sie den Schnittstellenanbieter nicht finden. Ich war zu dieser Zeit hilflos. Es wäre großartig, wenn Sie glauben, dass es besser wäre, in jeder Zeile ein Anmeldung zu haben.
Nachdem er die Lektion gelernt hatte, wurde der Trend der Aufzeichnungsprozessprotokolle immer beliebter, und schließlich wurde auch zu Beginn des Jahres ein großes Ereignis verursacht. Ich habe viel verwirrt gesagt, dass das Web-Backend so ist. Müssen wir also nicht auch Protokolle im aktuellen Front-End aufnehmen? Wir wissen, dass dieses Modul, da es sich um ein öffentliches JS-Modul handelt, einige Methoden für sich selbst verkapselt haben muss, und es ist absolut unmöglich, Drittanbieter-Programme ihre eigenen Textknoten wie folgt betreiben zu lassen:
Die Codekopie lautet wie folgt:
<!-drittes Modul->
Firma: <Eingabe type = "text" id = "Firma" value = "xxx Co., Ltd." />
Mitarbeitername: <Eingabe type = "text" id = "userername" value = "zhang san" />
<!-->
<script type = "text/javaScript">
// Kostenzentrum
var costCenter = (function () {
var Company = (document.getElementById ("Company") || "") && document.getElementById ("Company"). Wert;
var userername = (document.getElementById ("userername") || "") && document.getElementById ("Benutzername"). Wert;
var result = {
getInfo: function () {
Return {Company: Company, Benutzername: Benutzername};
},
Validierung: function () {
return boolean (Firma && Benutzername);
}
};
Rückgabeergebnis;
}) ();
</script>
Um den Vorgang zu vereinfachen, bietet die UI-UI-UI-Knoten für Firmennamen und Mitarbeiternamen und fördert eine Cost-Center-Klasse, um Lesemethoden bereitzustellen. Es ist zu sehen, dass mein geplanter Programm nur CostCenter.getInfo lesen muss, was auch eine Rolle bei der Kapselung spielt.
Aber das Problem tritt hier auf. Im tatsächlichen Projekt kann der Wert aus verschiedenen Gründen nicht im Costcenter erhalten werden. Natürlich kann es auch ein Fehler in der gemeinsamen Benutzeroberfläche sein.
Zu diesem Zeitpunkt waren Sie sich jedoch nicht sicher, ob der Wert tatsächlich erhalten wurde, aber logischerweise, selbst wenn der Wert nicht erhalten wurde, konnten Sie im Prinzip nicht die Einreichung der Reihenfolge verhindern. Um den Fehler gründlich zu verfolgen, haben Sie eine Logcenter -Singleton -Klasse geschrieben, um das Protokoll aufzuzeichnen. Normalerweise gibt es diese Möglichkeit, JS zu verwenden, um Protokolle aufzuzeichnen.
<1> ajax
Diese Methode ist leicht zu denken, aber wenn Sie native XMLHTTPrequest verwenden, müssen Sie die Browserkompatibilität in Betracht ziehen. Wenn Sie jedoch keinen nativen benötigen, müssen Sie sich auf Frameworks von Drittanbietern wie JQuery verlassen. Schließlich gibt es jedoch immer noch viele Unternehmen, die JQuery nicht verwenden, so dass dies entsprechend den tatsächlichen Bedürfnissen verwendet werden muss.
Die Codekopie lautet wie folgt:
// Protokollcenter
var logcenter = (function () {
var result = {
Info: Funktion (Titel, Nachricht) {
// Ajax Operation
$ .get ("http://xxx.com", {"title": title, "message": message}, function () {
}, "Post");
}
};
Rückgabeergebnis;
}) ();
<2> Bild
In unserem DOM gibt es ein Objekt namens Image, sodass wir seine SRC dynamisch dem Zweck der Anforderung der Hintergrund -URL zuweisen können. Gleichzeitig müssen wir Titel- und Nachrichteninformationen in die URL übergeben. Diese dynamische Methode zum Image.src muss keine Browserkompatibilitätsprobleme berücksichtigen, was sehr gut ist.
Die Codekopie lautet wie folgt:
// Protokollcenter
var logcenter = (function () {
var result = {
Info: Funktion (Titel, Nachricht) {
// Ajax Operation
$ .get ("http://xxx.com", {"title": title, "message": message}, function () {
}, "Post");
},
info_image: function (title, message) {
//Bild
var img = new Image ();
img.src = "http://www.baidu.com?title=" + title + "& message =" + message + "& temp =" + (math.random () * 100000);
}
};
Rückgabeergebnis;
}) ();
Das obige ist der Hauptinhalt dieses Artikels, und wir werden es in Zukunft weiterhin detailliert diskutieren