Bagaimana mengatur kode javascript

Salah satu hal yang paling banyak saya tanyakan dari siswa saya adalah tentang apa "cara terbaik" untuk menyusun kode

Yang benar adalah, tidak ada cara terbaik. Tetapi saya memiliki serangkaian konvensi dan pedoman kasar yang saya ikuti. Hari ini, saya pikir saya akan membaginya dengan Anda

Mari kita menggali lebih dalam

Pola JavaScript yang saya gunakan

Saya memiliki sedikit pola JavaScript yang saya gunakan, tergantung pada kebutuhan proyek

• Untuk perpustakaan, saya biasanya menggunakan pola Konstruktor
• Untuk skrip sederhana pada proyek pribadi, saya biasanya menggunakan fungsi kecil sebagai pembungkus. Saya biasanya ingin memintanya secara eksplisit daripada menggunakan Ekspresi Fungsi yang Segera Dipanggil (atau IIFE)

Saya dulu lebih sering menggunakan pola modul pengungkapan, tetapi belakangan ini, saya cenderung menggunakan modul ES sebagai gantinya (lebih lanjut tentang itu sebentar lagi)

Build tools yang saya gunakan

Saya dulu menggunakan Gulp. js, dan CodeKit sebelumnya

Sekarang, saya penggemar berat menjalankan skrip NPM secara langsung. Ini memberi saya lebih banyak kontrol daripada CodeKit, tetapi kumpulan dependensi yang jauh lebih kecil (dan lebih sedikit hal yang selalu rusak) daripada Gulp

Setiap proyek saya sekarang menggunakan Build Tool Boilerplate saya

Pengaturan ini memungkinkan saya dengan mudah mengeluarkan barang yang tidak saya perlukan, dan menyesuaikan barang yang saya lakukan melalui objek konfigurasi. Ini termasuk menggulung. js untuk JavaScript, Sass untuk CSS, dan beberapa alat pengoptimalan gambar dan SVG

Saya tidak menggunakan webpack, karena membingungkan dan rumit. Saya juga tidak menggunakan TypeScript, karena ini adalah lapisan dependensi tambahan, dan menyelesaikan masalah yang tidak saya miliki secara pribadi

Bagaimana saya mengatur kode di dalam file

Saya cenderung mempertahankan struktur khusus untuk file saya…

• Variabel di bagian atas halaman
• Fungsi dan metode di tengah
• Inisialisasi dan pendengar acara di bagian akhir

Ini membuatnya sangat mudah bagi saya untuk membuka file tertentu dan memiliki gambaran kasar tentang cara mengaturnya dan cara menemukan apa yang saya cari dengan relatif mudah

// 
// Variables
// 

let name = 'Merlin';
let spells = {
	teapots: 'Dancing teapots', 
	fish: 'Turn into a fish'
};


//
// Methods
// 

/**
 * Cast the spell
 * @param  {String} spell The spell to cast
 */
function castSpell (spell) {
	alert(spell);
}


// 
// Inits & Event Listeners
// 

document.addEventListener('click', function (event) {
	castSpell(spells.fish);
});

Saya menggunakan JSDoc untuk mendokumentasikan kode saya. Beberapa editor teks akan menggunakan ini untuk mengeluarkan informasi tentang fungsi saat digunakan di tempat lain dalam kode Anda, yang cukup bagus

Saya mempertahankan struktur serupa di dalam fungsi juga

Bagaimana saya memodulasi dan mengatur file

Saya penggemar berat modul ES. Mereka membantu saya menjaga kode saya lebih terstruktur dan teratur

Tapi saya juga melihat orang terlalu modular untuk keinginan saya, membuat pohon file yang sangat bersarang dengan setiap fungsi dalam file kecilnya sendiri. Ini menciptakan, menurut pendapat saya, jenis tantangan organisasi yang berbeda (bahwa saya bersalah atas diri saya sendiri)

Untuk menghindari hal ini, saya cenderung memulai semua proyek saya sebagai satu file JavaScript

Pada titik tertentu, mungkin mulai terasa terlalu besar. Saya melakukan banyak pengguliran ke atas dan ke bawah, atau saya membuka file untuk kedua kalinya di tab lain untuk mereferensikan bagian yang berbeda dengan mudah

Itu biasanya pertanda saya bahwa sudah waktunya untuk memecahkan sedikit

• Untuk perpustakaan JavaScript, saya mengatur fungsi dan file saya berdasarkan apa yang mereka lakukan. event-listeners.js, dom.js, constructor.js, dan seterusnya
• Untuk situs web dan aplikasi, saya cenderung menyimpan setiap pustaka atau bagian fungsi yang berbeda dalam filenya sendiri, dan import ke dalam file khusus untuk halaman yang diperlukan. search.js, table-of-contents.js, dan seterusnya

Saya menyimpan semua file build saya di direktori src, dan mengkompilasinya dengan rollup. js dan Build Tools Boilerplate saya ke direktori dist

Apa yang saya lewatkan?

Itu gambaran kasar tentang cara saya bekerja, tetapi saya yakin saya melewatkan beberapa detail

Adakah yang Anda ingin saya gali lebih lanjut tentang pengaturan pekerjaan saya yang tidak saya bahas dalam artikel ini?

Bagaimana menyusun proyek JavaScript saya?

Apa cara yang tepat untuk mengatur kode Anda?

Bagaimana cara mengatur banyak file js?

Bagaimana struktur JavaScript?