Kepentingan menulis kod yang dapat dibaca oleh manusia

mata utama

• KEPERLUAN PERTAMA: Kod yang sangat mudah dibaca meningkatkan keupayaan dan kerjasama, dan kod menulis yang mudah difahami dan diubah suai adalah penting.
• Fungsi dan pengurusan fail: Gunakan fungsi untuk merangkum kod yang boleh diguna semula dan memecah fail besar ke bahagian yang lebih kecil, lebih mudah diurus untuk memudahkan navigasi dan pemahaman.
• Konvensyen penamaan: Pilih nama yang jelas dan deskriptif untuk fungsi dan pembolehubah untuk meningkatkan kebolehbacaan dan mengurangkan keperluan untuk komen tambahan.
• Elakkan pengoptimuman yang lebih tinggi: Walaupun kod ringkas dan optimum adalah menarik, kebolehbacaan harus diprioritaskan apabila kesan prestasi tidak signifikan, kerana enjin JavaScript moden berada dalam pengoptimuman kod sangat efisien.
• Komen-komen yang teliti: Gunakan komen untuk menjelaskan "mengapa" lakukan ini, bukannya "apa yang perlu dilakukan", dan simpan komen yang relevan dan terkini untuk membantu memahami logik kod yang tidak jelas.

Artikel ini dikaji semula oleh Matt Burnett, Simon Codrington dan Nilson Jacques. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk mendapatkan kandungan SitePoint untuk yang terbaik!

Adakah anda pernah menyelesaikan projek dalam satu larian pada satu masa tanpa perlu melihat kod itu lagi? Saya juga tidak. Apabila bekerja pada projek lama, anda mungkin ingin menghabiskan sedikit masa atau tidak memikirkan bagaimana kod tersebut berfungsi. Kod yang boleh dibaca adalah penting untuk mengekalkan produk yang dikekalkan dan memuaskan anda dan rakan sekerja atau kolaborator anda.

Contoh yang dibesar-besarkan dari kod yang sukar dibaca dapat ditemui dalam pertandingan JS1K, dengan tujuan menulis aplikasi JavaScript terbaik dalam 1024 aksara atau kurang, serta JSF*ck (NSFW dengan cara), iaitu Gaya pengaturcaraan yang mendalam, menggunakan hanya enam aksara yang berbeza untuk menulis kod JavaScript. Memeriksa kod di laman web ini akan membuat anda tertanya -tanya apa yang sedang berlaku. Bayangkan kod menulis seperti ini dan cuba menyelesaikan ralat selepas beberapa bulan.

Jika anda melayari internet secara teratur atau membina antara muka, anda mungkin tahu bahawa lebih mudah untuk keluar dari bentuk yang besar dan besar daripada keluar dari bentuk yang mudah dan kecil. Begitu juga untuk kod tersebut. Orang mungkin lebih suka menggunakannya apabila dianggap lebih mudah dibaca dan digunakan. Sekurang -kurangnya ia akan menghalang anda daripada membuang komputer anda daripada kecewa.

Dalam artikel ini, saya akan meneroka petua dan cara untuk membuat kod lebih mudah dibaca, serta perangkap untuk dielakkan.

Segmentasi kod

berterusan dalam bentuk analogi, bentuknya kadang -kadang dibahagikan kepada bahagian, menjadikannya kurang sukar. Kod boleh melakukan perkara yang sama. Dengan membahagikannya ke bahagian, pembaca boleh melompat ke bahagian yang berkaitan dengan mereka dan bukannya berjuang untuk melayari hutan.

Cross-File

Selama bertahun -tahun, kami telah mengoptimumkan semua jenis perkara untuk rangkaian. Fail JavaScript tidak terkecuali. Berfikir tentang minifikasi dan pra-HTTP/2, kami menyimpan permintaan HTTP dengan menggabungkan skrip ke dalam satu. Hari ini, kita boleh bekerja seperti yang kita mahu dan menggunakan pelari tugas seperti Gulp atau Grunt untuk memproses fail kami. Adalah selamat untuk mengatakan bahawa kita boleh memprogram cara kita suka dan meninggalkan pengoptimuman (seperti sambungan) ke alat.

// 从 API 加载用户数据
var getUsersRequest = new XMLHttpRequest();
getUsersRequest.open('GET', '/api/users', true);
getUsersRequest.addEventListener('load', function() {
    // 对用户执行某些操作
});

getUsersRequest.send();

//---------------------------------------------------
// 不同的功能从这里开始。也许
// 这是一个分成文件的时机。
//---------------------------------------------------

// 从 API 加载帖子数据
var getPostsRequest = new XMLHttpRequest();
getPostsRequest.open('GET', '/api/posts', true);
getPostsRequest.addEventListener('load', function() {
    // 对帖子执行某些操作
});

getPostsRequest.send();

fungsi

Fungsi

membolehkan kita membuat blok kod yang boleh diguna semula. Secara amnya, kandungan fungsi diindentifikasi, jadi mudah untuk melihat kedudukan permulaan dan akhir fungsi. Kebiasaan yang baik adalah untuk memastikan fungsi kecil - 10 baris atau kurang. Ia juga mudah untuk memahami apa yang berlaku apabila fungsi dipanggil apabila fungsi dinamakan dengan betul. Kami akan memperkenalkan konvensyen penamaan kemudian.

// 从 API 加载用户数据
function getUsers(callback) {
    var getUsersRequest = new XMLHttpRequest();
    getUsersRequest.open('GET', '/api/users', true);
    getUsersRequest.addEventListener('load', function() {
        callback(JSON.parse(getUsersRequest.responseText));
    });

    getUsersRequest.send();
}

// 从 API 加载帖子数据
function getPosts(callback) {
    var getPostsRequest = new XMLHttpRequest();
    getPostsRequest.open('GET', '/api/posts', true);
    getPostsRequest.addEventListener('load', function() {
        callback(JSON.parse(getPostsRequest.responseText));
    });

    getPostsRequest.send();
}

// 由于命名正确，因此无需阅读实际函数即可轻松理解此代码
// getUsers(function(users) {
//     // 对用户执行某些操作
// });
// getPosts(function(posts) {
//     // 对帖子执行某些操作
// });

kita boleh memudahkan kod di atas. Perhatikan bahawa kedua -dua fungsi ini hampir sama? Kita boleh memohon prinsip "Jangan Ulangi Diri" (Kering). Ini menghalang kekeliruan.

function fetchJson(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.addEventListener('load', function() {
        callback(JSON.parse(request.responseText));
    });

    request.send();
}

// 下面的代码仍然很容易理解
// 无需阅读上面的函数
fetchJson('/api/users', function(users) {
    // 对用户执行某些操作
});
fetchJson('/api/posts', function(posts) {
    // 对帖子执行某些操作
});

Bagaimana jika kita mahu membuat pengguna baru melalui permintaan pos? Pada ketika ini, satu pilihan adalah untuk menambah parameter pilihan ke fungsi, dengan itu memperkenalkan logik baru kepada fungsi, menjadikannya terlalu kompleks untuk menjadi fungsi. Pilihan lain adalah untuk membuat fungsi baru khusus untuk permintaan pos, yang akan menyebabkan duplikasi kod.

kita boleh mendapatkan kelebihan kedua-duanya melalui pengaturcaraan berorientasikan objek, yang membolehkan kita membuat objek penggunaan tunggal yang boleh dikonfigurasikan sambil mengekalkan penyelenggaraannya.

NOTA: Jika anda memerlukan pemula dalam JavaScript yang berorientasikan objek, saya cadangkan video ini: Panduan Berhati-hati untuk JavaScript Berorientasikan Objek

Pengaturcaraan berorientasikan objek

Pertimbangkan objek, biasanya dipanggil kelas, yang merupakan satu set fungsi konteks yang menyedari. Objek sesuai untuk memasukkan fail khusus. Dalam contoh kami, kami boleh membina pembungkus asas untuk XMLHTTPREQUEST.

httprequest.js

function HttpRequest(url) {
    this.request = new XMLHttpRequest();

    this.body = undefined;
    this.method = HttpRequest.METHOD_GET;
    this.url = url;

    this.responseParser = undefined;
}

HttpRequest.METHOD_GET = 'GET';
HttpRequest.METHOD_POST = 'POST';

HttpRequest.prototype.setMethod = function(method) {
    this.method = method;
    return this;
};

HttpRequest.prototype.setBody = function(body) {
    if (typeof body === 'object') {
        body = JSON.stringify(body);
    }

    this.body = body;
    return this;
};

HttpRequest.prototype.setResponseParser = function(responseParser) {
    if (typeof responseParser !== 'function') return;

    this.responseParser = responseParser;
    return this;
};

HttpRequest.prototype.send = function(callback) {
    this.request.addEventListener('load', function() {
        if (this.responseParser) {
            callback(this.responseParser(this.request.responseText));
        } else {
            callback(this.request.responseText);
        }
    }, false);

    this.request.open(this.method, this.url, true);
    this.request.send(this.body);
    return this;
};

app.js

new HttpRequest('/users')
    .setResponseParser(JSON.parse)
    .send(function(users) {
        // 对用户执行某些操作
    });

new HttpRequest('/posts')
    .setResponseParser(JSON.parse)
    .send(function(posts) {
        // 对帖子执行某些操作
    });

// 创建一个新用户
new HttpRequest('/user')
    .setMethod(HttpRequest.METHOD_POST)
    .setBody({
        name: 'Tim',
        email: 'info@example.com'
    })
    .setResponseParser(JSON.parse)
    .send(function(user) {
        // 对新用户执行某些操作
    });

Kelas HttPrequest yang dicipta di atas kini sangat boleh dikonfigurasikan dan boleh digunakan untuk banyak panggilan API kami. Walaupun pelaksanaan (satu siri panggilan kaedah rantaian) lebih kompleks, fungsi kelas mudah dijaga. Keseimbangan antara pelaksanaan dan kebolehgunaan semula boleh menjadi sukar dan khusus projek.

Corak reka bentuk adalah tambahan hebat apabila menggunakan OOP. Walaupun mereka tidak akan meningkatkan kebolehbacaan sendiri, konsistensi akan!

tatabahasa buatan

Fail, fungsi, objek, ini hanya garis kasar. Mereka membuat kod anda mudah untuk mengimbas . Membuat kod lebih mudah dibaca adalah seni yang lebih teliti. Butiran sedikit pun boleh memberi kesan yang signifikan. Sebagai contoh, mengehadkan panjang garis anda hingga 80 aksara adalah penyelesaian yang mudah, biasanya dikuatkuasakan oleh editor melalui garis menegak. Tetapi ada lebih banyak lagi! Nama

penamaan yang betul boleh membawa kepada pengiktirafan segera tanpa mencari nilai atau peranan fungsi.

Fungsi biasanya menggunakan nomenclature unta. Ia biasanya membantu untuk memulakan dengan kata kerja dan kemudian subjek.

// 从 API 加载用户数据
var getUsersRequest = new XMLHttpRequest();
getUsersRequest.open('GET', '/api/users', true);
getUsersRequest.addEventListener('load', function() {
    // 对用户执行某些操作
});

getUsersRequest.send();

//---------------------------------------------------
// 不同的功能从这里开始。也许
// 这是一个分成文件的时机。
//---------------------------------------------------

// 从 API 加载帖子数据
var getPostsRequest = new XMLHttpRequest();
getPostsRequest.open('GET', '/api/posts', true);
getPostsRequest.addEventListener('load', function() {
    // 对帖子执行某些操作
});

getPostsRequest.send();

Untuk nama -nama yang berubah -ubah, cuba gunakan kaedah piramid terbalik. Topik diletakkan di depan dan atribut diletakkan di belakang.

// 从 API 加载用户数据
function getUsers(callback) {
    var getUsersRequest = new XMLHttpRequest();
    getUsersRequest.open('GET', '/api/users', true);
    getUsersRequest.addEventListener('load', function() {
        callback(JSON.parse(getUsersRequest.responseText));
    });

    getUsersRequest.send();
}

// 从 API 加载帖子数据
function getPosts(callback) {
    var getPostsRequest = new XMLHttpRequest();
    getPostsRequest.open('GET', '/api/posts', true);
    getPostsRequest.addEventListener('load', function() {
        callback(JSON.parse(getPostsRequest.responseText));
    });

    getPostsRequest.send();
}

// 由于命名正确，因此无需阅读实际函数即可轻松理解此代码
// getUsers(function(users) {
//     // 对用户执行某些操作
// });
// getPosts(function(posts) {
//     // 对帖子执行某些操作
// });

Ia juga penting untuk dapat membezakan antara pembolehubah biasa dan khas. Sebagai contoh, nama pemalar biasanya ditulis dalam huruf besar dan digariskan.

function fetchJson(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.addEventListener('load', function() {
        callback(JSON.parse(request.responseText));
    });

    request.send();
}

// 下面的代码仍然很容易理解
// 无需阅读上面的函数
fetchJson('/api/users', function(users) {
    // 对用户执行某些操作
});
fetchJson('/api/posts', function(posts) {
    // 对帖子执行某些操作
});

Kelas biasanya menggunakan nomenclature unta, bermula dengan huruf besar.

function HttpRequest(url) {
    this.request = new XMLHttpRequest();

    this.body = undefined;
    this.method = HttpRequest.METHOD_GET;
    this.url = url;

    this.responseParser = undefined;
}

HttpRequest.METHOD_GET = 'GET';
HttpRequest.METHOD_POST = 'POST';

HttpRequest.prototype.setMethod = function(method) {
    this.method = method;
    return this;
};

HttpRequest.prototype.setBody = function(body) {
    if (typeof body === 'object') {
        body = JSON.stringify(body);
    }

    this.body = body;
    return this;
};

HttpRequest.prototype.setResponseParser = function(responseParser) {
    if (typeof responseParser !== 'function') return;

    this.responseParser = responseParser;
    return this;
};

HttpRequest.prototype.send = function(callback) {
    this.request.addEventListener('load', function() {
        if (this.responseParser) {
            callback(this.responseParser(this.request.responseText));
        } else {
            callback(this.request.responseText);
        }
    }, false);

    this.request.open(this.method, this.url, true);
    this.request.send(this.body);
    return this;
};

Perincian kecil adalah singkatan. Ada yang memilih untuk memanfaatkan singkatan, sementara yang lain memilih untuk berpegang pada tatanama unta. Menggunakan bekas boleh menjadikannya lebih sukar untuk mengenal pasti singkatan berikutnya.

kesederhanaan dan pengoptimuman

Di banyak pangkalan kod, anda mungkin menghadapi kod "khas" untuk mengurangkan bilangan aksara atau meningkatkan prestasi algoritma anda.

Kod satu baris adalah contoh kod ringkas. Malangnya, mereka biasanya bergantung kepada helah atau sintaks yang tidak jelas. Pengendali ternary bersarang yang dilihat di bawah adalah contoh yang sama. Walaupun ia ringkas, ia juga mungkin mengambil satu atau dua saat untuk memahami kesannya berbanding dengan pernyataan biasa jika. Berhati -hati dengan pintasan sintaks.

new HttpRequest('/users')
    .setResponseParser(JSON.parse)
    .send(function(users) {
        // 对用户执行某些操作
    });

new HttpRequest('/posts')
    .setResponseParser(JSON.parse)
    .send(function(posts) {
        // 对帖子执行某些操作
    });

// 创建一个新用户
new HttpRequest('/user')
    .setMethod(HttpRequest.METHOD_POST)
    .setBody({
        name: 'Tim',
        email: 'info@example.com'
    })
    .setResponseParser(JSON.parse)
    .send(function(user) {
        // 对新用户执行某些操作
    });

pengoptimuman mikro adalah pengoptimuman prestasi dan biasanya mempunyai sedikit kesan. Dalam kebanyakan kes, mereka tidak mudah dibaca sebagai setara yang lebih rendah.

function getApiUrl() { /* ... */ }
function setRequestMethod() { /* ... */ }
function findItemsById(n) { /* ... */ }
function hideSearchForm() { /* ... */ }

penyusun JavaScript sangat baik untuk mengoptimumkan kod untuk kami, dan mereka sentiasa bertambah baik. Kecuali perbezaan antara kod yang tidak dioptimumkan dan kod yang dioptimumkan adalah jelas (biasanya selepas beribu -ribu atau berjuta -juta operasi), adalah disyorkan untuk memilih kod yang lebih mudah dibaca.

non-code

Ini ironis, tetapi cara yang lebih baik untuk memastikan kod yang boleh dibaca adalah untuk menambah sintaks yang tidak akan dilaksanakan. Mari kita namakannya bukan kod.

ruang

Saya cukup yakin setiap pemaju mempunyai pemaju lain yang menyediakannya, atau memeriksa kod termampat untuk laman web tertentu - kod di mana kebanyakan ruang dikeluarkan. Ia mungkin agak mengejutkan untuk menemui ini untuk kali pertama. Dalam bidang seni visual yang berlainan, seperti reka bentuk dan tipografi, ruang kosong sama pentingnya dengan mengisi. Anda perlu mencari keseimbangan antara keduanya. Persepsi baki ini berbeza -beza oleh syarikat, pasukan, dan pemaju. Nasib baik, terdapat beberapa peraturan yang umumnya diiktiraf oleh :

satu ungkapan setiap baris,

• Kandungan blok yang diindentifikasi,
• Cuti talian tambahan boleh digunakan untuk memisahkan bahagian kod.
Sebarang peraturan lain harus dibincangkan dengan sesiapa sahaja yang anda bekerjasama. Terlepas dari gaya kod yang anda setuju, konsistensi adalah kunci.

Komen

var element = document.getElementById('body'),
    elementChildren = element.children,
    elementChildrenCount = elementChildren.length;

// 定义一组颜色时，我在变量前加“color”前缀
var colorBackground = 0xFAFAFA,
    colorPrimary = 0x663399;

// 定义一组背景属性时，我使用 background 作为基准
var backgroundColor = 0xFAFAFA,
    backgroundImages = ['foo.png', 'bar.png'];

// 上下文可以改变一切
var headerBackgroundColor = 0xFAFAFA,
    headerTextColor = 0x663399;

seperti ruang, komen boleh menjadi cara yang baik untuk menyediakan ruang untuk kod anda dan juga membolehkan anda menambah butiran ke kod anda. Pastikan anda menambah komen untuk memaparkan:

tafsiran dan argumentasi kod yang tidak jelas,

• menetapkan kesilapan atau pengecualian yang diselesaikan dan sumber yang ada.

tidak semua pembetulan adalah jelas. Menambah maklumat tambahan dapat menjelaskan banyak:

var URI_ROOT = window.location.href;

// 从 API 加载用户数据
var getUsersRequest = new XMLHttpRequest();
getUsersRequest.open('GET', '/api/users', true);
getUsersRequest.addEventListener('load', function() {
    // 对用户执行某些操作
});

getUsersRequest.send();

//---------------------------------------------------
// 不同的功能从这里开始。也许
// 这是一个分成文件的时机。
//---------------------------------------------------

// 从 API 加载帖子数据
var getPostsRequest = new XMLHttpRequest();
getPostsRequest.open('GET', '/api/posts', true);
getPostsRequest.addEventListener('load', function() {
    // 对帖子执行某些操作
});

getPostsRequest.send();

Dokumen sebaris

Apabila menulis perisian berorientasikan objek, dokumen sebaris, seperti komen biasa, boleh menyediakan ruang pernafasan untuk kod tersebut. Mereka juga membantu menjelaskan tujuan dan butiran atribut atau kaedah. Ramai IDE menggunakannya untuk arahan, dan alat dokumen yang dihasilkan juga menggunakannya! Apapun alasannya, menulis dokumen adalah amalan yang sangat baik.

// 从 API 加载用户数据
function getUsers(callback) {
    var getUsersRequest = new XMLHttpRequest();
    getUsersRequest.open('GET', '/api/users', true);
    getUsersRequest.addEventListener('load', function() {
        callback(JSON.parse(getUsersRequest.responseText));
    });

    getUsersRequest.send();
}

// 从 API 加载帖子数据
function getPosts(callback) {
    var getPostsRequest = new XMLHttpRequest();
    getPostsRequest.open('GET', '/api/posts', true);
    getPostsRequest.addEventListener('load', function() {
        callback(JSON.parse(getPostsRequest.responseText));
    });

    getPostsRequest.send();
}

// 由于命名正确，因此无需阅读实际函数即可轻松理解此代码
// getUsers(function(users) {
//     // 对用户执行某些操作
// });
// getPosts(function(posts) {
//     // 对帖子执行某些操作
// });

Masalah panggil balik

Acara dan panggilan tak segerak adalah ciri -ciri kuat JavaScript, tetapi biasanya membuat kod lebih sukar untuk dibaca.

Panggilan asynchronous biasanya disediakan menggunakan panggilan balik. Kadang -kadang anda mahu menjalankannya secara teratur, atau tunggu semua panggilan tak segerak untuk siap.

function fetchJson(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.addEventListener('load', function() {
        callback(JSON.parse(request.responseText));
    });

    request.send();
}

// 下面的代码仍然很容易理解
// 无需阅读上面的函数
fetchJson('/api/users', function(users) {
    // 对用户执行某些操作
});
fetchJson('/api/posts', function(posts) {
    // 对帖子执行某些操作
});

Objek janji diperkenalkan di ES2015 (juga dikenali sebagai ES6) untuk menyelesaikan kedua -dua masalah. Ia membolehkan anda meratakan permintaan tak segerak bersarang.

function HttpRequest(url) {
    this.request = new XMLHttpRequest();

    this.body = undefined;
    this.method = HttpRequest.METHOD_GET;
    this.url = url;

    this.responseParser = undefined;
}

HttpRequest.METHOD_GET = 'GET';
HttpRequest.METHOD_POST = 'POST';

HttpRequest.prototype.setMethod = function(method) {
    this.method = method;
    return this;
};

HttpRequest.prototype.setBody = function(body) {
    if (typeof body === 'object') {
        body = JSON.stringify(body);
    }

    this.body = body;
    return this;
};

HttpRequest.prototype.setResponseParser = function(responseParser) {
    if (typeof responseParser !== 'function') return;

    this.responseParser = responseParser;
    return this;
};

HttpRequest.prototype.send = function(callback) {
    this.request.addEventListener('load', function() {
        if (this.responseParser) {
            callback(this.responseParser(this.request.responseText));
        } else {
            callback(this.request.responseText);
        }
    }, false);

    this.request.open(this.method, this.url, true);
    this.request.send(this.body);
    return this;
};

Walaupun kami memperkenalkan kod lain, ini lebih mudah dijelaskan dengan betul. Anda boleh membaca lebih lanjut mengenai Janji di sini: JavaScript Menjadi Asynchronous (dan Hebat)

ES6/ES2015

Jika anda memahami spesifikasi ES2015, anda mungkin menyedari bahawa semua contoh kod dalam artikel ini adalah versi yang lebih lama (kecuali objek janji). Walaupun ES6 memberikan kita ciri -ciri yang kuat, masih terdapat beberapa isu dengan kebolehbacaan.

sintaks anak panah lemak mentakrifkan fungsi yang mewarisi nilai ini dari skop induknya. Sekurang -kurangnya, itulah sebabnya ia direka. Ia juga menggoda untuk menggunakannya untuk menentukan fungsi biasa.

new HttpRequest('/users')
    .setResponseParser(JSON.parse)
    .send(function(users) {
        // 对用户执行某些操作
    });

new HttpRequest('/posts')
    .setResponseParser(JSON.parse)
    .send(function(posts) {
        // 对帖子执行某些操作
    });

// 创建一个新用户
new HttpRequest('/user')
    .setMethod(HttpRequest.METHOD_POST)
    .setBody({
        name: 'Tim',
        email: 'info@example.com'
    })
    .setResponseParser(JSON.parse)
    .send(function(user) {
        // 对新用户执行某些操作
    });

Satu lagi contoh ialah sintaks yang lain dan menyebarkan.

function getApiUrl() { /* ... */ }
function setRequestMethod() { /* ... */ }
function findItemsById(n) { /* ... */ }
function hideSearchForm() { /* ... */ }

Maksud saya, spesifikasi ES2015 memperkenalkan banyak sintaks yang berguna tetapi tidak jelas, kadang-kadang mengelirukan, yang menjadikannya mudah disalahgunakan dalam kod satu baris. Saya tidak mahu menghalang ciri -ciri ini daripada digunakan. Saya berharap untuk menggalakkan berhati -hati untuk menggunakannya.

Kesimpulan

Di setiap peringkat projek, ingatlah untuk memastikan kod itu boleh dibaca dan dikekalkan. Segala -galanya dari sistem fail ke pilihan sintaks kecil adalah penting. Terutama dalam satu pasukan, sukar untuk sentiasa menguatkuasakan semua peraturan. Kajian kod boleh membantu, tetapi masih ada ruang untuk kesilapan manusia. Nasib baik, terdapat beberapa alat yang dapat membantu anda melakukan ini!

• jshint - Pemeriksa bahasa JavaScript untuk menyimpan kod bebas ralat
• idiomatic - standard gaya kod popular, tetapi anda boleh menyimpang dari
• EditorConfig - mentakrifkan gaya kod di seluruh editor

Selain alat kualiti dan gaya kod, terdapat alat yang boleh membuat sebarang kod lebih mudah dibaca. Cuba sintaks yang berbeza menonjolkan tema, atau cuba gunakan minimap untuk melihat gambaran keseluruhan skrip (atom, kurungan).

Apa pendapat anda tentang menulis kod yang boleh dibaca dan dikekalkan? Saya ingin mendengar pendapat anda dalam komen di bawah.

Soalan Lazim Mengenai Kod Boleh Dibaca

Kenapa mesti kod mudah dibaca untuk manusia?

Pembacaan kod adalah penting untuk sebab -sebab berikut. Pertama, ia menjadikan kod lebih mudah difahami, debug dan mengekalkan. Apabila kod itu boleh dibaca, lebih mudah bagi pemaju lain untuk memahami peranan kod, yang sangat penting dalam persekitaran kerjasama. Kedua, kod yang sangat mudah dibaca lebih cenderung betul. Sekiranya pemaju dapat dengan mudah memahami kod tersebut, tidak mungkin mereka akan memperkenalkan kesilapan apabila mengubah suai kod tersebut. Akhirnya, kod yang sangat mudah dibaca lebih mudah untuk diuji. Jika kod itu jelas dan ringkas, lebih mudah untuk menentukan apa yang perlu diuji dan bagaimana untuk mengujinya.

Apa yang menjadikan bahasa pengaturcaraan mudah dibaca?

Bahasa dianggap mudah dibaca jika ia mempunyai sintaks yang jelas dan ringkas, menggunakan pengenal yang bermakna, dan mengandungi komen yang menjelaskan kesan kod. Bahasa peringkat tinggi seperti Python dan Ruby sering dianggap mudah dibaca kerana mereka menggunakan sintaks seperti bahasa Inggeris dan membolehkan nama pembolehubah yang jelas dan jelas. Walau bagaimanapun, ia juga mungkin untuk meningkatkan kebolehbacaan bahasa peringkat rendah seperti C atau Java melalui amalan pengekodan yang baik seperti lekukan konsisten, penggunaan ruang, dan anotasi yang komprehensif.

Bagaimanakah fungsi mengurangkan jumlah kod?

Fungsi

boleh mengurangkan jumlah kod dengan membenarkan pemaju menggunakannya semula. Daripada menulis kod yang sama beberapa kali, tulis fungsi sekali dan kemudian panggilnya apabila anda perlu melaksanakan tugas tertentu. Ini bukan sahaja menjadikan kod lebih pendek dan lebih mudah dibaca, tetapi juga menjadikan kod lebih mudah untuk mengekalkan dan debug, kerana sebarang perubahan hanya perlu dibuat di satu tempat.

Apakah perbezaan antara kod mesin dan bahasa peringkat tinggi?

Kod mesin adalah bahasa pengaturcaraan peringkat terendah yang terdiri daripada kod binari yang boleh dilaksanakan secara langsung oleh pemproses pusat komputer (CPU). Bahasa peringkat tinggi, sebaliknya, lebih dekat dengan bahasa manusia dan menghendaki mereka ditukar menjadi kod mesin oleh pengkompil atau penterjemah sebelum pelaksanaan. Bahasa peringkat tinggi sering lebih mudah dibaca dan ditulis, dan mereka menyediakan lebih banyak abstraksi dengan perkakasan, menjadikannya lebih mudah untuk pelabuhan antara pelbagai jenis mesin.

bagaimana penterjemah dan pengkompil berfungsi?

Jurubahasa dan penyusun adalah alat untuk menukar bahasa peringkat tinggi ke dalam kod mesin. Jurubahasa menerjemahkan dan melaksanakan baris kod demi baris, yang membolehkan pengekodan interaktif dan debugging. Walau bagaimanapun, ini mungkin lebih perlahan daripada menyusun kod. Sebaliknya, pengkompil menukarkan keseluruhan program ke dalam kod mesin sebelum pelaksanaan, yang boleh meningkatkan kelajuan pelaksanaan. Walau bagaimanapun, sebarang kesilapan kod hanya boleh ditemui selepas keseluruhan program disusun.

Apakah bahasa pemasangan?

Bahasa pemasangan adalah bahasa pengaturcaraan peringkat rendah yang menggunakan kod mnemonik untuk mewakili arahan kod mesin. Setiap bahasa perhimpunan adalah khusus untuk seni bina komputer tertentu. Walaupun lebih mudah dibaca daripada kod mesin, masih sukar untuk dibaca dan ditulis daripada bahasa peringkat tinggi. Walau bagaimanapun, ia membolehkan kawalan langsung perkakasan, yang sangat berguna dalam beberapa kes.

Bagaimana untuk meningkatkan kebolehbacaan kod?

Terdapat beberapa cara untuk meningkatkan kebolehbacaan kod. Kaedah ini termasuk menggunakan pembolehubah yang bermakna dan nama -nama fungsi, yang memaparkan kod secara konsisten, memisahkan bahagian yang berlainan kod dengan ruang, dan mengandungi komen yang menjelaskan peranan kod. Ia juga penting untuk mengikuti konvensyen dan amalan terbaik bahasa pengaturcaraan yang anda gunakan.

Apakah peranan yang dimainkan oleh anotasi dalam membuat kod boleh dibaca?

Komen memainkan peranan penting dalam membuat kod boleh dibaca. Mereka memberikan penjelasan mengenai fungsi kod, sebab -sebab mengapa keputusan tertentu dibuat, dan bagaimana bahagian kod kompleks berfungsi. Ini boleh sangat membantu pemaju lain yang perlu memahami dan menggunakan kod anda. Walau bagaimanapun, adalah penting untuk membuat komen ringkas dan relevan dan mengemas kini mereka apabila kod berubah.

Bagaimanakah kod yang sangat mudah dibaca mempengaruhi kerjasama?

Kod yang sangat mudah dibaca sangat memudahkan kerjasama. Apabila kod mudah dibaca, lebih mudah bagi pemaju lain untuk memahami dan melibatkan diri dalam sumbangan. Ini amat penting dalam projek -projek besar di mana pelbagai pemaju bekerja di bahagian yang berlainan dari asas kod. Kod yang boleh dibaca juga menjadikannya lebih mudah untuk mendapatkan ahli pasukan baru ke dalam kumpulan kerana mereka dapat dengan cepat memahami apa kod dan bagaimana ia berfungsi.

Bagaimanakah kod yang sangat mudah dibaca mempengaruhi kualiti perisian?

Kod yang sangat mudah dibaca dapat meningkatkan kualiti perisian dengan ketara. Apabila kod mudah dibaca, lebih mudah untuk melihat dan menetapkan kesilapan dan pastikan kod itu melakukan apa yang harus dilakukan. Ia juga memudahkan untuk mengekalkan dan meningkatkan perisian dari masa ke masa, kerana ia jelas menggambarkan peranan setiap bahagian kod. Ini boleh membawa kepada perisian yang lebih dipercayai, cekap dan lebih kuat.

Atas ialah kandungan terperinci Kepentingan menulis kod yang dapat dibaca oleh manusia. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!