1. Polusi Namespace Global
Selalu bungkus kode dalam ekspresi fungsi langsung untuk membentuk modul independen.
Tidak direkomendasikan
var x = 10, y = 100; console.log (window.x + '' + window.y);
menyarankan
; (function (window) {'gunakan ketat'; var x = 10, y = 100; console.log (window.x + '' + window.y);} (window));2. Jalankan fungsi segera
Dalam fungsi eksekusi langsung, jika variabel global digunakan, badan fungsi yang mengeksekusi fungsi segera dapat dipanggil dalam bentuk variabel lokal ketika dipanggil, yang meningkatkan kinerja program sampai batas tertentu.
Dan Anda harus menambahkan undefined ke parameter formal fungsi segera, pada posisi terakhir, karena undefined dalam ES3 dapat dibaca dan ditulis. Jika nilai yang undefined diubah dalam posisi global, kode Anda mungkin tidak mendapatkan hasil yang terlambat.
Selain itu, disarankan untuk menambahkan titik koma di awal dan akhir fungsi segera untuk menghindari mempengaruhi kode kita sendiri karena kode orang lain yang tidak teratur selama penggabungan.
Tidak direkomendasikan
(function () {'gunakan strict'; var x = 10, y = 100, c, elem = $ ('body'); console.log (window.x + '' + window.y); $ (dokumen) .on ('klik', function () {}); if (typeOf c === 'tidak didefinisikan') {// kode Anda}} (if typeOf c ===menyarankan
; (function ($, window, dokumen, tidak terdefinisi) {'Gunakan ketat'; var x = 10, y = 100, c, elem = $ ('body'); console.log (window.x + ' + window.y); $ (dokumen) .on (' klik ', fungsi () {}); if (typeOf c ===', 'klik', function () {{}); if (typeof c === ',' click ', function () {{}); ife (typeOf c ===', 'click', function () {{{});3. Mode ketat
Ecmascript 5 Mode ketat dapat diaktifkan di seluruh skrip atau dalam satu metode. Ini sesuai dengan konteks JavaScript yang berbeda dan akan melakukan pemeriksaan kesalahan yang lebih ketat. Mode ketat juga memastikan bahwa kode JavaScript lebih kuat dan berjalan lebih cepat.
Mode ketat mencegah penggunaan kata kunci yang dipesan yang kemungkinan akan diperkenalkan di masa depan.
Anda harus mengaktifkan mode ketat dalam skrip Anda, lebih disukai menerapkannya dalam fungsi eksekusi langsung mandiri. Hindari menggunakannya pada baris pertama skrip Anda yang menyebabkan semua skrip Anda memulai mode ketat, yang dapat menyebabkan masalah dengan beberapa perpustakaan pihak ketiga.
Tidak direkomendasikan
'Gunakan ketat'; (function () {} ());menyarankan
(function () {'gunakan ketat';} ());Iv. Deklarasi Variabel
Untuk semua deklarasi variabel, kita harus menentukan var . Jika var tidak ditentukan, kesalahan akan dilaporkan dalam mode ketat, dan variabel dalam ruang lingkup yang sama harus dinyatakan dengan satu var sebanyak mungkin, dan beberapa variabel harus dipisahkan oleh ",".
Tidak direkomendasikan
fungsi myfun () {x = 5; y = 10;}Tidak sepenuhnya direkomendasikan
fungsi myfun () {var x = 5; var y = 10;}menyarankan
fungsi myfun () {var x = 5, y = 10;}5. Penilaian Komparatif Menggunakan Jenis Penilaian
Ini menggunakan operator perbandingan yang tepat === untuk menghindari masalah yang disebabkan oleh para pemain JavaScript selama proses penilaian.
Jika Anda menggunakan operator ===, kedua pihak dengan perbandingan harus dari jenis yang sama untuk valid.
Tidak direkomendasikan
(function (w) {'gunakan ketat'; w.console.log ('0' == 0); // true w.console.log ('' == false); // true w.console.log ('1' == true); // true w.console.log (null == tidak terdefinisi); / {function {null == tidak ada; w.console.log (x == 'x'); // true} (window.console.log));menyarankan
(function (w) {'Gunakan ketat'; w.console.log ('0' === 0); // false w.console.log ('' === false); // false w.console.log ('1' === true); // false w.console.log (null === tidak terdefinisi);););) (false false = {nilai false: {noleF: {noleF: {noleF: {null ===== };6. Operasi logis saat penugasan variabel
Operator logis || dan && juga dapat digunakan untuk mengembalikan nilai Boolean. Jika objek operasi adalah objek non-Boolean, maka setiap ekspresi akan dinilai dari kiri ke kanan. Berdasarkan operasi ini, selalu ada ekspresi yang dikembalikan pada akhirnya. Ini dapat digunakan untuk menyederhanakan kode Anda saat menetapkan variabel.
Tidak direkomendasikan
if (! x) {if (! y) {x = 1; } else {x = y; }}menyarankan
x = x || y || 1;
7. Semi-Kolon
Selalu gunakan titik koma karena sarang kode implisit dapat menyebabkan masalah yang tidak terdeteksi. Tentu saja, kita harus secara fundamental menghilangkan masalah ini [1].
Contoh -contoh berikut menunjukkan bahaya kehilangan titik koma:
// 1.myclass.prototype.mymethod = function () {return 42;} // Tidak ada titik koma di sini (function () {}) (); //2.var x = {'i': 1, 'j': 2} // Tidak ada titik koma di sini // Saya tahu Anda mungkin tidak akan pernah menulis kode seperti itu, tetapi saya akan memberikan contoh [ffversion, ieversion] [isie] (); // 3.var things_to_eat = [apel, tiram, semprotoncheese] // tidak ada titik koma di sini-1 == resultofoperation () || mati();Hasil kesalahan
1. Kesalahan JavaScript - Fungsi yang mengembalikan 42 disebut pertama oleh parameter dalam fungsi kedua, dan kemudian angka 42 juga "disebut", menghasilkan kesalahan.
2. Delapan puluh kali Anda akan mendapatkan pesan kesalahan 'tidak ada properti seperti itu di tidak terdefinisi', karena panggilan di lingkungan nyata terlihat seperti ini: xffversion, ieversion ().
3.Die selalu dipanggil. Karena hasil minus 1 dalam array adalah NAN, itu tidak sama dengan apa pun (terlepas dari apakah hasil operasi mengembalikan Nan atau tidak). Jadi hasil akhirnya adalah bahwa nilai yang diperoleh setelah die () dieksekusi akan ditugaskan ke things_to_eat.
8. Deklarasi fungsi dalam blok pernyataan
Jangan pernah mendeklarasikan fungsi dalam blok pernyataan, yang ilegal dalam mode ketat ecmascript 5. Deklarasi fungsi harus berada di tingkat atas ruang lingkup. Namun, dalam blok pernyataan, deklarasi fungsi dapat dikonversi menjadi ekspresi fungsi dan ditugaskan ke variabel.
Tidak direkomendasikan
if (x) {function foo () {}}menyarankan
if (x) {var foo = function () {};}9. Jangan gunakan fungsi eval
eval() tidak hanya membingungkan konteks tetapi juga berbahaya. Akan selalu ada solusi lain untuk menulis kode Anda yang lebih baik, lebih jelas dan lebih aman dari ini, jadi cobalah untuk tidak menggunakan fungsi eval .
10. Array dan Literal Objek
1. Gunakan literal array dan objek alih -alih array dan konstruktor objek. Konstruktor array dapat dengan mudah membuat kesalahan pada parameternya.
Tidak direkomendasikan
// Panjang array 3var a1 = array baru (x1, x2, x3); // array panjang 2var a2 = array baru (x1, x2); // Jika x1 adalah angka alami, panjangnya akan menjadi x1 // jika x1 bukan angka alami, panjangnya akan menjadi 1var a3 = array baru (x1); var a4 = number () (var a4 =) (var a4 = baru =) (var a4 = baru =) (var a4 = baru =) (var a4 =) (var a4 =) (baru) (var a4 = baru =) (var a4 =) (var a4 =) (var a4 =) (baru) (var a4 =) (var a4 =);
Karena itu, jika kode melewati dua ke satu, ada kemungkinan tinggi bahwa array akan mengalami perubahan panjang yang tidak terduga. Untuk menghindari situasi aneh seperti itu, selalu gunakan literal array yang dapat dibaca.
menyarankan
var a = [x1, x2, x3]; var a2 = [x1, x2]; var a3 = [x1]; var a4 = [];
2. Konstruktor objek tidak akan memiliki masalah yang sama, tetapi untuk keterbacaan dan keseragaman, kita harus menggunakan literal objek.
Tidak direkomendasikan
var o = objek baru (); var o2 = objek baru (); o2.a = 0; o2.b = 1; o2.c = 2; o2 ['kunci aneh'] = 3;
menyarankan
var o = {}; var o2 = {a: 0, b: 1, c: 2, 'Strange Key': 3};11. Penilaian Kondisi Triple-Variabel (Metode Cepat untuk IF)
Gunakan operator ternary untuk menetapkan atau mengembalikan pernyataan. Gunakan dalam situasi yang relatif sederhana dan hindari menggunakan dalam situasi yang kompleks. Tidak ada yang mau menggunakan 10 lini operator ternary untuk menggoyangkan pikiran mereka.
Tidak direkomendasikan
if (x === 10) {return 'valid';} else {return 'Invalid';}menyarankan
mengembalikan x === 10? 'valid': 'tidak valid';
12. untuk loop
Selama proses penggunaan untuk loop, panjang array diterima oleh variabel, yang kondusif untuk meningkatkan efisiensi eksekusi kode. Sebaliknya, panjang array harus dihitung ulang setiap kali loop hilang.
Tidak direkomendasikan
untuk (var i = 0; i <arr.length, i ++) {}menyarankan
untuk (var i = 0, len = arr.length; i <len, i ++) {}13. Operasi DOM berulang
Operasi DOM yang diulang, perlu untuk menggunakan variabel untuk menerima, daripada sering mengoperasikan pohon DOM, yang memiliki dampak buruk pada kinerja, kode yang rapi dan pemeliharaan yang mudah.
Tidak direkomendasikan
$ ('. MyDiv'). Temukan ('. Span1'). Teks ('1'); $ ('. MyDiv'). Temukan ('. Span2'). Teks ('2'); $ ('. MyDiv'). Temukan ('. Span3'). Teks ('3'); $ ('.menyarankan
var myDiv = $ ('. MyDiv'); myDiv.find ('. Span1'). Teks ('1'); myDiv.find ('. Span2'). Teks ('2'); myDiv.find ('. Span3'). Teks ('3'); myDiv.find ('. Span4'). Ketika jquery .end() tersedia, gunakan .end() harus lebih disukai.
menyarankan
$ ('. MyDiv'). Find ('. Span1'). Teks ('1') .EnD (). Find ('. Span2'). Teks ('2'); .end (). find ('. span3'). text ('3'); .end (). find ('. span4'). text ('4');14. Spesifikasi Komentar
Saat menggambarkan komentar, gaya komentar yang diformat dan terpadu direkomendasikan. Cobalah untuk menggambarkan ide -ide saat menulis komentar, bukan apa yang dilakukan kode.
Tidak direkomendasikan
// Dapatkan fungsi pesanan getOrderById (id) {var order; // ... pesanan kembali;}Anotasi metode harus digunakan secara seragam dengan anotasi tingkat blok
menyarankan
/** * Dapatkan data detail pesanan berdasarkan ID pesanan * @param {[number]} id [ID pesanan] * @return {[pesanan]} [detail pesanan] */function getOrderById (id) {var order; // ... pesanan kembali;}Meringkaskan
Ringkasan spesifikasi penulisan kode umum JavaScript pada dasarnya sudah berakhir. Artikel ini masih sangat komprehensif dan memiliki nilai referensi tertentu untuk digunakan semua orang atau mempelajari beberapa JavaScript. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi.