Các quy tắc đặt tên biến, function, class là những thứ không thể tách rời trong công việc hàng ngày. Nếu bạn đặt tên dễ hiểu, rõ ràng, và theo đúng quy tắc, kết quả là code sạch sẽ và dễ hiểu hơn với những lập trình viên khác tham gia dự án.
Quy tắc đặt tên trong Javascript
Đặt tên biến sử dụng camelCase
const slideoutMenu = document.querySelector('.slideout-menu')
camelCase là quy tắc đặt từ cạnh nhau, từ đầu tiên viết thường, từ thứ hai trở đi viết hoa chữ cái đầu tiên.
Prefix JS
Khi gọi đến một đối tượng DOM, hãy thêm riêng prefix .js-
cho nó. Điều này giúp tránh conflict với style, trong trường hợp bạn cần đổi tên class CSS.
const slideOutMenu = document.querySelector('.js-slideout-menu')
Phân biệt DOM và Object
Khi gọi tới một đối tượng là DOM, hãy gán đuôi el
(element) cho nó. Điều này giúp bạn khi đọc code thì phân biệt được ngay đâu là DOM element, và đâu là 1 object, định hình xử lý nhanh hơn.
// DOM
const slideOutMenuEl = document.querySelector('.js-slideout-menu')
// Object
const slideOutState = {
'responsive': false
}
Đặt tên function sử dụng động từ hoặc tính từ kèm theo
Nhiều function có ý nghĩa về mặt hành động (vd như kích hoạt, bật tắt), hoặc có trạng thái (vd như ready – sẵn sàng, change – thay đổi), thì cần gán 1 động từ hay tính từ vào để bổ sung ý nghĩa.
const activateMenu = () => menuEl.classList.add('is-active')
const deactivateMenu = () => menuEl.classList.remove('is-active')
const onSliderReady = () => {
sliderEl.classList.add('is-ready')
}
const afterFontLoaded = () => {
body.classList.add('font-loaded')
}
Quy tắc đặt tên trong PHP
Đặt tên biến và function sử dụng snakeCase
$stores = array();
$available_stores = 0;
$posts_per_page = 9;
snackCase là đặt tên các biến theo dạng viết thường, phân cách bởi dấu gạch dưới.
Đặt tên biến constant theo Screaming Case
define('DB_HOST', 'localhost');
define('DB_USER', 'db_user');
Các biến constant thì không cần dấu $
ở đầu nhé.
Đặt tên function dùng snackCase
Không có đúng hay sai khi sử dụng theo camelCase hay snackCase. Tuy nhiên, thường nếu bạn lập trình với WordPress thì sẽ dùng cách viết snackCase được team quy ước tại đây.
function get_current_query_url() {}
Đặt tên function nằm ngoài Class thì nên có prefix.
function codetot_get_post_meta() {}
Đặt tên function lưu ý sử dụng get_
hoặc the_
Cái này tham khảo từ bên WordPress. Các function có chứa get_
được hiểu là return về string hoặc object hoặc array, trong khi the_
cùng tên sẽ hoạt động tương tự, nhưng echo
luôn.
function codetot_get_user_avatar_url($user) {
return wp_get_attachment_image_src($user->avatar);
}
$avatar_url = codetot_get_user_avatar_url();
function codetot_the_user_avatar($user) {
echo wp_get_attachment_image($user->avatar);
}
// Usage in the template
<div class="user-avatar">
<?php codetot_the_user_avatar(); ?>
</div>
Đặt tên Class PHP uppercase chữ cái đầu, ngăn cách bởi dấu _
class Hello_Word {}
Đặt tên file PHP của class
plugins/hello-dolly.php
plugins/class-hello-dolly.php
plugins/abstract-hello-dolly.php
Thêm tiền bố class
, abstract
, interface
cho các class tương ứng.
Khi sử dụng file PHP làm template, nên gán đằng sau string là page
hoặc template
template-parts/search-template.php
templates/about-page.php
Kết luận
Nếu bạn muốn code dễ đọc, dễ hiểu và không cần mất công tra cứu, thì việc sử dụng các quy tắc ở trên mà Code Tốt chia sẻ sẽ giúp tiết kiệm thời gian nhiều đấy.