Spesifikasi
Ini adalah standar penulisan kode yang diikuti dan disepakati oleh tim pengembangan front-end, yang dimaksudkan untuk meningkatkan standarisasi dan pemeliharaan kode.
Prinsip dasar
Mematuhi standar web, HTML semantik, pemisahan struktur, kinerja dan perilaku, serta kompatibilitas yang sangat baik dalam hal kinerja halaman, kode harus ringkas, jelas dan teratur, untuk mengurangi beban server sebanyak mungkin dan memastikan keamanan. kecepatan penguraian tercepat.
spesifikasi umum
1. Abaikan (Hilangkan) protokol: seperti background: url(http://www.google.com/images/example); Anda harus menulis background: url(//www.google.com/images/example); memfasilitasi http Switch dengan protokol https kecuali protokol tertentu harus digunakan
2. Gunakan IDE untuk mendapatkan lekukan yang jelas saat menulis. Tombol tab diganti dengan empat spasi.
Karena alat pengeditan dari sistem yang berbeda menafsirkan tab secara berbeda, tombol tab di Windows menempati empat spasi, sedangkan di Linux menempati delapan spasi (kecuali Anda mengatur sendiri penempatan tombol tab. panjang posisi).
Misalnya sublime text, Anda dapat mengatur tombol tab di alat ini.
3. Gunakan huruf kecil untuk atribut label
4. Jangan tinggalkan spasi di akhir untuk mencegah perbedaan
5. Gunakan UTF-8 (tanpa BOM) dan tambahkan <meta charset="utf-8″> ke dokumen
6. Gunakan huruf kecil ".js" untuk penamaan file, dan rekomendasikan "-" daripada "_"
7.TODO(kontak) dan TODO: item tindakan, jangan gunakan @@
Spesifikasi penyempurnaan HTML
1. Spesifikasi penggunaan html5 <!DOCTYPE html>
2. Format default tag <img> adalah: <img src="xxx.png" alt="default text" /> untuk menghindari masalah src=""
3. Format default tag <a>: <a href="###" title="Nama tautan">xxx</> Catatan: target="_blank" ditentukan sesuai kebutuhan
4. Tag <a> mencadangkan placeholder tautan menggunakan ###, lihat: masalah placeholder tag
5. Saat menulis alamat link, hindari pengalihan, misalnya: href="http://itaolun.com/", yaitu harus menambahkan "/" setelah alamat URL.
6. Semua tag harus ditutup sesuai dengan standar XHTML
7. Selalu gunakan bentuk penulisan yang sama yaitu garis miring di akhir tag: <br /> <hr /> Perhatikan spasi di antara
8. Hindari penggunaan tag yang ketinggalan jaman, seperti: <b> <u> <i> dan ganti dengan <strong> <em> dll.
9. Gunakan data-xxx untuk menambahkan data khusus, seperti: <input data-xxx="yyy"/>
10. Hindari penggunaan simbol khusus style="xxx:xxx;" dalam style sheet sebaris menggunakan entitas simbol HTML referensi
11. Label harus ditambahkan ke elemen formulir deskriptif (input, textarea), seperti <p>Nama: <input type="text" id="name" name="name" /></p> harus ditulis sebagai : < p><label for=”name”>Nama: </label><input type=”text” id=”name” /></p>
Spesifikasi penyempurnaan CSS
1. Tambahkan ";" setelah setiap atribut gaya
Alat kompresi yang nyaman "segmentasi kalimat".
2. Penamaan kelas, gunakan “-” [penghubung tanda minus] untuk memisahkan huruf-huruf dalam kelas:
Memisahkan dengan "-" lebih jelas dibandingkan menggunakan camel case.
Lini produk-produk-modul-sub-modul, Anda juga dapat menggunakan metode ini saat memberi nama
ID: Nomenklatur CamelCase seperti:
Namadepan topBoxList footerHak Cipta
3. Untuk penggunaan ruang berlaku aturan sebagai berikut:
.konten hotel {
berat font: tebal;
} Harus ada spasi sebelum pemilih dan {. Nama atribut harus diberi spasi setelahnya: Nama atribut harus diberi spasi setelahnya: Salah satu alasan menambahkan spasi sebelum (dilarang) adalah estetika .
4. (Disarankan) Urutan penulisan atribut, misalnya:
.konten hotel {
/* posisi*/
tampilan: blok;
posisi: mutlak;
kiri: 0;
atas: 0;
/* Model kotak */
lebar: 50 piksel;
tinggi: 50 piksel;
margin: 10 piksel;
batas: 1 piksel hitam pekat;
/ *lainnya* /
warna: #efefef;
}Terkait positioning, yang umum meliputi: posisi tampilan float kiri atas, dll. Terkait model kotak, yang umum meliputi: lebar, tinggi, margin, padding, border, dan atribut lainnya.
Penulisan dalam urutan ini dapat meningkatkan kinerja rendering DOM browser. Misalnya, jika lebar dan tinggi gambar di halaman web tidak disetel, sebelum gambar dimuat, ruang yang ditempati adalah 0, tetapi setelahnya adalah 0. dimuat, , ruang 0 tiba-tiba terbuka, yang akan menyebabkan elemen di bawahnya disusun ulang dan dirender, menyebabkan pengecatan ulang dan penataan ulang. Saat kita menulis CSS, kita menempatkan posisi elemen terlebih dahulu. Pertama, kita memberi tahu browser apakah elemen tersebut berada di dalam atau di luar aliran teks, dan di mana letaknya pada halaman. perbatasan, dll. Atribut-atribut yang memakan ruang dan atribut lainnya ditampilkan dalam area tetap ini
Artikel yang direkomendasikan:
Hasil Jajak Pendapat: Bagaimana cara mengurutkan properti CSS Anda?
http://www.mozilla.org/css/base/content.css
5. (Disarankan) Saat menulis gaya untuk struktur HTML tertentu, gunakan nama elemen + nama kelas
/* Semua navigasi ditulis untuk ul*/
ul.nav {
...
} ".a div" dan ".a div.b", mengapa yang terakhir lebih baik? Jika kebutuhan berubah dan div tambahan ditambahkan di bawah ".a", apakah gaya awal akan mempengaruhi div berikutnya~
6. (Tidak disarankan) Gunakan filter yaitu, (Dilarang) menggunakan ekspresi
Masalah utama di sini adalah efisiensi. Anda harus memberikan perhatian khusus dan menggunakan lebih sedikit hal yang membakar CPU~
7. Komentar CSS diwakili oleh "/* */". Saat mengomentari satu baris, objek yang diberi anotasi dan karakter komentar sebelum dan sesudahnya masing-masing memiliki spasi dan menempati baris terpisah saat mengomentari beberapa baris, komentar awal karakter dan karakter komentar akhir masing-masing menempati satu baris. Misalnya:
/* Komentar CSS */
/*
meja {
keruntuhan perbatasan: keruntuhan;
}
*/Spesifikasi penyempurnaan JS
1. Istirahat baris
Setiap baris kode harus kurang dari 120 karakter. Jika lebih dari angka ini, Anda dapat mempertimbangkan baris baru. Operator seperti "." atau "+" harus ditempatkan di akhir baris baris baru harus diindentasi satu tingkat lagi sebelum baris baru.
Jika parameter dalam suatu fungsi atau metode panjang, bagilah dengan tepat.
Jeda baris antara kata kunci return dan ekspresi yang akan dikembalikan dilarang. Misalnya:
// Yang sebenarnya dikembalikan adalah tidak terdefinisi, bukan 1
tes fungsi() {
kembali
1;
} 2. Baris kode
Dilarang menulis beberapa pernyataan pendek dalam satu baris, yaitu hanya menulis satu pernyataan dalam satu baris.
Pernyataan seperti if, for, do, while, switch, case, default, break, dan continue menempati baris tersendiri.
Semua badan perulangan dan pernyataan eksekusi badan penilaian, seperti if, for, do, while, dll., harus diapit oleh "{}", dan kurung kurawal tidak boleh dihilangkan. Misalnya:
// Salah jika (i < 5) i += 1;
// Benar jika (i < 5) {
saya += 1
} 3. Penjajaran <br />Pembatas {} blok kode, "{" mengikuti baris sebelumnya dan dipisahkan oleh spasi di depan, "}" harus menempati baris eksklusif dan ditempatkan di kolom yang sama, sekaligus rata kiri dengan pernyataan yang merujuk padanya.
Metode indentasi di atas harus digunakan di awal isi fungsi, definisi kelas, dan program dalam pernyataan if, for, do, while, switch, dan case.
4. Ruang
Harus ada spasi setelah kata kunci untuk menyorot kata kunci.
Tidak boleh ada spasi di antara nama fungsi, nama metode, dan tanda kurung kiri "(", misalnya:
// Fungsi getInfo salah () {
// kode
}
// Fungsi yang benar getInfo() {
// kode
}Saat mendeklarasikan ekspresi fungsi, tidak boleh ada spasi tersisa di antara fungsi dan tanda kurung kiri "(", misalnya:
// Salah var pengguna = fungsi () {
// kode
}
// Benar var pengguna = function() {
// kode
} Tambahkan spasi setelah koma.
Operator penugasan, operator perbandingan, operator aritmatika, operator logika, operator bidang bit, seperti "=", "+=" ">=", "<=", "+", "*", "%", "&& ", "||" dan operator biner lainnya harus diawali dan diikuti dengan spasi.
Tidak ada spasi sebelum dan sesudah operator unary seperti "!", "~", "++", "--", dan "&" (operator alamat).
Tidak ada spasi sebelum dan sesudah "." dan "[]".
5. Garis kosong
Tambahkan baris kosong setelah setiap deklarasi kelas dan di akhir setiap definisi fungsi.
Dalam badan fungsi, pernyataan yang berhubungan erat secara logis tidak boleh dipisahkan dengan garis kosong, dan tempat lain harus dipisahkan dengan garis kosong.
6. Gunakan operator kondisional yang ketat. Gunakan === sebagai ganti == dan !== sebagai ganti !=
7. Hindari koma tambahan. Misalnya: var arr = [1,2,3,]
8. Semua pernyataan harus diakhiri dengan titik koma, kecuali, function, if, switch, try, dan while.
9. Tempatkan kurung kurawal kiri di akhir baris dan kurung kurawal kanan di awal baris.
10. Tidak disarankan menggunakan new untuk membuat tipe objek berikut: Nomor baru, String baru, Boolean baru, Objek baru (ganti dengan {}), Array baru (ganti dengan []).
11. Harus ada spasi setelah tanda "," di antara anggota array.
12. Dilarang menggunakan penamaan kata kunci khusus javascript di js/json, yang dapat dengan mudah menyebabkan kesalahan di IE. Kata kunci (break, case, catch, continue, default, delete, do, else, akhirnya, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while , dengan), kata kunci (abstrak, boolean, byte, char, class, con st, debugger, dua kali lipat, enum, ekspor, meluas, fimal, float, goto, mengimplementasikan, impor, int, antarmuka, panjang, matif, paket, pribadi, dilindungi, publik, pendek, statis, super, tersinkronisasi, melempar, sementara, tidak stabil).
13. Disarankan untuk menggunakan "+" sebagai konektor baris baru daripada "".
14. Informasi cepat dilarang menggunakan deskripsi bahasa umum. Informasi tersebut harus ringkas dan jelas. Saat melihat informasi, Anda dapat langsung menemukan kesalahannya. Misalnya, saat meminta informasi pengguna untuk melaporkan kesalahan, gunakan "Pengguna ini tidak ada " alih-alih "Data yang dikembalikan oleh latar belakang salah", " Batas waktu jaringan habis".