Đặt tên biến và function dễ hiểu trong Javascript và PHP

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.