Panduan Gaya Kod JavaScript Popular Semasa_Petua Javascript

JavaScript tidak mempunyai panduan gaya pengekodan yang berwibawa, sebaliknya terdapat beberapa gaya pengekodan yang popular:

Salin kod Kod adalah seperti berikut:

Panduan Gaya JavaScript Google (selepas ini dirujuk sebagai Google)
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
Gaya pengekodan NPM (selepas ini dirujuk sebagai NPM)
https://npmjs.org/doc/coding-style.html
Panduan Gaya Node.js Felix (selepas ini dirujuk sebagai Node.js)
http://nodeguide.com/style.html
JavaScript Idiomatik (selepas ini dirujuk sebagai Idiomatik)
https://github.com/rwldrn/idiomatic.js/
Panduan Gaya JavaScript jQuery (selepas ini dirujuk sebagai jQuery)
http://contribute.jquery.org/style-guide/js/
Panduan Gaya JavaScript oleh Douglas Crockford (selepas ini dirujuk sebagai Crockford), Douglas Crockford ialah salah satu pihak berkuasa teknikal yang paling terkenal dalam bidang pembangunan web dan ahli Jawatankuasa Standardisasi JavaScript ECMA 2.0
http://javascript.crockford.com/code.html

Sudah tentu, terdapat juga beberapa pilihan tetapan lalai dalam penyemak sintaks JavaScript JSLint dan JSHint. Persoalannya, apakah gaya pengekodan JavaScript muktamad yang boleh diikuti oleh kebanyakan pembangun? Mari cari beberapa gaya konsensus daripada 6 panduan gaya ini.

1. Perbandingan gaya kod

1.1 Inden

Dua ruang, tiada lagi lekukan, tiada lekukan tab: Google, NPM, Node.js, Idiomatik
Inden tab: jQuery
4 ruang: Crockford

1.2 Ruang antara parameter dan ungkapan

Gunakan gaya padat: Google, NPM, Node.js

Salin kod Kod adalah seperti berikut:

projek.MyClass = function(arg1, arg2) {

Penggunaan ruang yang berlebihan: Idiomatik, jQuery

Salin kod Kod adalah seperti berikut:

untuk ( i = 0; i < length; i ) {

Tiada ulasan lagi: Crockford
Dalam kebanyakan garis panduan, pembangun diingatkan supaya tidak mempunyai sebarang ruang di penghujung kenyataan.

1.3 Panjang baris kod

Sehingga 80 aksara: Google, NPM, Node.js, Crockford (Apabila berada di dalam blok kod, lekukan selain 2 ruang membenarkan menjajarkan argumen fungsi ke kedudukan argumen fungsi pertama. Pilihan lain Gunakan 4 ruang untuk lekukan apabila membalut secara automatik)
Tiada ulasan lagi: jQuery, Idiomatik

1.4 titik bertitik

Sentiasa gunakan koma bertitik, jangan bergantung pada sisipan tersirat: Google, Node.js, Crockford
Jangan gunakan jangkakan dalam situasi tertentu: NPM
Tiada ulasan lagi: jQuery, Idiomatik

1.5 Nota

Ikuti konvensyen JSDoc: Google, Idiomatik
Tiada ulasan lagi: NPM, Node.js, jQuery, Crockford

1.6 Petikan

Petikan tunggal yang disyorkan: Google, Node.js
Petikan berganda: jQuery
Tiada ulasan: NPM, Idiomatik, Crockford

1.7 Pengisytiharan berubah

Isytihar satu demi satu, tanpa koma: Node.js

Salin kod Kod adalah seperti berikut:

var foo = ”;
var bar = ”;

Isytiharkan berbilang sekaligus, dipisahkan dengan koma di hujung baris: Idiomatik, jQuery

Salin kod Kod adalah seperti berikut:

var foo = “”,
bar = “”,
quux;

Gunakan koma pada permulaan baris: NPM
Tiada ulasan: Google, Crockford

1.8 Braces

Gunakan pendakap bukaan pada baris yang sama: Google, NPM, Node.js, Idiomatik, jQuery, Crockford

Salin kod Kod adalah seperti berikut:

fungsikan thisIsBlock(){

Garis panduan NPM menyatakan bahawa pendakap kerinting hanya boleh digunakan jika blok kod perlu mengandungi baris seterusnya, jika tidak, tidak.

1.9 Pembolehubah global

Jangan gunakan pembolehubah global: Google, Crockford (Google mengatakan bahawa konflik penamaan pembolehubah global sukar untuk dinyahpepijat dan mungkin menyebabkan beberapa masalah yang menyusahkan apabila kedua-dua projek sedang disepadukan. Untuk memudahkan perkongsian kod JavaScript biasa, satu konvensyen perlu diwujudkan untuk Mengelakkan konflik Crockford percaya bahawa pembolehubah global tersirat tidak boleh digunakan)

Tiada ulasan: Idiomatik, jQuery, NPM, Node.js

2 Gaya penamaan

2.1 Penamaan pembolehubah

Perkataan pertama pada permulaan ialah huruf kecil, dan huruf pertama bagi semua perkataan berikutnya ditulis dengan huruf besar: Google, NPM, Node.js, Idiomatik

Salin kod Kod adalah seperti berikut:

var foo = “”;
var fooName = “”;

2.2 Penamaan Malar

Gunakan huruf besar: Google, NPM, Node.js

Salin kod Kod adalah seperti berikut:

var CONS = ‘VALUE’;

Tiada ulasan lagi: jQuery, Idiomatic, Crockford

2.3 Penamaan Fungsi

Perkataan pertama pada permulaan ialah huruf kecil, dan huruf pertama semua perkataan berikutnya ditulis dengan huruf besar (huruf besar): Google, NPM, Idiomatik, Node.js (disyorkan untuk menggunakan nama fungsi deskriptif yang panjang)

Salin kod Kod adalah seperti berikut:

fungsi veryLongOperationName
fungsi pendek()..

Penamaan fungsi dalam bentuk kata kunci:

Salin kod Kod adalah seperti berikut:

fungsi isReady()
fungsi setName()
fungsi getName()

Tiada ulasan: jQuery, Crockford

2.4 Penamaan tatasusunan

Gunakan bentuk jamak: Idiomatik

Salin kod Kod adalah seperti berikut:

var documents = [];

Tiada ulasan: Google, jQuery, NPM, Node.js, Crockford

2.5 Penamaan objek dan kelas

Gunakan borang berikut: Google, NPM, Node.js

Salin kod Kod adalah seperti berikut:

var ThisIsObject = Tarikh baharu;

Tiada ulasan lagi: jQuery, Idiomatic, Crockford

2.6 Penamaan lain

Gunakan borang all-lower-hyphen-css-case untuk nama fail panjang dan kekunci konfigurasi: NPM

3. Konfigurasikan fail .jshintrc mengikut gaya di atas

JSHint (http://www.jshint.com/) ialah sintaks JavaScript dan alat semakan gaya yang boleh anda gunakan untuk memaklumkan anda tentang isu berkaitan gaya kod. Ia boleh disepadukan dengan baik ke dalam banyak editor yang biasa digunakan dan merupakan alat yang hebat untuk menyatukan gaya pengekodan pasukan.

Anda boleh melihat pilihan yang tersedia melalui dokumentasi JSHint: http://www.jshint.com/docs/#options
Seterusnya, cipta fail .jshintrc berdasarkan gaya pertama di bawah setiap kategori di atas. Anda boleh meletakkannya dalam direktori akar projek, dan editor kod JSHint-avare akan mengikutinya untuk menyatukan semua gaya kod dalam projek.

Salin kod Kod adalah seperti berikut:

{
"sarung unta" : benar,
"inden": 2,
"undef": benar,
"tanda kutip": bujang,
"maxlen": 80,
"mengikut": benar,
"keriting": benar
}

Selain itu, anda harus menambah pengepala berikut pada fail JavaScript anda:

Salin kod Kod adalah seperti berikut:

/* pelayar jshint:true, jquery:true */

Dalam fail Node.js anda harus menambah:

Salin kod Kod adalah seperti berikut:

/*jshint node:true */

Anda juga boleh menambah pengisytiharan berikut pada pelbagai fail JavaScript:

Salin kod Kod adalah seperti berikut:

'gunakan ketat';

Ini akan menjejaskan JSHint dan enjin JavaScript anda, yang mungkin kurang serasi, tetapi JavaScript akan berjalan lebih pantas.

4. Laksanakan JSHint secara automatik sebelum membuat komitmen kepada Git

Jika anda ingin memastikan bahawa semua kod JS konsisten dengan gaya yang ditakrifkan dalam .jshintrc, anda boleh menambah kandungan berikut pada fail .git/hooks/pre-commit anda apabila anda cuba melakukan sebarang perubahan baharu Semakan gaya ialah dilakukan secara automatik apabila fail ditambahkan pada projek.

Salin kod Kod adalah seperti berikut:

#!/bin/bash
# Prakomit cangkuk Git untuk menjalankan JSHint pada fail JavaScript.
#
# Jika anda benar-benar mesti komited tanpa ujian,
# gunakan: git commit --no-verify

nama fail=($(git diff --cached --name-only HEAD))

yang mana &> /dev/null
jika [ $? -ne 0 ];
kemudian
echo "ralat: jshint tidak ditemui"
echo "pasang dengan: sudo npm install -g jshint"
keluar 1
fi

untuk i dalam "${filenames[@]}"
lakukan
Jika [[ $i =~ .js$ ]];
Kemudian
echo jshint $i
         jsint $i
           jika [ $? -ne 0 ];
        kemudian
keluar 1
       fi
fi
selesai