Apakah konvensi penamaan nama file javascript? [Tutup]

283

Haruskah file diberi nama sesuatu-dengan-hyphens.js, camelCased.js, atau yang lainnya?

Saya tidak menemukan jawaban untuk pertanyaan ini di sini .

javascript naming-conventions ripper234
sumber
2
Konvensi penamaan yang baik adalah memberi nama file karena Anda akan melihat entitas itu dalam kode. The MyPluginkelas akan pergi di MyPlugin.js. The MenuItemBereaksi komponen akan masuk MenuItem.js. Pengembang lainnya akan membutuhkan / mengimpor 'modul-Anda-keren' dan menggunakan beberapa simbol dari sana, jadi beri nama cool-module.js. -
Dan Dascalescu
1
Posting ini tidak berdasarkan opsi. Padahal itu penting. Di sini Anda memiliki panduan yang dibuat oleh Google - google.github.io/styleguide/jsguide.html#file-name . (Panduan Gaya Google JavaScript)
zwitterion

Jawaban:

184

Satu kemungkinan konvensi penamaan adalah menggunakan sesuatu yang mirip dengan skema penamaan yang digunakan jQuery. Ini tidak diadopsi secara universal tetapi cukup umum.

product-name.plugin-ver.sion.filetype.js

di mana pasangan product-name+ pluginjuga bisa mewakili namespace dan modul . Opsi versiondan filetypebiasanya opsional.

filetypebisa menjadi sesuatu yang relatif terhadap bagaimana konten file tersebut. Yang sering terlihat adalah:

  • min untuk file yang diperkecil
  • custom untuk file yang dibuat khusus atau yang dimodifikasi

Contoh:

  • jquery-1.4.2.min.js
  • jquery.plugin-0.1.js
  • myapp.invoice.js
Bryan Menard
sumber
31
Saya setuju dengan apa yang Anda katakan. Tapi ada satu hal yang sedang saya perjuangkan: bagaimana jika 'plugin' berisi dua kata? Pisahkan mereka dengan titik-titik? jquery.myPlugin-1.0.0.js atau jquery.my.plugin-1.0.0.js atau jquery.my_plugin-1.0.0.js atau jquery.myplugin-1.0.0.js atau bahkan mungkin jquery.my-plugin- 1.0.0.js? Mungkin Anda bisa melengkapi contoh Anda dengan itu, terima kasih!
mayrs
4
Bagaimana dengan modul AMD ? Jika Anda menggunakan versi dalam nama file, Anda harus mengubah banyak file jika nomor versi berubah.
Knut
3
@ junior, ini adalah pos lama, tetapi pencarian dengan cepat menunjukkan bahwa plugin jquery tidak mengikuti konvensi tertentu. Tampaknya (1) menyatukan kata-kata, (2) menggunakan case-spine, dan (3) menggunakan camelCase semuanya digunakan dengan frekuensi yang kira-kira setara.
bholben
Tidak lupa bahwa beberapa versi dan sistem file memiliki masalah untuk mengenali perbedaan antara sebuah kata dalam huruf kecil dan kata yang sama di atas atau camelCase (mis: "ThisWord" sama dengan "thisword" di beberapa lingkungan). Sesuatu yang perlu diingat saat menggunakan konvensi camelCase.
amypellegrini
@Tetapi Anda tidak seharusnya memuat melalui nama versi, tetapi memetakan nama modul ke file versi tertentu.
dalore
132

Saya tidak mengetahui adanya konvensi khusus untuk file javascript karena mereka tidak benar-benar unik di web dibandingkan file css atau file html atau jenis file lain seperti itu. Ada beberapa hal "aman" yang dapat Anda lakukan yang membuatnya kecil kemungkinan Anda secara tidak sengaja akan mengalami masalah lintas platform:

  1. Gunakan semua nama file huruf kecil. Ada beberapa sistem operasi yang tidak peka huruf besar-kecil untuk nama file dan menggunakan semua huruf kecil mencegah secara tidak sengaja menggunakan dua file yang berbeda hanya dalam kasus yang mungkin tidak bekerja pada beberapa sistem operasi.
  2. Jangan gunakan spasi di nama file. Sementara ini secara teknis dapat dibuat untuk bekerja, ada banyak alasan mengapa ruang dalam nama file dapat menyebabkan masalah.
  3. Tanda hubung OK untuk pemisah kata. Jika Anda ingin menggunakan semacam pemisah untuk beberapa kata, bukan spasi atau camelcase seperti dalam various-scripts.js, tanda hubung adalah pemisah yang aman dan berguna dan umum digunakan.
  4. Pikirkan tentang menggunakan nomor versi dalam nama file Anda. Saat Anda ingin memutakhirkan skrip Anda, rencanakan efek browser atau caching CDN. Cara paling sederhana untuk menggunakan caching jangka panjang (untuk kecepatan dan efisiensi), tetapi pemutakhiran segera dan aman ketika Anda memutakhirkan file JS adalah dengan memasukkan nomor versi dalam nama file atau jalur yang digunakan (seperti yang dilakukan jQuery dengan jquery-1.6.2.js ) dan kemudian Anda menabrak / mengubah nomor versi itu setiap kali Anda meningkatkan / mengubah file. Ini akan menjamin bahwa tidak ada halaman yang meminta versi yang lebih baru yang pernah melayani versi yang lebih lama dari cache.
pacar00
sumber
56

Tidak ada yang resmi, universal konvensi , untuk penamaan file JavaScript.

Ada beberapa pilihan:

  • scriptName.js
  • script-name.js
  • script_name.js

semua konvensi penamaan yang valid, namun saya lebih suka konvensi penamaan yang disarankan jQuery (untuk plugin jQuery, meskipun ia berfungsi untuk JS apa pun)

  • jquery.pluginname.js

Keindahan dari konvensi penamaan ini adalah ia secara eksplisit menggambarkan polusi namespace global yang ditambahkan.

  • foo.js menambahkan window.foo
  • foo.bar.js menambahkan window.foo.bar

Karena saya meninggalkan versi: itu harus datang setelah nama lengkap, sebaiknya dipisahkan oleh tanda hubung, dengan periode antara versi utama dan kecil:

  • foo-1.2.1.js
  • foo-1.2.2.js
  • ...
  • foo-2.1.24.js
zzzzBov
sumber
10
+1 untuk The beauty to this naming convention is that it explicitly describes the global namespace pollution being added., tidak pernah memperhatikan bahwa
Adrien Be
2
Satu-satunya pertanyaan saya adalah apa yang harus dilakukan jika Anda memiliki file yang membuat Fooatau myFoo, apakah Anda cukup memberi nama file Foo.jsatau myFoo.jsmasing - masing?
titik koma
14

Pertanyaan di tautan yang Anda berikan bicara tentang penamaan variabel JavaScript, bukan tentang penamaan file, jadi lupakan itu untuk konteks tempat Anda mengajukan pertanyaan.

Untuk mengajukan penamaan, ini murni masalah preferensi dan selera. Saya lebih suka memberi nama file dengan tanda hubung karena saya tidak perlu meraih tombol shift, seperti yang saya lakukan ketika berhadapan dengan nama file camelCase; dan karena saya tidak perlu khawatir tentang perbedaan antara nama file Windows dan Linux (nama file Windows tidak peka huruf besar-kecil, setidaknya melalui XP).

Jadi jawabannya, seperti banyak orang, adalah "tergantung" atau "terserah Anda."

Satu aturan yang harus Anda ikuti adalah konsisten dalam konvensi yang Anda pilih.

Pete Wilson
sumber
6
+1 untuk alasan tanda hubung vs. camelCase.
cellepo
6

Saya biasanya lebih suka tanda hubung dengan huruf kecil, tetapi satu hal yang belum disebutkan adalah bahwa kadang-kadang senang memiliki nama file yang sama persis dengan nama modul tunggal atau fungsi instantiable yang terkandung di dalamnya.

Sebagai contoh, saya memiliki modul pengungkapan yang dideklarasikan dengan var knockoutUtilityModule = function() {...}file sendiri bernama knockoutUtilityModule.js, meskipun secara obyektif saya lebih suka knockout-utility-module.js.

Demikian pula, karena saya menggunakan mekanisme bundling untuk menggabungkan skrip, saya telah mengambil definisi fungsi instantiable (model tampilan templated dll) masing-masing dalam file mereka sendiri, gaya C #, untuk pemeliharaan. Sebagai contoh, ProductDescriptorViewModel hidup dengan sendirinya di dalam ProductDescriptorViewModel.js (saya menggunakan huruf besar untuk fungsi instantiable).

Tom W Hall
sumber