Để loại bỏ tận gốc triệt để tình trạng "Hardcode" trong dự án phần mềm, các kỹ sư thường áp dụng nguyên tắc DRY (Don't Repeat Yourself - Đừng bao giờ lặp lại chính mình).
Dưới đây là 5 kỹ thuật thực chiến tuyệt vời nhất để biến một mã nguồn "đổ bê tông cứng" thành "linh hoạt và mềm dẻo":
1. Đóng gói thành Component dùng chung (UI Abstraction)
Áp dụng khi: Thấy một đoạn giao diện (HTML/CSS) xuất hiện giống nhau từ 2 lần trở lên.
- Cách làm: Gom đoạn giao diện đó vào một thư mục dùng chung (như
src/shared/components). Khi cần sử dụng ở các trang web, chỉ cần gọi tên Component đó ra kèm theo dữ liệu truyền vào. - Ví dụ: Thay vì copy-paste 100 dòng HTML của chức năng tìm kiếm, hãy gom nó thành thẻ
<FilterBarPremium />.
2. Định nghĩa Hằng số (Constants & Enums)
Áp dụng khi: Một giá trị (Văn bản, Số liệu, Phân loại) được dùng đi dùng lại nhiều nơi.
- Cách làm: Tạo ra một file chuyên chứa các giá trị này (thường lưu ở thư mục
constants/hoặcschema/), đặt tên biến với chữ IN HOA để dễ nhận dạng. - Ví dụ: Ở dự án Vĩnh Phát ERP của bạn, thay vì gõ chữ "Đã hủy" ở 10 chỗ khác nhau gây rủi ro sai chính tả, lập trình viên sẽ khai báo hằng số tập trung:
Vào giao diện chỉ cần gọi:export const ORDER_STATUS = { DRAFT: "Bản nháp", APPROVED: "Đã duyệt", CANCELLED: "Đã hủy" };<span>{ORDER_STATUS.CANCELLED}</span>.
3. Tham số hóa (Sử dụng Props / Arguments)
Áp dụng khi: Hàm (Function) hoặc Component bị trói buộc vào một logic duy nhất.
- Cách làm: Bắt buộc Component không được tự sinh ra dữ liệu, nó phải "há miệng chờ sung", đứng đợi dữ liệu do máy chủ (Component cha) ném vào thông qua tham số (Props).
- Ví dụ: Thay vì viết hàm
KpiCardluôn luôn hiển thị con số100, hãy để thẻKpiCardnhận biếnvalue. Tùy trang web ném số10hay số1000vào thì nó sẽ hiện ra số đó.
4. Sử dụng Biến môi trường (Environment Variables .env)
Áp dụng khi: Có các thông tin mang tính cấu hình máy chủ, bảo mật.
- Cách làm: Tuyệt đối không để Token bảo mật, Mật khẩu, hay các đường link API nằm lộ thiên trong code. Hãy khai báo chúng ở mội file tên là
.env(file này thường được giấu không đưa lên Github). - Ví dụ: Khai báo url kết nối API là
process.env.NEXT_PUBLIC_DATABASE_URLthay vì gõ thẳng đường linkhttps://api.vinhphat.com. Lợi ích là lúc chạy trên máy tính lập trình nó tự gọi API local, nhưng lúc cài lên máy chủ thực tế nó sẽ tự nảy chữ sang hệ thống vận hành thực mà không cần sửa code.
5. Dịch thuật đa ngôn ngữ (i18n / Localization)
Áp dụng khi: Bạn có tham vọng phần mềm đáp ứng người dùng toàn cầu.
- Cách làm: Toàn bộ chữ viết hiển thị cho người xem (Cảnh báo nhắc nhở, tên Tiêu đề) phải được bóc tách ra một cuốn từ điển JSON.
- Ví dụ: Thay vì gõ
<button>Lưu Lại</button>, hãy gõ<button>{ translate('btn.save') }</button>.
Tư duy lập trình Premium: "Nếu sếp yêu cầu đổi màu của nút bấm hay đổi một chữ cái sai chính tả, tôi có thể xử lý xong trong vòng 1 giây chỉ bằng việc bấm nút lưu chữa tại 1 tệp duy nhất thay vì 1 ngày rà soát 100 tệp tin không?" Nếu câu trả lời là CÓ, hệ thống đó đã xóa bỏ định kiến Hardcode.
#Programming #CleanCode #SoftwareEngineering #TechTips #WebDevelopment #CodingBestPractices #DRY