Die vorherigen Artikel haben einige Grundkenntnisse der JS -Debugging -Serie eingeführt. Diesmal haben die Brüder der verstümmelten Code Ihnen JS -Haltepunkte und dynamische Debugging -Methoden gebracht. Freunde, die es brauchen, können sich darauf beziehen.
After-Class-Übungen, die ich gestern verlassen habe 1..
Tatsächlich haben wir den Quellcode gesehen. Lesen Sie einfach den Quellcode und Sie können wissen, wie er implementiert wird.
Funktion Votepost (n, t, i) {i || (i =! 1); var r = {blogApp: currentblogApp, postId: n, vtetype: t, isAbonted: i}; $ ("#digg_tips"). CSS ("Farbe", "rot"). Html ("Commit ..."); $.ajax({ url: "/mvc/vote/VoteBlogPost.aspx", type: "post", dataType: "json", contentType: "application/json; charset=utf-8", data: JSON.stringify(r), success: function(n) { if (n.IsSuccess) { var i = $("#" + t.toLowerCase() + "_count"); (N.Status == 500? $ ("#digg_tips"). }Es ist fast so.
PS: Ich benutze den sublime Text formatierten Code, der sich nach der Formatierung der Chromkonsole etwas vom Ergebnis unterscheidet.
Sie können auch dieses Online -Formatierungs -Tool ausprobieren. Der Effekt ist ähnlich: Online -JavaScript schön
Nachdem Sie den Code einfach gelesen haben, können Sie grob wissen, dass diese Funktion 3 Parameter enthält. Das erste ist postid, das ist die Artikel -ID, und die zweite ist Empfehlung (DIGG) oder Opposition (Bury).
Der dritte wurde jedoch nicht verwendet, und der Standardwert ist falsch
Mit Blick nach unten zeigt er die Zeichenfolge "Senden ..." bei #Digg_tips an und legt dann die Daten über Ajax auf den Hintergrund ein.
Nachdem die Daten zurückgegeben haben, wird die entsprechende Zähl -ID von gleichen (#Digg_Count) oder Einwand (#bury_count) +1 auf der entsprechenden Anzahl von IDs (#Digg_count) +1 (#bury_count).
Wenn der Wert von isAboned jedoch wahr ist, zählen Sie -1.
Dann können wir vermuten, dass der dritte Parameter verwendet wird, um Empfehlungen oder Einwände zu widerrufen. Einfach ausgedrückt, ich habe auf die Empfehlung geklickt, aber ich möchte sie jetzt nicht empfehlen. Ich kann den dritten Parameter übergeben, um den Effekt der Aufhebung der Empfehlung zu erreichen.
Lassen Sie es uns später testen.
Als nächstes wird die vom Server zurückgegebenen N.Message -Informationen unter #Digg_tips angezeigt.
Wenn in AJAX ein Fehler auftritt, beträgt er 500. Es fordert "sorry! Ein Fehler ist aufgetreten! Bitte feedback an [email protected]" Andere Status fordern direkt den Server für die zurückgegebene Fehlermeldung auf.
Dies ist der allgemeine Prozess, da diese Funktion einfach ist, sie ist auf einen Blick zu sehen.
Einige neue Freunde haben vielleicht gefragt, woher Sie wissen, welcher Wert Currentblogapp, N, T, ich ist?
Dann gehen wir zum nächsten Schritt und zum dynamischen Debuggen. Dynamisches Debugging ist eine sehr nützliche Methode für kompilierte Projekte.
Suchen Sie zuerst den VoTePost -Quellcode (ich habe das gestern gesagt und verstehe es nicht sehr, dann gehen Sie zurück und schauen Sie zuerst einen Blick darauf.)
So einfach, wir haben den Quellcode gefunden.
Als nächstes klicken wir auf die Nummer 92 und führen den Haltepunktvorgang durch.
Warum nicht Breakpoints in Zeile 91?
Da Zeile 91 der Funktionserklärungsteil ist, können wir keinen Haltepunkt festlegen. Wir können einen Haltepunkt auf den Code einstellen, der von der Funktion ausgeführt werden soll.
Zu sehen, dass die Zeile der Zeile 91 blau geworden ist, was darauf hinweist, dass an diesem Ort ein Haltepunkt gegeben wurde. Gleichzeitig sehen wir die abgesetzten Haltepunkte in der Spalte Haltepunkte rechts.
Die Spalte der Haltepunkte verwaltet alle Haltepunkte, die leicht in die entsprechende Haltepunktposition umgeleitet werden können und in Zukunft verwendet werden.
Nachdem wir den Haltepunkt festgelegt haben, werden wir auf die Empfehlung klicken. . (Obwohl ich das Gefühl habe, Empfehlungen zu betrügen, habe ich das wirklich nicht gedacht. Ich habe gerade einen Knopf zum Üben gefunden.)
Wenn Sie auf die Empfehlungsschaltfläche klicken, passierte etwas Magie. Anstatt die Empfehlungsfunktion auszuführen, sind Sie in den Haltepunkt gesprungen, den wir gerade in der Quellenpanel der Konsole gesenkt haben.
Jetzt können Sie nicht nur die aktuelle Variable in der Spalte der Geltungsvariablen rechts sehen, sondern auch die Maus direkt auf eine beliebige Variable verschieben, um den Wert der Variablen anzuzeigen.
In der Spalte der Geltungsvariablen wird das aktuelle Bereich und den übergeordneten Umfang sowie den Schließungen angezeigt.
Ist es nicht super bequem? . (Umfangsvariablen haben mir sehr geholfen, als ich zum ersten Mal Schließungen lernte.)
Gehen wir zum nächsten Schritt und drücken Sie 3 Mal F10, um so etwas zu sehen.
Jedes Mal, wenn wir F10 drücken, werden wir eine Erklärung ausführen. Nachdem wir es gerade dreimal gedrückt haben, werden wir $ ("#digg_tips"). CSS ("Farbe", "rot") ausführen.
So können wir die #Digg_tips sehen, die die Wörter in der Einreichung auf der Seite anzeigen.
Als wir jedoch erneut F10 drücken, stellten wir fest, dass es weiterhin den ganzen Weg ausgeführt hat, ohne die Rückruffunktion innerhalb von AJAX einzugeben.
Dies ist eine verwirrende Frage, und ich möchte mich darauf konzentrieren.
Für Callback -Funktionen wie diese, insbesondere asynchron, müssen wir den nächsten Haltepunkt innerhalb der Rückruffunktion.
So können wir in Zeile 96 nur einen Haltepunkt festlegen. Jetzt klicken wir auf die Empfehlung und halten trotzdem in Zeile 92 an. Wir können einfach F8 drücken und ihn bei der AJAX -Callback -Funktion brechen.
Jetzt können wir die Rückrufdaten debuggen, und wir können auch feststellen, dass es auf der rechten Seite eine zusätzliche Schließungssache in den Umfangsvariablen gibt, was die Schließung ist.
Wenn Sie es jetzt nicht verstehen können, dann gehen Sie einfach durch. Dieses Ding muss in viel Zeit eingeführt werden und kann nicht in wenigen Worten erklärt werden. Wie auch immer, die Konsole ist sehr mächtig.
Während wir die Schließung sehen, sehen wir auch die Rückgabedaten n von Ajax. Es ist offensichtlich, dass meine Issuccess -Eigenschaft falsch ist und nicht erfolgreich ist, da eine Nachricht "Ihren eigenen Inhalt nicht empfehlen kann" zurückgegeben wird.
Ist es nicht sehr interessant? Dynamisches Debuggen erleichtert es einfach, Fehler zu finden?
Lassen Sie uns als nächstes mit dem dritten Parameter experimentieren.
Wir geben Votepost (cb_entryid, 'digg', true) ein; und drücken Sie die Eingabetaste.
Es wurde auch am Haltepunkt von Zeile 92 angehalten, sodass es nicht debuggen und direkt die AJAX -Callback -Funktion von F8 eingeben.
Hier sehen wir deutlich, dass die Empfehlung tatsächlich abgebrochen wird, wenn der dritte Parameter wahr ist. Gleichzeitig sehen Sie, dass die Empfehlungsnummer tatsächlich -1 beträgt, auch wenn sie aktualisiert ist.
Diesmal haben wir zwei Verknüpfungsschlüssel F10 und F8 verwendet. Wir werden sie morgen ausführlich vorstellen. Heute lernen wir zuerst das grundlegende Debuggen.
Nachklassenübungen: (Verbesserung der Schwierigkeit)
1. Schauen Sie sich den Button -Kommentar für Kommentare unten an und finden Sie seine Veranstaltung. (jQuery gebunden)
2. Dynamisch den Ausführungsprozess dieses Einreichungskommentarereignisses debuggen.
Wenn Sie diese Übung nicht kennen, wird empfohlen, "einen kurzen Vortrag über die Themen der JQuery -Ereignisquellencode -Positionierung" für eine detaillierte Analyse zu lesen.
Dieser Artikel stammt aus: Blogger von Blog Garden Blogger. http://www.cnblogs.com/52cik/