Beberapa petua pengoptimuman JavaScript praktikal yang patut diketahui

Dalam kerja kami, kami selalunya boleh meningkatkan kebolehbacaan kod melalui beberapa butiran kecil dan menjadikan kod kelihatan lebih elegan. Artikel ini akan berkongsi dengan anda beberapa petua pengoptimuman JavaScript praktikal yang boleh anda fahami sepintas lalu. Saya harap ia akan membantu anda!

「Kesukaran:?」 「Masa bacaan yang disyorkan: 5min」

Filem utama

Kurangkan jika...lain kod mi

• Sebaik sahaja kita menulis lebih daripada dua if...else fungsi Sudah tiba masanya untuk memikirkan sama ada terdapat kaedah pengoptimuman yang lebih baik. [Cadangan berkaitan: tutorial pembelajaran javascript]
• Sebagai contoh, jika kita kini perlu mengira harga makanan Mai Lao berdasarkan namanya, anda boleh melakukan ini.

• Cara penulisan ini akan menjadikan badan fungsi mempunyai banyak pernyataan penghakiman bersyarat, dan apabila kita ingin menambah produk lain kali, kita perlu mengubah suai fungsi Menambah pernyataan if...else pada logik dalaman juga melanggar prinsip pembuka dan penutup pada tahap tertentu Apabila kita perlu menambah logik, kita harus mencuba yang terbaik untuk menyelesaikan permintaan perubahan dengan memanjangkan entiti perisian dan bukannya mengubah suai kod sedia ada untuk melengkapkan perubahan.
• Ini adalah kaedah pengoptimuman yang sangat klasik. Kami boleh menggunakan data yang serupa dengan organisasi Map untuk menyimpan semua produk Di sini kami terus mencipta objek untuk penyimpanan.

• Dengan cara ini kita tidak perlu mengubah logik getPrice apabila kita perlu menambah produk lain, sudah tentu, lebih banyak lagi orang seperti ini Gunakan foodMap terus di mana ia digunakan Saya hanya memberikan contoh mudah untuk menyatakan idea ini.
• Kemudian beberapa rakan sekelas akan bertanya pada masa ini, bagaimana jika saya tidak mahu key hanya menggunakan rentetan Kemudian anda boleh menggunakan new Map Idea ini adalah serupa .

Operasi saluran paip menggantikan gelung berlebihan

• Terdapat senarai makanan Mai Lao sedemikian

• Kalau nak cari makanan yang tergolong dalam Set 1, macam mana nak jumpa?
• Di atas adalah kaedah yang sering kami gunakan sebelum ini. Jelas sekali, penggantian kami menggunakan filter dan map untuk menggantikan gelung for bukan sahaja boleh menjadikan kod lebih diperkemas, tetapi juga membuat semantik. lebih jelas, jadi Kita boleh melihat sepintas lalu bahawa tatasusunan 过滤 diproses dahulu dan kemudian 重组.

cari menggantikan gelung berlebihan

• Masih dengan contoh di atas, jika kita mahu menggunakan ini objek makanan Kebergunaan find dimainkan apabila mencari makanan tertentu dalam tatasusunan berdasarkan nilai atribut.

termasuk menggantikan gelung berlebihan

• Ini adalah serupa dengan dua butiran di atas. Fungsinya ialah a fungsi terbina dalam yang tidak perlu kita tulis semula Menggunakannya dengan mahir akan menjimatkan banyak masa.
• Seperti yang kita sedia maklum, semangkuk Mee Daging Sauerkraut Kang Fu Laotan mengandungi sauerkraut, mi, kiub daging lembu, Ia terdiri daripada puntung rokok dan kulit kaki Kemudian kami ingin menggunakan fungsi untuk mengesahkan sama ada terdapat kulit kaki di permukaan ini.

• Begitu juga bukan sahaja mee daging acar kubis Kang Fu boleh dimainkan seperti ini, semua yang serupa boleh didapati di Operasi tatasusunan pada elemen tertentu boleh dipanggil menggunakan fungsi includes.

nilai pulangan hasil

• Kami biasanya bergelut dengan menamakan pembolehubah nilai pulangan apabila menulis fungsi yang mempunyai nilai pulangan, atau bahkan Untuk beberapa fungsi yang panjang , bukan tabiat yang baik untuk menggunakan pembolehubah dan bukannya terus return, kerana kita perlu menjelaskan logik sekali lagi apabila kita merujuk kepada kod ini pada masa akan datang.
• Biasanya, dalam fungsi kecil, kita boleh menggunakan result sebagai nilai pulangan.

Kembali awal

• Walau bagaimanapun, menggunakan result sebagai nilai pulangan di atas tidak terpakai untuk semua situasi Kadangkala kita perlu menamatkan badan fungsi lebih awal untuk mengelakkan Rakan Sekerja di belakang membaca prosedur yang berlebihan.

• Dalam contoh berikut, apabila selectedKey kita tidak wujud, kita harus segera return, supaya kita tidak perlu terus membaca kod berikut, jika tidak, ia akan meningkat apabila menghadapi fungsi yang lebih kompleks.

Pastikan objek itu utuh

• Selalunya apabila kita mendapat objek yang dikembalikan oleh bahagian belakang melalui permintaan Data akan diproses mengikut beberapa atribut Jika terdapat sedikit atribut yang perlu diproses, ramai pelajar akan terbiasa menggunakan kaedah pertama.
• Tetapi sebenarnya, tabiat ini adalah buruk, kerana apabila anda tidak pasti sama ada fungsi ini perlu menambah atribut pergantungan pada masa hadapan, anda harus menjaga integriti objek, seperti yang saya nyatakan dalam artikel saya yang lepas, Belajar untuk menerima perubahan Jika getDocDetail bukan sahaja menggunakan icon dan content, ia juga mungkin mempunyai atribut seperti title dan date pada masa hadapan, jadi kita juga boleh lulus. dalam objek lengkap secara langsung bukan sahaja memendekkan senarai parameter menjadikan kod lebih mudah dibaca.

Gunakan operator dengan mahir

• Apabila kita perlu mencipta pembolehubah baharu, kadangkala kita perlu menyemak untuk Apabila pembolehubah yang dirujuk oleh nilai adalah null atau tidak ditentukan, anda boleh menggunakan kaedah penulisan mudah.

Ditulis pada penghujungnya

• Pertama sekali, terima kasih semua kerana membaca ini saya akan kongsikan artikel ini di sini dan ringkaskan ia. Beberapa kaedah pengoptimuman yang sangat asas, saya harap ia dapat membantu semua orang.

[Cadangan tutorial video berkaitan: bahagian hadapan web]

Atas ialah kandungan terperinci Beberapa petua pengoptimuman JavaScript praktikal yang patut diketahui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!