Artikel ini menjelaskan 14 aturan yang harus diikuti saat menulis kode JavaScript. Bagikan untuk referensi Anda, sebagai berikut:
1. Selalu gunakan 'var'
Dalam JavaScript, variabel baik secara global atau seluruh fungsi. Menggunakan kata kunci "var" akan menjadi kunci untuk menjaga variabel tetap ringkas dan jelas. Saat mendeklarasikan variabel yang merupakan tingkat global atau fungsi, kata kunci "var" harus selalu didahului. Contoh berikut akan menekankan potensi masalah tidak melakukannya.
Masalah yang disebabkan oleh tidak menggunakan var
var i = 0; // Ini bagus - membuat tes fungsi variabel global () {untuk (i = 0; i <10; i ++) {waspada ("Hello world!");}} Test (); alert (i); // Variabel global saya sekarang 10!Karena variabel I dalam fungsi variabel tidak menggunakan var untuk menjadikannya variabel tingkat fungsi, dalam contoh ini merujuk variabel global. Selalu menggunakan VAR untuk mendeklarasikan variabel global adalah banyak praktik, tetapi sangat penting untuk menggunakan VAR untuk mendefinisikan variabel fungsi-lebar. Dua metode berikut secara fungsional sama:
Fungsi yang benar
function test () {var i = 0; for (i = 0; i <10; i ++) {alert ("Hello World!");}}Fungsi yang benar
function test () {for (var i = 0; i <10; i ++) {alert ("Hello World!");}}2. Deteksi fitur daripada deteksi browser
Beberapa kode ditulis untuk menemukan versi browser dan melakukan perilaku yang berbeda di atasnya berdasarkan pada klien yang digunakan pengguna. Ini, secara umum, adalah praktik yang sangat buruk. Pendekatan yang lebih baik adalah menggunakan deteksi fitur, deteksi pertama (browser) apakah ada fitur atau fitur ini sebelum menggunakan fitur canggih yang mungkin tidak didukung oleh browser lama, dan kemudian menggunakannya. Ini secara individual mendeteksi versi browser datang lebih baik, bahkan jika Anda mengetahui kinerjanya. Anda dapat menemukan artikel yang membahas masalah ini secara mendalam di http://www.jibbering.com/faq/faq_notes/not_browser_detect.html.
contoh:
if (document.geteLementById) {var element = document.geteLementById ('myid');} else {waspada ('browser Anda tidak memiliki kemampuan yang diperlukan untuk menjalankan skrip ini!');}3. Gunakan notasi braket persegi
Saat mengakses ditentukan dengan eksekusi atau termasuk properti objek yang tidak dapat diakses dengan "." Tanda, notasi braket persegi digunakan. Jika Anda bukan programmer JavaScript yang berpengalaman, selalu menggunakan tanda kurung persegi adalah cara yang baik untuk melakukannya
Properti suatu objek diakses oleh dua metode tetap: "." Noun dan "[]" notasi braket persegi:
"." Metode Notasi:
MyObject.property
"[]" notasi braket persegi:
MyObject ["properti"]
Gunakan "." Tanda tangan, nama atribut adalah kode keras dan tidak dapat diubah selama eksekusi. Menggunakan tanda kurung "[[]", nama atribut adalah string yang berasal dari menghitung nama atribut. String harus menjadi kode yang sulit, atau variabel, atau bahkan fungsi yang memanggil kembali nilai string. Jika nama atribut dihasilkan selama eksekusi, tanda kurung persegi diperlukan. Jika Anda memiliki properti seperti "value1", "value2", dan "value3", dan ingin menggunakan variabel i = 2 untuk mengaksesnya
Ini bisa berjalan:
MyObject ["value"+i]
Ini tidak mungkin:
MyObject.value+i
Dan di beberapa lingkungan sisi server (PHP, struts, dll.), Formulir formulir dilampirkan dengan angka [] untuk menunjukkan bahwa bentuk bentuk harus diperlakukan sebagai array di sisi server. Dengan cara ini, menggunakan "." Tanda untuk merujuk ke bidang yang berisi tanda [] tidak akan dieksekusi karena [] adalah sintaks untuk merujuk pada array JavaScript. Oleh karena itu, notasi [] diperlukan:
Ini bisa berjalan:
formref.elements ["name []"]
Ini tidak mungkin:
formref.elements.name []
Penggunaan notasi braket persegi "[]" yang disarankan berarti selalu digunakan saat membutuhkannya (jelas). Ini adalah preferensi dan kebiasaan pribadi ketika tidak sepenuhnya diperlukan untuk menggunakannya. Prinsip empiris yang baik adalah menggunakan "." Notasi untuk mengakses properti objek standar dan menggunakan notasi braket persegi "[]" untuk mengakses properti objek yang ditentukan oleh halaman. Dengan cara ini, dokumen ["getElementById"] () adalah penggunaan notasi braket persegi yang sangat layak "[]", lebih disukai secara sintaksis karena GetElementById adalah properti objek dokumen standar yang didefinisikan dalam spesifikasi DOM. Campur dua notasi ini untuk dibuat yang merupakan atribut objek standar dan nama atribut mana yang ditentukan oleh konteks membuatnya jelas dalam kode:
Document.Forms ["myFormName"]. Elemen ["MyInput"]. Nilai
Di sini, Formulir adalah properti standar dari dokumen, dan nama formulir myFormName ditentukan oleh halaman. Pada saat yang sama, elemen dan atribut nilai keduanya merupakan atribut standar yang ditentukan oleh spesifikasi. MyInput didefinisikan oleh halaman. Halaman ini adalah sintaks yang membuat orang sangat mudah dimengerti (konten kode), dan merupakan idiom yang disarankan, tetapi bukan prinsip yang ketat.
4. Hindari 'Eval'
Dalam JavaScript, fungsi eval () adalah metode untuk menjalankan kode sewenang -wenang selama eksekusi. Dalam hampir semua kasus, eval tidak boleh digunakan. Jika muncul di halaman Anda, itu berarti ada cara yang lebih baik untuk apa yang Anda lakukan. Misalnya, eval biasanya digunakan oleh programmer yang tidak tahu menggunakan notasi braket persegi.
Pada prinsipnya, "Eval is Evil (Eval is the Devil). Jangan gunakan itu kecuali Anda adalah pengembang yang berpengalaman dan tahu bahwa situasi Anda adalah pengecualian.
5. Referensi yang benar untuk membentuk dan membentuk elemen
Semua formulir HTML harus memiliki atribut nama. Untuk dokumen XHTML, atribut nama tidak diperlukan, tetapi tag formulir harus memiliki atribut ID yang sesuai dan harus direferensikan dengan Document.getElementById (). Menggunakan metode pengindeksan seperti Document.Forms [0] ke Formulir Referensi adalah praktik yang buruk di hampir semua kasus. Beberapa browser memperlakukan elemen yang disebutkan dalam dokumen menggunakan formulir sebagai atribut formulir yang tersedia. Ini tidak dapat diandalkan dan tidak boleh digunakan.
Contoh berikut menunjukkan cara mencegah referensi yang salah dari input formulir menggunakan tanda kurung persegi dan metode referensi objek yang benar:
Input formulir referensi yang benar:
Document.Forms ["FormName"]. Elemen ["InputName"]
Pendekatan Buruk:
Document.FormName.InputName
Jika Anda ingin merujuk dua elemen bentuk dalam suatu fungsi, lebih baik merujuk pada objek formulir terlebih dahulu dan menyimpannya dalam variabel. Ini menghindari pertanyaan duplikat untuk menyelesaikan referensi formulir:
var formeLements = document.Forms ["MainForm"]. Elemen; formeLements ["input1"]. value = "a"; formeLements ["input2"]. value = "b";
Ketika Anda menggunakan Onchange atau metode penanganan peristiwa serupa lainnya, pendekatan yang baik adalah untuk selalu merujuk pada elemen input itu sendiri ke dalam fungsi melalui entri. Semua elemen input membawa referensi ke formulir yang berisi:
<input type = "text" name = "address" onchange = "validate (this)">
function validate (input_obj) {// referensi formvar FORFAL YANG MENGANTINKAN elemen ini = input_obj.form; // Sekarang Anda dapat merujuk ke formulir itu sendiri tanpa menggunakan kode keras jika (TheForm.elements ["city"]. Value == "") {alert ("error");}}Dengan mengakses properti formulir dengan merujuk elemen formulir, Anda dapat menulis fungsi yang tidak berisi kode keras untuk merujuk ke formulir apa pun di halaman ini dengan nama tertentu. Ini adalah praktik yang sangat baik karena fungsinya dapat digunakan kembali.
Hindari 'dengan'
Deklarasi dengan JavaScript memasukkan objek di ujung depan ruang lingkup, sehingga referensi apa pun untuk atribut/variabel akan diselesaikan terlebih dahulu berdasarkan objek. Ini sering digunakan sebagai jalan pintas untuk menghindari referensi duplikat:
Contoh penggunaan dengan:
dengan (Document.Forms ["MainForm"]. Elements) {input1.value = "sampah"; input2.value = "junk";}Tetapi masalahnya adalah bahwa pemrogram tidak memiliki cara untuk memverifikasi bahwa input1 atau input2 sebenarnya telah diselesaikan sebagai sifat array elemen bentuk. Pertama -tama mendeteksi atribut dengan nilai -nilai nama ini, dan jika tidak dapat ditemukan, itu akan terus mendeteksi ruang lingkup ini (ke bawah). Akhirnya, ia mencoba untuk memperlakukan input1 dan input2 sebagai objek global, dan ini berakhir dengan kesalahan.
Penanganan solusi adalah membuat objek yang mengurangi referensi dan menggunakannya untuk menyelesaikan referensi ini.
Gunakan referensi:
var elemen = document.forms ["MainForm"]. Elemen; elemen.input1.value = "sampah"; elemen.input2.value = "sampah";
7. Gunakan "OnClick" di Anchor bukan "JavaScript: Pseudo-Protocol"
Jika Anda ingin memicu kode JavaScript di tag <a>, pilih OnClick alih-alih JavaScript: Pseudo-Protocol; Kode JavaScript yang berjalan menggunakan OnClick harus mengembalikan Ture atau False (atau ekspresi daripada evaluasi menjadi benar atau salah [bagaimana menerjemahkan kalimat ini? Saya mengerti seperti ini: ekspresi dengan prioritas di atas benar atau salah]) untuk mengembalikan tag itu sendiri: jika benar, href jangkar akan diperlakukan sebagai tautan umum; Jika salah, HREF akan diabaikan. Itulah mengapa "Return False;" sering dimasukkan di akhir kode yang diproses oleh OnClick.
Sintaks yang benar:
Salin kode sebagai berikut: <a href = "// www.vevb.com" onclick = "dosomething (); return false;"> go </a>
Dalam hal ini, fungsi "dosomething ()" (didefinisikan di sudut halaman) akan dipanggil saat diklik. HREF tidak akan pernah diakses oleh browser yang diaktifkan JavaScript. Dokumen javascript_required.html akan dimuat di browser di mana Anda dapat mengingatkan JavaScript yang diperlukan dan tidak diaktifkan oleh pengguna. Biasanya, ketika Anda memastikan bahwa pengguna akan mengaktifkan dukungan JavaScript, sebanyak mungkin, tautan hanya akan menyertakan href = "#". Dan pendekatan ini tidak dianjurkan. Biasanya ada pendekatan yang baik: Ini dapat menyediakan halaman yang kembali ke area lokal tanpa menggunakan JavaScript.
Terkadang, banyak orang ingin mengunjungi tautan sesuai dengan situasi. Misalnya, ketika pengguna ingin meninggalkan salah satu halaman formulir Anda dan ingin memverifikasi terlebih dahulu untuk memastikan tidak ada yang berubah. Dalam hal ini, onClick Anda akan mengakses fungsi yang mengembalikan kueri apakah tautan harus diikuti:
Akses tautan bersyarat:
<a href = "/" onClick = "return validate ();"> home </a>
function validate () {return prompt ("Apakah Anda yakin ingin keluar dari halaman ini?");}Dalam hal ini, fungsi validasi () hanya harus mengembalikan waktu atau salah. Ketika pengguna berada di Ture, pengguna akan diizinkan untuk mengeluarkan beranda, atau ketika tautan tidak diakses. Contoh ini meminta konfirmasi (perilakunya) untuk mengakses Ture atau False, yang sepenuhnya ditentukan oleh pengguna yang mengklik "nyata" atau "membatalkan".
Berikut adalah beberapa contoh "tidak boleh". Jika Anda melihat kode berikut di halaman Anda, ini salah dan perlu dimodifikasi:
Apa yang seharusnya tidak dilakukan:
<a href = "javascript: dosomething ()"> tautan </a> <a href = "// www.vevb.com/#" onclick = "dosomething ()"> tautan </a> <a href = "// www.vevb.com/#" onklick = "javascript: javascript: (); () () () () ();" javascript: "javascript:" javascript: "javasript:" href = "// www.vevb.com/#" onclick = "javascript: dosomething (); return false;"> tautan </a>
8. Gunakan operator unary '+' untuk mengubah tipe menjadi nomor
Dalam JavaScript, operator tanda "+" bertindak sebagai tanda matematika plus dan konektor. Ini dapat menyebabkan masalah ketika nilai bidang dari bentuk bentuk ditambahkan bersama -sama. Misalnya, karena JavaScript adalah bahasa tipe lemah, nilai bidang formulir akan diproses sebagai array, dan ketika Anda mengambilnya bersama, "+" akan diperlakukan sebagai konektor, bukan tanda matematika plus.
Contoh Masalah:
<Form name = "myForm" action = "[url]"> <input type = "text" name = "val1" value = "1"> <input type = "text" name = "val2" value = "2"> </form>
function total () {var theForm = document.Forms ["myForm"]; var total = theForm.elements ["val1"]. value + theForm.elements ["val2"]. value; alert (total); // Ini akan muncul "12", tapi yang Anda inginkan adalah 3!}Untuk mengatasi masalah ini, JavaScript membutuhkan prompt untuk membuatnya memproses nilai -nilai ini sebagai angka. Anda dapat menggunakan tanda "+" untuk mengubah array menjadi angka. Menyajikan variabel atau ekspresi dengan tanda "+" akan memaksanya untuk diproses sebagai angka, dan ini juga akan memungkinkan matematika "+" untuk berhasil diterapkan.
Kode yang dimodifikasi:
function total () {var theForm = document.Forms ["myForm"]; var total = (+theForm.elements ["val1"]. value)+(+theForm.elements ["val2"]. value); peringatan (total); // ini akan mengingatkan 3}9. Hindari Dokumen. Semua
Dokumen. Semua diperkenalkan oleh IE Microsoft dan bukan fitur DOM JavaScript standar. Meskipun sebagian besar browser baru mendukungnya untuk mendukung kode buruk yang tergantung padanya, (dan) ada banyak browser yang tidak mendukungnya.
Tidak ada alasan metode lain tidak berlaku, dan browser IE lama (<5.0) membutuhkan dukungan, dan dokumen. Semua digunakan dalam JavaScript sebagai tradeoff. Anda tidak perlu menggunakan dokumen. Semua untuk mendeteksi apakah itu browser IE, karena browser lain sekarang umumnya mendukungnya.
Hanya dokumen. Semua adalah pilihan terakhir:
if (document.geteLementById) {var obj = document.geteLementById ("myid");} else if (document.all) {var obj = document.all ("myid");}Beberapa prinsip untuk menggunakan dokumen. Semua:
Coba metode lain
Saat itu adalah pilihan terakhir
Ketika diperlukan untuk mendukung IE browser di bawah ini versi 5.0
Selalu gunakan "if (document.all) {}" untuk melihat apakah itu didukung.
10. Jangan gunakan komentar HTML di blok kode skrip
Di masa lalu Javascript (1995), beberapa browser seperti Netscape 1.0 tidak mendukung atau mengenali tag <script>. Jadi, ketika JavaScript pertama kali dirilis, ada teknologi yang akan mencegah kode yang sebenarnya ditampilkan pada browser yang lebih lama sebagai teks. Ada "hack" yang menggunakan komentar HTML dalam kode untuk menyembunyikan kode -kode ini.
Membuat komentar html tidak bagus:
<bahasa skrip = "javascript"> <!-// kode di sini //-> </ptript>
Saat ini, tidak ada browser yang umum digunakan mengabaikan tag <script>. Oleh karena itu, tidak perlu menyembunyikan kode sumber JavaScript lagi. Bahkan, itu juga dapat dianggap tidak membantu karena alasan berikut:
Dalam dokumentasi XHTML, kode sumber akan disembunyikan dari semua browser dan diterjemahkan ke tidak berguna (konten);
Komentar HTML tidak diperbolehkan, ini akan membatalkan operasi penurunan apa pun.
11. Hindari menggunakan namespaces global tanpa pandang bulu
Secara umum, semua variabel dan fungsi jarang diperlukan. Penggunaan global dapat menyebabkan konflik dokumen file sumber JavaScript, dan pemberhentian kode. Oleh karena itu, pendekatan yang baik adalah mengadopsi enkapsulasi fungsional dalam namespace global. Ada beberapa cara untuk menyelesaikan tugas ini, yang relatif rumit. Cara termudah adalah dengan membuat objek global dan menetapkan properti dan metode untuk objek ini:
Buat namespace:
var mylib = {}; // Objek global berisierMyLib.value = 1; mylib.increment = function () {mylib.value ++;} mylib.show = function () {waspada (mylib.value);} mylib.value = 6; mylib.increment (); mylib.show (); // Peringatan 7Namespaces juga dapat dibuat menggunakan penutupan, dan variabel anggota pribadi juga dapat disamarkan dalam JavaScript.
12. Hindari panggilan 'AJAX' yang sinkron
Saat menggunakan permintaan "AJAX", Anda memilih mode asinkron atau menggunakan mode sinkron. Ketika perilaku browser dapat terus dieksekusi, mode asinkron menempatkan permintaan di latar belakang dan mode sinkron akan menunggu sampai permintaan selesai sebelum melanjutkan.
Permintaan yang dibuat dalam mode sinkronisasi harus dihindari. Permintaan ini akan menonaktifkan browser ke pengguna sampai permintaan kembali. Setelah server sibuk dan membutuhkan waktu untuk menyelesaikan permintaan, browser pengguna (atau OS) tidak akan dapat melakukan hal lain sampai permintaan habis.
Jika Anda merasa situasi Anda memerlukan mode sinkronisasi, kemungkinan terbesar adalah Anda perlu waktu untuk memikirkan kembali desain Anda. Jarang, jika ada, permintaan AJAX dalam mode sinkron sebenarnya diperlukan.
13. Menggunakan JSON
Ketika diperlukan untuk menyimpan struktur data ke dalam teks biasa, atau mengirim/mengambil struktur data melalui AJAX, gunakan JSON alih -alih XML sebanyak mungkin. JSON (Notasi Objek JavaScript) adalah format penyimpanan data yang lebih ringkas dan efisien dan tidak bergantung pada bahasa apa pun (dan merupakan netral bahasa).
14. Gunakan tag <script> yang benar
Penggunaan properti bahasa dalam <script> tidak disukai. Cara yang sesuai adalah dengan membuat blok kode JavaScript berikut:
<script type = "text/javaScript"> // kode di sini </script>
PS: Kode di atas belum diformat, dan kode yang diformat biasanya akan lebih mudah dibaca dan dipahami. Berikut adalah beberapa alat format dan kompresi online untuk Anda gunakan dalam pengembangan di masa depan:
Alat Keindahan dan Pemformatan Kode JavaScript Online:
http://tools.vevb.com/code/js
Kode JavaScript Keindahan/Kompresi/Format/Alat Enkripsi:
http://tools.vevb.com/code/jscompress
JSMIN ONLINE JS Compression Tool:
http://tools.vevb.com/code/jsmincompress
JSON Code Online Formatting/Keindahan/Kompresi/Pengeditan/Konversi Alat:
http://tools.vevb.com/code/jsoncodeformat
Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Ringkasan Data Javascript dan Ringkasan Data Javascript "," Ringkasan Data JavaScript "," Ringkasan Data JavaScript "," Ringkasan DEBUGRITM PENGABUNG DAN RINGKASI DAGGING "RINGKASI DAN RINGKASAN DATRICKS" RINGKASI DAN RINGKASI DAGGING "RINGKASI DAN RINGKASI DAGGING" RINGKAS Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.