Phasenprotokoll

Hallo und willkommen auf meinem Blog! Ich lerne Javascript, HTML und andere Fähigkeiten, um die Entwicklung von Full-Stack-Software zu erlernen, und werde hier einige meiner Erfahrungen dokumentieren, um eine Bestandsaufnahme meines bisherigen Wissens zu machen und auch einige Lektionen weiterzugeben, die ich dabei gelernt habe mit anderen neuen Programmierern.

In diesem Beitrag werden einige Fehler besprochen, die ich bisher beim Erlernen von Javascript gemacht habe, insbesondere bei meinem ersten großen Projekt. Mein Projekt übernimmt Informationen über Make-up-Produkte von einer API und stellt sie auf organisierte und optisch ansprechende Weise auf einer Webseite dar.

Fehler Nr. 1: Nicht so viel wie möglich automatisieren
Die API, von der mein Projekt Informationen erhält, ist ein großes Array. Daher entschied ich mich schließlich für die Strukturierung meines Projekts, indem ich die forEach-Methode für das von meiner API zurückgegebene Array verwendete und für jedes Element von dynamisch ein neues div-HTML-Element erstellte das Array für jedes Make-up-Produkt. Sie können diese Struktur ab Zeile 10 des Screenshots unten sehen.

Bildbeschreibung

Anfangs habe ich jedoch versucht, jedes Element des Arrays meiner API div-HTML-Elementen zuzuweisen, die ich bereits in der HTML-Datei meines Projekts erstellt hatte. Diese Methode erwies sich als sehr schwierig, da ich keine neuen HTML-Elemente basierend auf Informationen in der API erstellen musste, sondern manuell Divs erstellen musste, von denen ich wusste, dass sie mit den API-Array-Elementen übereinstimmen würden, eine Strategie, die zeitaufwändig und fehleranfälliger war. Außerdem hätte meine ursprüngliche Idee nicht funktioniert, wenn sich die API-Array-Elemente geändert hätten, was mein Projekt viel weniger vielseitig gemacht hätte. Obwohl meine nicht-dynamische Methode zum Erstellen von div-HTML-Elementen aus den genannten Gründen nicht die richtige Wahl für mein Projekt war, denke ich, dass ich dennoch wertvolle Lektionen gelernt habe, als ich mein Projekt auf diese Weise versuchte, weshalb ich über die anderen Fehler berichten werde Dieser Beitrag wird von diesem Code stammen.

Fehler Nr. 2: Falsche Identität
Wenn etwas nicht funktioniert, sollten Sie überprüfen, ob der Aspekt Ihres Codes, den Sie ändern, Ihren Vorstellungen entspricht. Möglicherweise erhalten Sie eine Fehlermeldung, weil Sie versuchen, eine Methode zu verwenden, die nicht anwendbar ist. Zwei Tools, die für diese Art der Fehlerbehebung hilfreich sind, sind console.log() und typeOf().
Ich habe beides verwendet, als mein ursprünglicher Code für mein Projekt nicht wie geplant funktionierte. Wenn Sie console.log()s und for-Schleifen gleichzeitig verwenden, kann es hilfreich sein, eine innerhalb der for-Schleife und eine andere außerhalb der for-Schleife zu platzieren, damit Sie genau sehen können, wo Ihr Code aufhört zu laufen.
Wie ich das gemacht habe, könnt ihr im Screenshot unten sehen.

Bildbeschreibung

Später habe ich auch console.log(typeOf(thisDiv)) ausgeführt, um zu sehen, ob thisDiv ein Objekt war. Rückblickend hat der Screenshot direkt oben wahrscheinlich nicht funktioniert, weil „product.id“ höchstwahrscheinlich eine Zahl war, während „thisDiv“ tatsächlich ein Objekt war. Aber trotz dieses Fehlers waren console.log() und typeOf() gute Werkzeuge, um mich zu erden und meine nächsten Schritte herauszufinden.

Fehler Nr. 3: Vergessen, dass etwas möglicherweise nicht existiert
Manchmal kann Code kaputt gehen, nicht weil Sie versuchen, etwas zu ändern, das anders ist, als Sie denken, sondern weil Sie versuchen, etwas zu ändern, das nicht existiert. Während ich an meiner ersten Methode für mein Projekt arbeitete und mir sicher war, dass „thisDiv“ ein Objekt war, war es für mich verwirrend, warum „thisDiv.id“ nicht erkannt wurde, da diese Syntax laut W3schools eine gültige Möglichkeit ist, einen Objektwert zu erhalten ( https://www.w3schools.com/js/js_objects.asp). Ich habe beschlossen, Zeile 14 in „console.log(Object.keys(thisDiv))“ zu ändern, damit ich den richtigen Weg finde, die ID von thisDiv zu erhalten, damit ich meine if-Anweisung, die in Zeile 15 beginnt, korrigieren und vergleichen kann ID-Schlüssel von thisDiv zu product.id.

Bildbeschreibung

Ich habe aufgrund dieser Änderung die folgende Fehlermeldung erhalten:

Nicht abgefangen (in Versprechen) TypeError: Undefiniert oder Null kann nicht in Objekt konvertiert werden
bei Function.keys ()
unter index.js:14:32
bei Array.forEach ()
bei displayProdName (index.js:11:10)
unter index.js:6:21
Bei meiner Arbeit in Python habe ich festgestellt, dass manchmal, wenn das erste Element in einer for-Schleife nicht existiert oder nicht die erforderlichen Eigenschaften zum Ausführen der Anweisungen der for-Schleife aufweist, der Code kaputt geht und es keine Iterationen davon gibt Die for-Schleife wird ausgeführt. Ich dachte, dass ein ähnliches Problem in meiner Javascript-for-Schleife für dieses Projekt auftreten könnte, da für i=0, die erste Iteration meiner for-Schleife in Zeile 12, document.getElementById(0) nicht existierte, also thisDiv nicht existierte. t existiert für die erste Iteration von i. Daher funktionierte console.log(Object.keys(thisDiv)) nicht, da thisDiv kein Objekt war und daher keine Schlüssel hatte. Wenn Sie also bedenken, dass manchmal Aspekte Ihres Codes möglicherweise nicht vorhanden sind, können Sie beim Codieren viel Zeit sparen.

Diese drei Lektionen gehören zu vielen, die ich gelernt habe, als ich meine Reise in Javascript begonnen habe. Ich hoffe, dass die Lektüre für Sie hilfreich war!

Das obige ist der detaillierte Inhalt vonPhasenprotokoll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!