5 Tips Mengatur Kode Javascript Anda Tanpa Framework – Bingkai alami JavaScript yang tidak terstruktur memungkinkan untuk menggunakannya dalam berbagai cara. Namun, cara-cara ini biasanya berakhir sangat tidak terbaca. Sangat mudah untuk jatuh ke dalam perangkap kode JavaScript yang kusut dan tidak terorganisir terutama jika Anda adalah pengembang baru. Lagi pula, ketika Anda berada di bawah tekanan untuk menyelesaikan pekerjaan dan memenuhi tenggat waktu Anda, wajar untuk mengabaikan pentingnya ujung depan dan hanya fokus pada “bagian penting dari aplikasi”.
5 Tips Mengatur Kode Javascript Anda Tanpa Framework
javascriptoo – Yang benar adalah, JavaScript yang tidak terorganisir dapat berakhir mewakili sebagian besar produk jadi dan, sebelum Anda menyadarinya, Anda dapat memiliki kekacauan besar di tangan Anda untuk dipelihara atau, lebih buruk lagi, orang lain untuk dipelihara.
Praktik Terbaik Struktur File JavaScript
JavaScript adalah salah satu bahasa paling fleksibel di luar sana, dan dengan fleksibilitas ada ruang untuk melakukan hal-hal dengan cara yang salah. Framework, seperti Angular dan React, dapat membantu mengatur struktur kode javascript Anda (atau TypeScript yang dikompilasi ke JavaScript dalam kasus Angular). Sayangnya, kerangka kerja tidak selalu dapat digunakan dalam struktur folder Anda.
Mungkin bisnis ingin menjauh dari kerangka kerja JavaScript, atau mungkin itu hanya berlebihan. Meskipun kerangka kerja adalah ide yang bagus dalam teori, mereka datang dengan tingkat overhead yang dapat memperkenalkan kompleksitas mereka sendiri.
Jadi, bagaimana Anda mengatur kode saat menulis aplikasi dengan kerangka kerja? Caranya adalah menjelajahi dunia JavaScript ES6 dan organisasi kode dasar. Mari kita lihat lebih dekat 5 cara mengatur JavaScript Anda dengan benar.
1. Komentari Kode Anda
Saat menulis fungsi, kelas, model, konstanta, atau apa pun yang baru, tinggalkan komentar untuk membantu siapa pun yang mengerjakannya. Perhatikan bahwa gaya komentar ini memberi Anda tooltip yang bagus di IDE seperti VS Code.
Ada keuntungan tambahan bahwa jika Anda menggunakan komentar gaya JSDoc, Anda akan mendapatkan dokumentasi yang lengkap dan tampak hebat secara gratis!
Baca Juga : Panduan Tentang Tipe Data JavaScript Lengkap
2. Gunakan Kelas ES6
ES6 telah menghadirkan banyak fitur ke JavaScript, jadi manfaatkanlah! Salah satu fitur ini adalah kelas, yang mungkin merupakan cara terbaik untuk mengatur logika bisnis Anda.
Seperti yang Anda lihat pada tangkapan layar di atas, Anda dapat menyusun model Anda dengan cara yang sangat mudah dan sederhana untuk dibaca dan juga dapat diperpanjang. Perpanjangan sangat besar! Ini berarti Anda dapat memiliki kelas yang mewarisi properti dan fungsi tertentu dari kelas dasar. Seperti yang Anda lihat, kelas PropertyAddress sebenarnya diperluas dari kelas Address. Ini akan membantu Anda mempertahankan prinsip besar itu KERING (Jangan Ulangi Diri Sendiri).
3. Gunakan Janji dalam Struktur Data Javascript Anda
Sebagai pengembang junior, sangat mudah untuk terbiasa meneruskan fungsi panggilan balik ke fungsi lain. Misalnya, Anda ingin mengambil daftar karyawan dari API. Nah, Anda bisa memanggilnya, dan meneruskan fungsi panggilan balik.
Ini, dengan sendirinya, mungkin terlihat tidak berbahaya, tetapi apa yang terjadi jika Anda perlu menelepon lagi setelah karyawan selesai? Jika Anda menggunakan fungsi callback, akan terlihat seperti ini:
Alih-alih, manfaatkan apa yang ada di toolkit Anda, Promises. Ini akan memungkinkan Anda untuk menyambungkan fungsi panggilan balik dengan cara yang terorganisir dan mudah dibaca. Ini juga memungkinkan Anda untuk memisahkan panggilan balik dari fungsi sepenuhnya, yang berarti metode daftar tidak perlu lagi khawatir jika ada fungsi panggilan balik atau tidak!
4. Pisahkan Hal-hal
Saat menulis JavaScript yang khusus untuk “modul” yang berpotensi digunakan kembali, masukkan ke dalam file JavaScript-nya sendiri. Selain itu, jika Anda menulis JavaScript dengan tujuan menjalankan beberapa fungsi yang khusus untuk halaman tersebut, maka letakkan JavaScript di filenya sendiri yang disertakan di halaman tersebut. Katakanlah Anda membuat halaman daftar karyawan, maka Anda bisa berakhir dengan dua file: employee.js, dan index.js.
File employee.js berisi semua logika berbasis model yang berkaitan dengan karyawan yang tidak khusus untuk halaman. File index.js mencakup hal-hal yang khusus untuk halaman itu. Ini bisa berupa mempertahankan daftar karyawan atau apa yang terjadi saat Anda mengklik seorang karyawan.
5. Gunakan Konstanta dan Enum
Jika Anda mendapati diri Anda menulis string hardcoded yang sama berulang kali, Anda harus membuat konstanta untuk itu. Konstanta adalah cara yang bagus untuk mengatur segala sesuatunya dan mudah diubah nanti.
Jika Anda mendapati diri Anda memiliki sekelompok logika yang semuanya berhubungan, seperti tipe, enum bisa sangat berguna untuk itu. Meskipun JavaScript tidak benar-benar memiliki “enum”, Anda dapat membuat objek dan menganotasinya menggunakan sesuatu seperti JSDoc untuk membantu menyimpan semuanya di satu tempat dan mudah terlihat.
Kesimpulan
Mengabaikan pentingnya mengatur JavaScript Anda dapat dengan mudah menyebabkan pemborosan waktu yang sangat besar bagi pengembang lain di kemudian hari. Menulis kode yang kusut, sulit dibaca, dan tidak dapat dipelihara adalah salah satu masalah terburuk yang dapat Anda alami sendiri atau pengembang lain. Ini adalah masalah nyata terutama di perusahaan kecil yang tidak memiliki proses nyata atau pengembang senior mana pun untuk memimpin tuntutan.
Kabar baiknya adalah masalah ini dapat diselesaikan dengan pendekatan yang tepat! Sebaiknya luangkan waktu ekstra untuk mempelajari apa yang Anda tulis dan biarkan kode Anda dalam kondisi yang lebih baik daripada saat Anda menemukannya.
