Sử dụng câu lệnh if là một cách viết mã rườm rà và nên tránh bất cứ khi nào có thể [trong hầu hết các trường hợp, điều này gần như xảy ra 100% thời gian]
Đừng hiểu sai ý tôi, 5 câu lệnh if rất hữu ích trong một số trường hợp nhất định và đều có lý do của nó. Tuy nhiên, việc lạm dụng chúng ở những nơi có thể tránh được sẽ không chỉ khiến cuộc sống của bạn trở nên khó khăn hơn khi đến lúc phải xem lại mã sau vài tháng, mà còn ảnh hưởng đến thời gian cần thiết để nhà phát triển hiểu được ngữ cảnh của . Điều này làm gián đoạn “dòng chảy” và góp phần làm giảm hiệu quả tổng thể. Càng đơn giản càng đẹp
Nhìn vào đoạn mã bên dưới, chúng tôi đang truy xuất thẻ từ cơ sở dữ liệu theo số thẻ được mã hóa và trả về phản hồi xác thực dựa trên các điều kiện nhất định
async validateCard[encryptedCardNumber] {
const card = await this.lookupCard[encryptedCardNumber];
if [!card] {
console.log[NotFoundResponse.message];
return NotFoundResponse;
}
else if [card.isBlacklisted] {
console.log[BlacklistedReponse.message];
return BlacklistedResponse;
}
else if [card.isDeleted] {
console.log[DeletedResponse.message];
return DeletedResponse;
}
else if [card.status !== CardStatus.active] {
console.log[InactiveResponse.message];
return InactiveResponse;
}
else {
console.log[ValidResponse.message];
return ValidResponse;
}
}
Việc có nhiều câu lệnh if này không chỉ đòi hỏi khá nhiều nỗ lực để giải mã, mà khi có thêm nhiều điều kiện, chúng tôi sẽ sớm cuộn lên và cuộn xuống để đảm bảo đáp ứng từng trường hợp, đổ thêm dầu vào lửa. Bên cạnh đó, dường như cũng có sự trùng lặp mã có thể được trích xuất để bảo trì
Ví dụ dưới đây làm điều đó. Nó thay thế vô số câu lệnh if bằng Logical AND và Logical_OR [đánh giá ngắn mạch], gọn gàng và dễ hiểu hơn rất nhiều. Đối với những người không quen thuộc với sự tách rời và kết hợp, tôi thực sự khuyên bạn nên tìm kiếm nó, nhưng đây là một mô tả ngắn gọn
- Logic AND [
&&] đánh giá các toán hạng từ trái sang phải, trả về ngay giá trị của toán hạng giả đầu tiên mà nó gặp phải; - Toán tử logic OR [
||] [phân tách logic] cho một tập hợp toán hạng là đúng khi và chỉ khi một hoặc nhiều toán hạng của nó là đúng. Với đánh giá ngắn mạch, nó chỉ đơn giản trả về biểu thức trung thực đầu tiên
async validateCard[encryptedCardNumber] {
const card = await this.lookupCard[encryptedCardNumber];
const response =
!card && NotFoundResponse ||
card.isDeleted && DeletedResponse ||
card.isBlacklisted && BlacklistedResponse ||
card.status !== cardStatus.active && InvalidStatus ||
ValidResponse;
console.log[response.message];
return response;
}
Khi yêu cầu kinh doanh thay đổi, mã cũng vậy. Trong một số trường hợp có thể loại bỏ mã hoàn toàn, nhưng trong một số trường hợp khác, nó mở rộng sang những gì đã có. Đây là một câu hỏi phỏng vấn phổ biến được hỏi và liên quan đến khả năng tạo ra một giải pháp có thể mở rộng của bạn
Tạo hàm chuyển đổi một số đã cho trong khoảng từ 1–10 thành từ
Đơn giản phải không?
function convertIntegerToText[num] {
if [num === 1] return "one";
if [num === 2] return "two";
if [num === 3] return "three";
// ...
if [num === 10] return "ten";
}
Nhưng nếu sau đó họ nói điều này,
Các yêu cầu đã thay đổi. Bây giờ chúng tôi muốn sử dụng chức năng này để chuyển đổi các số từ 1–100 thành từ
bạn sẽ làm gì bây giờ?
Cách tiếp cận tốt hơn là nghĩ ra một giải pháp có thể mở rộng ngay từ đầu. Một nguyên tắc cơ bản quan trọng cần ghi nhớ khi thiết kế, kiến trúc, viết và bảo trì mã là thời gian ảnh hưởng như thế nào đến tính bền vững của phần mềm và cách làm cho mã của bạn linh hoạt theo thời gian
Do đó, một giải pháp có thể mở rộng là một mã không có câu lệnh if nào hoặc một vài câu lệnh có thể bao gồm phần lớn các trường hợp, nếu không phải tất cả, với yêu cầu sửa đổi tối thiểu hoặc không cần sửa đổi
const ONES = ["", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
const TEENS = ["ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen"];
const TENS = ["", "", "twenty", "thirty", "fourty", "fifty", "sixty", "seventy", "eighty", "ninety"];
function convertIntegerToText[num] {
if [num < 20]
return ONES[num] ?? TEENS[num - 10];
if [num < 100]
return `${TENS[Math.floor[num / 10]]} ${convertIntegerToText[num % 10]}`;
if [num < 1000]
return `${ONES[Math.floor[num / 100]]} hundred ${convertIntegerToText[num % 100]}`;
throw new Error["Number too high"];
}
Để kết thúc mọi thứ, hãy xem đoạn mã bên dưới và tự đánh giá xem đoạn mã nào bạn cho là có khả năng mở rộng cao, dễ bảo trì, dễ đọc hơn và sẽ giúp bạn duy trì trạng thái trôi chảy nếu bạn bắt gặp nó?
// home.jsx
function getCompanyTemplate[company] {
if [company === "apple"] {
return
}
if [company === "samsung"] {
return
}
if [company === "sony"] {
return
}
if [company === "lg"] {
return
}
}
// OR
// index.jsx
export const templates = {
apple: ,
samsung: ,
sony: ,
lg: ,
}
// home.jsx
import { templates } from "./index"
function getCompanyTemplate[company] {
return templates[company];
}
Bài viết trước của tôi giới thiệu một giải pháp giao diện người dùng có thể mở rộng chuyên sâu mà không cần bất kỳ câu lệnh if nào. Hãy chắc chắn để kiểm tra nó ra