Konvensi penamaan Javascript


12

Saya dari latar belakang Java dan saya baru mengenal JavaScript. Saya telah memperhatikan banyak metode JavaScript menggunakan nama parameter karakter tunggal, seperti dalam contoh berikut.

doSomething(a,b,c)

Saya tidak suka, tetapi sesama pengembang JavaScript meyakinkan saya bahwa ini dilakukan untuk mengurangi ukuran file, mencatat bahwa file JavaScript harus ditransfer ke browser.

Kemudian saya menemukan diri saya berbicara dengan pengembang lain. Dia menunjukkan kepada saya cara Firefox akan memotong nama variabel untuk memuat halaman lebih cepat. Apakah ini praktik standar untuk browser web?

Apa konversi penamaan praktik terbaik yang harus diikuti saat memprogram dalam JavaScript? Apakah panjang pengidentifikasi penting, dan jika demikian, sampai sejauh mana?


13
Saya sangat ragu browser mengubah nama variabel. Di hadapannya eval, itu tidak aman (yeah, evalmengerikan, tapi itu bagian dari standar dan Anda tidak membuang kompilasi standar untuk optimasi) dan itu tidak membantu sedikit pun dalam mengurangi lalu lintas - Anda masih akan kirim file lengkap.

4
Saya sering melihat pengembang berdebat tentang kelebihan nama variabel pendek. Jangan dengarkan mereka. Ini hampir selalu merupakan alasan untuk "Saya terlalu jempol untuk menciptakan nama baik" atau "Saya terlalu malas untuk mengetik banyak karakter".
Doc Brown

@DocBrown: Bahkan aku tidak menyukainya. Karena saya bukan ahli dalam JavaScript ingin tahu praktik terbaik.
ManuPK

Pada akhir hari berbicara tentang mungkin data tambahan senilai 50-100KB untuk menggunakan nama metode yang bermakna? Jika 100KB menyebabkan masalah kecepatan, itu tidak layak dicoba untuk dipecahkan, karena sekelompok pengguna yang tidak cukup besar akan mengalami masalah itu.
Ramhound

Jawaban:


26

Anda akan menemukan bahwa pengembang itu sendiri tidak menggunakan nama variabel pendek. Saat berkembang, mereka menggunakan nama variabel yang bermakna dan terperinci.

Kemudian , dalam proses build / release, kode yang mereka tulis dijalankan melalui minifier / obfuscator dengan tujuan meminimalkan ukuran file, sebagai praktik terbaik untuk mempercepat situs web. Ini adalah opsional langkah jika Anda peduli bahwa banyak tentang kinerja. Sebagian besar situs web kecil tidak melakukan ini.

Anda , sebagai pengembang, tidak perlu peduli dengan proses minifikasi / kebingungan; tulis kode Anda sehingga dapat dibaca, bermakna, didokumentasikan dengan baik dan terstruktur dengan baik. Kemudian jika Anda sangat peduli dengan kinerja (opsional, jangan lupa!), Perkenalkan minifier / obfuscator ke dalam proses rilis Anda untuk memperkecil kode (hapus spasi, baris baru, komentar, dll.) Dan untuk mengaburkannya (mis., Persingkat variabel) nama). Artikel bagus yang menjelaskan kebingungan vs minifikasi dapat ditemukan di sini .

Selain itu, Desktop FireFox tidak akan memotong periode nama variabel . Pemotongan nama variabel ada untuk mempercepat pengunduhan halaman. Pada saat FireFox mendapatkan file, itu sudah diunduh sehingga tidak perlu melakukannya. Teman Anda dapat menjalankan plugin yang melakukan ini; dalam hal ini, katakan padanya untuk menghapusnya, karena itu tidak berguna.

Untuk penyelesaian, beberapa peramban (seluler) memiliki opsi untuk menggunakan server perantara, yang mencegat respons sumber daya yang Anda minta, dan mengompresnya untuk Anda (yang dapat mencakup minifikasi file JavaScript). Perhatikan bahwa kompresi dilakukan di server (yaitu sebelum Anda mengunduh halaman), maka manfaat potensial mengunduh file yang lebih kecil, daripada di browser setelah Anda mengunduh file (seperti yang disarankan dalam pertanyaan). Browser seluler tersebut termasuk Opera Mini, dan versi Google Chrome yang lebih baru (setidaknya di iOS; tidak yakin tentang Android). Untuk info lebih lanjut, lihat di sini .


11

Tidak, tidak semua browser akan secara otomatis mempersingkat JavaScript untuk membantu kinerja.

Namun, dalam kasus JavaScript, Anda tidak boleh mengorbankan pembacaan kode / pemeliharaan untuk mendapatkan kecepatan pemrosesan atau keamanan karena ada alat yang disebut obfuscators dan alat lain yang disebut shinkers (atau kompresor) yang dirancang untuk tujuan ini.

Ingat, jangan pra-optimalkan. Jika halaman Anda memuat cukup cepat, dan Anda tidak memiliki konten yang terlalu sensitif dalam JavaScript Anda, jangan khawatir tentang hal itu. Beri nama variabel Anda dengan nama yang bermakna. Keterbacaan kode sangat penting untuk pemeliharaan dan harus jarang, jika pernah, dikorbankan.

Jika Anda ingin referensi ke beberapa konvensi pengkodean JavaScript yang baik, saya sarankan menggunakan ini .



1

Saya bekerja di JavaScript untuk waktu yang sangat lama.

Kami memiliki standar penamaan yang mengharuskan Anda menggunakan Notasi Hongaria untuk semua variabel.

Tampaknya berhasil OK. Saya tahu bahwa ada beberapa kasus yang menentang penggunaan itu, tetapi itu berhasil dengan baik bagi kami. Terutama ketika Anda memiliki file JavaScript besar di mana Anda perlu menemukan barang-barang.

Saya akan memperingatkan agar tidak mengoptimalkan secara prematur. Anda sangat mungkin berakhir dengan kode berantakan yang tidak benar-benar berjalan lebih cepat.


5
Notasi Hongaria? Itu sekolah tua. Notasi Hongaria adalah relique pengembangan lama dan pada waktunya tidak direkomendasikan lagi.
Smokefoot

2
Saya cenderung menggunakannya sedikit, tetapi hanya untuk nilai-nilai yang dibungkus oleh jquery, yang akan saya mulai dengan $. Masalah dengan notasi Hungaria adalah bahwa orang-orang biasa memberi tahu Anda mengetikkan istilah "int" vs "String" dan bukan dalam hal semik program
Zachary K

"Terutama ketika Anda memiliki file JavaScript besar di mana Anda perlu menemukan barang-barang." -- Aku mendengarmu. Tetapi notasi Hungaria hanya plester yang menempel ... itu tidak akan membantu dalam jangka panjang, itu hanya akan membingungkan ketika Anda perlu mengubah jenis sesuatu tetapi tidak punya waktu untuk mengubah semua awalan variabel. Mengotomatiskan semua itu adalah tempat GWT masuk ke IMO-nya sendiri.
funkybro

1
Saya tidak perlu membeli menggunakan notasi sebagai "melanggar" aspek bahasa yang diketik secara longgar. Tentu, Anda harus mengubah nama ketika Anda mengubah jenisnya, tetapi itu akan menjadi hal yang baik untuk dilakukan sehingga Anda dapat melacak apa yang Anda lakukan. Saya tahu ada beberapa aspek yang jelek. Tetapi, jika Anda pernah bekerja dalam proyek BESAR (Saya berbicara ratusan ribu baris kode) dalam bahasa yang diketik secara longgar, ini dapat membantu Anda menemukan jalan Anda lebih cepat dalam kasus tertentu. Mengatakan itu tanggal, dll benar-benar tidak membahas masalah inti yang OP coba sembunyikan.
Alan Delimon

1
Notasi Hungaria adalah salah satu hal yang orang-orang segera abaikan tanpa benar-benar mengerti mengapa. Itu menemukan jalan itu ke dalam kategori yang sama seperti gotodi mana orang-orang tanpa berpikir mengulangi mantra 'Dont penggunaan goto ... tidak menggunakan goto ...' . Kenyataannya adalah itu hanya alat di toolkit Anda. Seperti alat apa pun ia memiliki situasi di mana itu berguna dan situasi di mana itu tidak begitu berguna (atau bahkan berbahaya). Ini seperti seseorang yang memiliki pengalaman buruk mencoba melihat sepotong kayu dengan palu, dan kemudian menyatakan 'jangan pernah menggunakan palu, gergaji lebih baik!' . Generalisasi menyeluruh selalu salah
MattDavey

1

Panjang pengenal tidak masalah. Seperti yang dikatakan oleh orang lain, dalam Minification produksi dapat digunakan untuk mengurangi waktu pengunduhan skrip. Bahkan, konvensi pengkodean / penamaan yang dapat diterima harus dipatuhi, terutama karena JavaScript adalah bahasa yang unik dan JavaScript telah lama diabaikan sebagai hal untuk menyelesaikan pekerjaan. Jika Anda mencari tempat untuk konvensi penamaan, Panduan Gaya JavaScript Google adalah tempat yang bagus. Itu menunjukkan,

  • functionNamesLikeThis, misalnya, getCashbackData () {}
  • variableNamesLikeThis, misalnya, var alertInterval = 10;
  • ClassNamesLikeThis, mis., V CustomerOrder = {getOrderLines: function () {}}
  • EnumNamesLikeThis, misalnya, var ColorOfChoice = {White: "#FFFFFF"}
  • methodNamesLikeThis, misalnya, v CustomerOrder = {getOrderLine: function () {}}
  • SYMBOLIC_CONSTANTS_LIKE_THIS, misalnya, var EPOCH_UNIX = "01011970"

Apakah Anda memiliki sesuatu untuk ditambahkan daripada banyak tautan? Maksudku, kau bahkan tidak menjelaskan siapa Douglas Crockford.
Ramhound

0

Marah oleh filosofi "pengembang kode bersih" (dan sekarang Anda tahu dari posting di atas bahwa dengan mengecilkan ukuran nama variabel Anda tidak akan berdampak pada kinerja) saya hanya bisa memberi saran:

  1. Temukan IDE terbaik untuk kebutuhan pengembangan pribadi Anda yang memiliki fitur pelengkapan otomatis dan intellisense yang layak, seperti aptana, netbeans, gerhana (semuanya gratis) atau salah satu dari banyak produk komersial (jika saya memiliki permainan gratis, saya akan lihat produk JetBrains)
  2. Tulis kode Anda dengan cara yang membuat komentar tidak berguna. Itu artinya, alih-alih menulis

    getXy(e) { return [e.pageX, e.pageY ] }

    yang bisa berarti apa saja (terutama dalam bahasa yang diketik longgar seperti js;) Anda membuat kode mengekspresikan dirinya sendiri

    getPageCoordinatesFromEvent(event) { 
        return [event.pageX, event.pageY ];
    }
    

    Dalam IDE yang bagus, Anda biasanya tidak akan pernah mengetik nama variabel apa pun yang lama dua kali - detik saat Anda mengetik beberapa huruf dan cukup tekan enter dari pelengkapan otomatis. Jika Anda bersikeras mengetik setiap karakter sendiri, IDE yang baik tetap akan melihat Anda salah ketik. Ini hanyalah contoh yang sangat dangkal, oleh karena itu saya sangat menyarankan (bukan sebagai bentuk kritik tetapi sebagai rekomendasi jujur) bahwa Anda

  3. Dapatkan buku "Kode Bersih" oleh Robert C.Martin dan atau "Pragmatic Programmer" oleh Hunt / Thomas dan jangan pernah bertanya pada diri sendiri pertanyaan seperti ini lagi - Anda akan terlalu sibuk bekerja pada server integrasi berkelanjutan untuk mengotomatiskan tes membosankan -, & buat bagian-bagian dari proses pengembangan (termasuk minifying) dan berkonsentrasilah pada bagian yang menyenangkan, menulis kode yang jelas dapat dimengerti yang menghasilkan hal-hal hebat!

NB. Jika Anda perlu meningkatkan dengan mengembangkan kode javascript canggih, lihatlah John "Mr. jQuery" Buku resig tentang "Teknik Javascript Pro" tepat setelah atau bersamaan dengan yang di atas.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.