Log fasa

Helo, dan selamat datang ke blog saya! Saya sedang mempelajari Javascript, HTML dan kemahiran lain untuk mempelajari pembangunan perisian tindanan penuh, dan akan mendokumentasikan beberapa pengalaman saya di sini sebagai cara untuk mengambil stok pengetahuan saya setakat ini dan juga berkongsi beberapa pelajaran yang saya pelajari sepanjang perjalanan dengan pengekod baharu yang lain.

Siaran ini akan membincangkan beberapa ralat yang saya lakukan setakat ini semasa mempelajari Javascript, terutamanya semasa melakukan projek besar pertama saya. Projek saya mengambil maklumat tentang produk solekan daripada API dan meletakkannya pada halaman web dengan cara yang teratur dan menarik secara visual.

Kesilapan #1: Tidak mengautomasikan sebanyak mungkin
API dari mana projek saya memperoleh maklumat ialah Array yang besar, jadi cara saya akhirnya memutuskan untuk menstruktur projek saya adalah dengan menggunakan kaedah forEach pada Array yang dikembalikan oleh API saya, dan secara dinamik mencipta elemen HTML div baharu untuk setiap elemen Array untuk setiap produk solek. Anda boleh melihat struktur ini bermula pada baris 10 tangkapan skrin di bawah.

Perihalan imej

Pada mulanya, bagaimanapun, saya cuba untuk menetapkan setiap elemen Tatasusunan API saya untuk membahagikan elemen HTML yang telah saya buat dalam fail HTML projek saya. Kaedah ini terbukti sangat sukar kerana daripada mencipta elemen HTML baharu berdasarkan maklumat dalam API, saya terpaksa mencipta div secara manual yang saya tahu akan sepadan dengan elemen Tatasusunan API, strategi yang memakan masa dan lebih terdedah kepada ralat. Selain itu, idea awal saya tidak akan berfungsi jika elemen Tatasusunan API telah berubah, yang akan menjadikan projek saya kurang serba boleh. Walaupun kaedah bukan dinamik saya untuk mencipta elemen HTML div bukanlah pilihan yang tepat untuk projek saya atas sebab-sebab yang dinyatakan, saya rasa masih terdapat pelajaran berharga yang saya pelajari semasa mencuba projek saya dengan cara ini, jadi kesilapan lain yang akan saya kongsikan siaran ini akan datang daripada kod itu.

Kesilapan #2: Kesilapan identiti
Jika sesuatu tidak berfungsi, satu perkara yang baik untuk diperiksa ialah sama ada aspek kod anda yang anda ubah adalah seperti yang anda fikirkan. Anda mungkin mendapat ralat kerana anda cuba menggunakan kaedah yang tidak berkenaan. Dua alatan yang membantu untuk jenis penyelesaian masalah ini ialah console.log() dan typeOf().
Saya menggunakan kedua-duanya apabila kod awal saya untuk projek saya tidak berfungsi seperti yang dirancang. Apabila menggunakan console.log()s dan untuk gelung pada masa yang sama, adalah berguna untuk meletakkan satu di dalam gelung for dan yang lain di luar gelung for, supaya anda boleh melihat dengan tepat di mana kod anda berhenti berjalan.
Anda boleh lihat cara saya melakukan ini dalam tangkapan skrin di bawah.

Perihalan imej

Kemudian, saya juga melakukan console.log(typeOf(thisDiv)) untuk melihat sama ada thisDiv ialah objek. Jika difikirkan semula, tangkapan skrin di atas mungkin tidak berfungsi kerana product.id adalah nombor yang berkemungkinan besar, manakala thisDiv, sememangnya, objek. Tetapi di sebalik ralat ini, console.log() dan typeOf() adalah alat yang baik untuk membumikan diri saya dan memikirkan langkah seterusnya.

Kesilapan #3: Melupakan sesuatu mungkin tidak wujud
Kadangkala, kod boleh rosak bukan kerana anda cuba menukar sesuatu yang berbeza daripada yang anda fikirkan, tetapi kerana anda cuba mengubah sesuatu yang tidak wujud. Semasa mengusahakan kaedah awal saya untuk projek saya, setelah saya yakin bahawa thisDiv ialah objek, saya mengelirukan mengapa thisDiv.id tidak dikenali, kerana sintaks itu adalah cara yang sah untuk mendapatkan nilai Objek mengikut W3schools ( https://www.w3schools.com/js/js_objects.asp). Saya memutuskan untuk menukar baris 14 kepada "console.log(Object.keys(thisDiv))" supaya saya boleh mendapatkan cara yang betul untuk mendapatkan id thisDiv supaya saya boleh membetulkan pernyataan if saya yang bermula pada baris 15 dan membandingkan kunci id Div ini ke product.id.

Perihalan imej

Saya mendapat ralat berikut daripada perubahan itu:

Uncaught (dalam janji) TypeError: Tidak boleh menukar undefined atau null kepada objek
di Function.keys ()
di index.js:14:32
di Array.forEach ()
di displayProdName (index.js:11:10)
di index.js:6:21
Dalam kerja saya dalam Python, saya telah mendapati bahawa kadangkala, jika elemen pertama dalam gelung for tidak wujud atau tidak mempunyai ciri-ciri yang diperlukan untuk melaksanakan penyataan gelung for, kod tersebut akan pecah dan tiada lelaran bagi gelung for akan berlaku. Saya fikir isu yang sama mungkin berlaku dalam Javascript for loop saya untuk projek ini, kerana untuk i=0, lelaran pertama bagi gelung for saya dalam baris 12, document.getElementById(0) tidak wujud, jadi thisDiv tidak wujud. t wujud untuk lelaran pertama i. Oleh itu, console.log(Object.keys(thisDiv)) tidak berfungsi, kerana thisDiv bukan Objek, jadi ia tidak mempunyai sebarang kunci. Oleh itu, mengingati bahawa kadangkala aspek kod anda mungkin tidak wujud boleh menjimatkan banyak masa semasa pengekodan.

Tiga pelajaran ini adalah antara banyak yang saya pelajari semasa saya memulakan perjalanan saya ke dalam Javascript. Saya harap membaca ini dapat membantu anda!

Atas ialah kandungan terperinci Log fasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!