フェーズログ

こんにちは、私のブログへようこそ!私はフルスタック ソフトウェア開発を学ぶために Javascript、HTML、その他のスキルを学んでいます。これまでの知識を棚卸し、その過程で学んだいくつかの教訓を共有する方法として、ここに私の経験の一部を文書化します。他の新しいプログラマーと一緒に。

この投稿では、私が Javascript を学習中に、特に最初の大きなプロジェクトを実行中に犯したいくつかの間違いについて説明します。私のプロジェクトは、メイクアップ製品に関する情報を API から取得し、整理された視覚的に楽しい方法で Web ページに配置します。

間違い #1: 可能な限り自動化していない
プロジェクトが情報を取得する API は大きな配列であるため、最終的にプロジェクトを構造化することに決めた方法は、API から返される配列に対して forEach メソッドを使用し、配列の要素ごとに新しい div HTML 要素を動的に作成することでした。各メイクアップ製品の配列。この構造は、以下のスクリーンショットの 10 行目から見ることができます。

画像の説明

しかし、最初は、API の配列の各要素を、プロジェクトの HTML ファイル内にすでに作成していた div HTML 要素に割り当てようとしました。 API 内の情報に基づいて新しい HTML 要素を作成する代わりに、API 配列要素に一致することがわかっている div を手動で作成する必要があったため、この方法は非常に難しいことがわかりました。これは時間がかかり、エラーが発生しやすい戦略でした。さらに、API 配列要素が変更されていれば、私の最初のアイデアは機能しなくなり、プロジェクトの汎用性が大幅に低下したでしょう。 div HTML 要素を作成する非動的方法は、前述の理由から私のプロジェクトには適切な選択ではありませんでしたが、この方法でプロジェクトを試みたときに学んだ貴重な教訓がまだあると思います。そのため、他の間違いについては後で共有します。この投稿はそのコードから来ます。

間違い #2: アイデンティティを間違えた
何かが機能しない場合は、変更しようとしているコードの側面が、自分が考えているとおりであるかどうかを確認するとよいでしょう。適用できないメソッドを使用しようとしているためにエラーが発生している可能性があります。このタイプのトラブルシューティングに役立つ 2 つのツールは、console.log() と typeOf() です。
プロジェクトの最初のコードが計画どおりに動作しなかったときに、両方を使用しました。 console.log() と for ループを同時に使用する場合、コードの実行が停止する場所を正確に確認できるように、1 つを for ループの内側に置き、別の 1 つを for ループの外側に置くと便利です。
以下のスクリーンショットで、これをどのように行ったかがわかります。

画像の説明

その後、thisDiv がオブジェクトかどうかを確認するために console.log(typeOf(thisDiv)) も実行しました。振り返ってみると、product.id は数値である可能性が最も高いのに対し、thisDiv は確かにオブジェクトであるため、すぐ上のスクリーンショットはおそらく機能しませんでした。しかし、このエラーにもかかわらず、console.log() と typeOf() は自分を落ち着かせ、次のステップを見つけるための優れたツールでした。

間違い #3: 何かを忘れると、存在しない可能性があります
場合によっては、自分が思っているものと異なるものを変更しようとしたからではなく、存在しないものを変更しようとしたためにコードが破損することがあります。プロジェクトの最初のメソッドに取り組んでいる間、thisDiv がオブジェクトであると確信した後、なぜ thisDiv.id が認識されないのか混乱しました。なぜなら、その構文は W3schools に従ってオブジェクト値を取得する有効な方法だからです ( https://www.w3schools.com/js/js_objects.asp)。 thisDiv の ID を取得する適切な方法を取得できるように、14 行目を「console.log(Object.keys(thisDiv))」に変更して、15 行目から始まる if ステートメントを修正して比較できるようにすることにしました。 product.id への thisDiv の ID キー

画像の説明

その変更により次のエラーが発生しました:

Uncaught (in Promise) TypeError: 未定義または null をオブジェクトに変換できません
Function.keys ()
で Index.js:14:32
にて Array.forEach ()
で displayProdName (index.js:11:10)
で Index.js:6:21
で Python での作業で、for ループの最初の要素が存在しないか、for ループのステートメントを実行するために必要な特性を持たない場合、コードが壊れて反復が行われない場合があることがわかりました。 for ループが発生します。このプロジェクトの Javascript for ループでも同様の問題が発生しているのではないかと思いました。i=0 の場合、12 行目の for ループの最初の反復である document.getElementById(0) が存在しないため、thisDiv が存在しなかったためです。 i の最初の反復では t が存在しません。したがって、console.log(Object.keys(thisDiv)) は機能しませんでした。thisDiv はオブジェクトではなく、キーがなかったためです。したがって、コードの一部が存在しない可能性があることを覚えておくと、コーディングの時間を大幅に節約できます。

これら 3 つの教訓は、JavaScript への取り組みを始めたときに私が学んだ多くの教訓の 1 つです。これを読んでお役に立てば幸いです!

以上がフェーズログの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。