Nguyên tắc công nghệ phần mềm, từ Robert C. Cuốn sách của Martin Clean Code, được điều chỉnh cho JavaScript. Đây không phải là một hướng dẫn phong cách. Đó là hướng dẫn tạo phần mềm có thể đọc được, tái sử dụng và có thể tái cấu trúc bằng JavaScript
Không phải mọi nguyên tắc ở đây đều phải được tuân thủ nghiêm ngặt và thậm chí còn ít hơn nữa sẽ được thống nhất trên toàn cầu. Đây là những nguyên tắc và không có gì hơn, nhưng chúng là những nguyên tắc được soạn thảo qua nhiều năm kinh nghiệm tập thể bởi các tác giả của Clean Code
Nghề công nghệ phần mềm của chúng tôi mới hơn 50 tuổi một chút và chúng tôi vẫn đang học hỏi rất nhiều. Khi kiến trúc phần mềm cũ kỹ như chính kiến trúc, có lẽ khi đó chúng ta sẽ có những quy tắc khó tuân theo hơn. Hiện tại, hãy để những nguyên tắc này đóng vai trò là tiêu chuẩn để đánh giá chất lượng của mã JavaScript mà bạn và nhóm của bạn tạo ra
Một điều nữa. biết những điều này sẽ không giúp bạn trở thành một nhà phát triển phần mềm tốt hơn ngay lập tức và làm việc với họ trong nhiều năm không có nghĩa là bạn sẽ không phạm sai lầm. Mỗi đoạn mã bắt đầu như một bản nháp đầu tiên, giống như đất sét ướt được định hình thành hình thức cuối cùng của nó. Cuối cùng, chúng tôi khắc phục những điểm không hoàn hảo khi xem xét nó với các đồng nghiệp của mình. Đừng đánh bại bản thân vì những bản nháp đầu tiên cần cải thiện. Thay vào đó hãy đánh bại mã
Biến
Sử dụng tên biến có ý nghĩa và có thể phát âm được
Xấu
const yyyymmdstr = moment[].format["YYYY/MM/DD"];
Tốt
const currentDate = moment[].format["YYYY/MM/DD"];
⬆quay lại đầu trang
Sử dụng cùng một từ vựng cho cùng một loại biến
Xấu
getUserInfo[]; getClientData[]; getCustomerRecord[];
Tốt
getUser[];
⬆quay lại đầu trang
Sử dụng tên có thể tìm kiếm
Chúng tôi sẽ đọc nhiều mã hơn chúng tôi sẽ viết. Điều quan trọng là mã chúng tôi viết phải có thể đọc và tìm kiếm được. Bằng cách không đặt tên cho các biến có ý nghĩa để hiểu chương trình của chúng tôi, chúng tôi đã làm tổn thương độc giả của mình. Làm cho tên của bạn có thể tìm kiếm được. Công cụ như bạn thân. js và ESLint có thể giúp xác định các hằng số không tên
Xấu
// What the heck is 86400000 for? setTimeout[blastOff, 86400000];
Tốt
// Declare them as capitalized named constants. const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout[blastOff, MILLISECONDS_PER_DAY];
⬆quay lại đầu trang
Sử dụng các biến giải thích
Xấu
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; saveCityZipCode[ address.match[cityZipCodeRegex][1], address.match[cityZipCodeRegex][2] ];
Tốt
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; const [_, city, zipCode] = address.match[cityZipCodeRegex] || []; saveCityZipCode[city, zipCode];
⬆quay lại đầu trang
Tránh bản đồ tinh thần
Rõ ràng là tốt hơn ngầm
Xấu
________số 8
Tốt
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[location => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... dispatch[location]; }];
⬆quay lại đầu trang
Không thêm ngữ cảnh không cần thiết
Nếu tên lớp/đối tượng của bạn cho bạn biết điều gì đó, đừng lặp lại điều đó trong tên biến của bạn
Xấu
const currentDate = moment[].format["YYYY/MM/DD"];0
Tốt
const currentDate = moment[].format["YYYY/MM/DD"];1
⬆quay lại đầu trang
Sử dụng các tham số mặc định thay vì ngắn mạch hoặc điều kiện
Các thông số mặc định thường sạch hơn so với đoản mạch. Xin lưu ý rằng nếu bạn sử dụng chúng, hàm của bạn sẽ chỉ cung cấp giá trị mặc định cho đối số
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[location => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... dispatch[location]; }];2. Các giá trị "falsy" khác như
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[location => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... dispatch[location]; }];3,
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[location => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... dispatch[location]; }];4,
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[location => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... dispatch[location]; }];5,
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[location => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... dispatch[location]; }];6,
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[location => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... dispatch[location]; }];7 và
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[location => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... dispatch[location]; }];8 sẽ không được thay thế bằng giá trị mặc định
Xấu
const currentDate = moment[].format["YYYY/MM/DD"];2
Tốt
const currentDate = moment[].format["YYYY/MM/DD"];3
⬆quay lại đầu trang
Chức năng
Đối số chức năng [2 hoặc ít hơn là lý tưởng]
Giới hạn số lượng tham số chức năng là cực kỳ quan trọng vì nó giúp kiểm tra chức năng của bạn dễ dàng hơn. Có nhiều hơn ba dẫn đến bùng nổ tổ hợp, trong đó bạn phải kiểm tra hàng tấn trường hợp khác nhau với mỗi đối số riêng biệt
Một hoặc hai đối số là trường hợp lý tưởng và nên tránh ba đối số nếu có thể. Bất cứ điều gì nhiều hơn thế nên được củng cố. Thông thường, nếu bạn có nhiều hơn hai đối số thì hàm của bạn đang cố gắng thực hiện quá nhiều. Trong trường hợp không phải vậy, hầu hết thời gian, một đối tượng cấp cao hơn sẽ đủ làm đối số
Vì JavaScript cho phép bạn tạo các đối tượng một cách nhanh chóng mà không cần nhiều bản tóm tắt lớp, nên bạn có thể sử dụng một đối tượng nếu bạn thấy mình cần nhiều đối số
Để làm rõ những thuộc tính mà hàm mong đợi, bạn có thể sử dụng cú pháp phá hủy ES2015/ES6. Điều này có một vài lợi thế
- Khi ai đó nhìn vào chữ ký hàm, sẽ ngay lập tức rõ ràng những thuộc tính nào đang được sử dụng
- Nó có thể được sử dụng để mô phỏng các tham số được đặt tên
- Việc hủy cấu trúc cũng sao chép các giá trị nguyên thủy đã chỉ định của đối tượng đối số được truyền vào hàm. Điều này có thể giúp ngăn ngừa tác dụng phụ. Ghi chú. các đối tượng và mảng bị hủy cấu trúc khỏi đối tượng đối số KHÔNG được sao chép
- Linters có thể cảnh báo bạn về các thuộc tính không sử dụng, điều này là không thể nếu không phá hủy
Xấu
const currentDate = moment[].format["YYYY/MM/DD"];4
Tốt
const currentDate = moment[].format["YYYY/MM/DD"];5
⬆quay lại đầu trang
Chức năng nên làm một việc
Đây là quy tắc quan trọng nhất trong công nghệ phần mềm. Khi các chức năng làm nhiều hơn một việc, chúng sẽ khó soạn thảo, kiểm tra và suy luận hơn về. Khi bạn có thể cô lập một chức năng chỉ với một hành động, nó có thể được cấu trúc lại dễ dàng và mã của bạn sẽ đọc rõ ràng hơn nhiều. Nếu bạn không học được điều gì khác từ hướng dẫn này ngoài điều này, thì bạn sẽ đi trước nhiều nhà phát triển
Xấu
const currentDate = moment[].format["YYYY/MM/DD"];6
Tốt
const currentDate = moment[].format["YYYY/MM/DD"];7
⬆quay lại đầu trang
Tên chức năng nên nói những gì họ làm
Xấu
const currentDate = moment[].format["YYYY/MM/DD"];8
Tốt
const currentDate = moment[].format["YYYY/MM/DD"];9
⬆quay lại đầu trang
Các chức năng chỉ nên là một mức độ trừu tượng
Khi bạn có nhiều mức trừu tượng, chức năng của bạn thường hoạt động quá nhiều. Việc chia tách các chức năng dẫn đến khả năng sử dụng lại và kiểm tra dễ dàng hơn
Xấu
getUserInfo[]; getClientData[]; getCustomerRecord[];0
Tốt
getUserInfo[]; getClientData[]; getCustomerRecord[];1
⬆quay lại đầu trang
Xóa mã trùng lặp
Cố gắng hết sức để tránh mã trùng lặp. Mã trùng lặp là không tốt vì điều đó có nghĩa là có nhiều hơn một nơi để thay đổi điều gì đó nếu bạn cần thay đổi logic nào đó
Hãy tưởng tượng nếu bạn điều hành một nhà hàng và bạn theo dõi hàng tồn kho của mình. tất cả cà chua, hành, tỏi, gia vị, v.v. Nếu bạn có nhiều danh sách mà bạn giữ danh sách này, thì tất cả phải được cập nhật khi bạn phục vụ một món ăn có cà chua trong đó. Nếu bạn chỉ có một danh sách, thì chỉ có một nơi để cập nhật
Thông thường, bạn có mã trùng lặp vì bạn có hai hoặc nhiều thứ hơi khác nhau, có nhiều điểm chung, nhưng sự khác biệt của chúng buộc bạn phải có hai hoặc nhiều chức năng riêng biệt thực hiện nhiều việc giống nhau. Xóa mã trùng lặp có nghĩa là tạo một bản tóm tắt có thể xử lý tập hợp các thứ khác nhau này chỉ bằng một hàm/mô-đun/lớp
Lấy quyền trừu tượng là rất quan trọng, đó là lý do tại sao bạn nên tuân theo các nguyên tắc RẮN được trình bày trong phần Lớp học. Tóm tắt xấu có thể tệ hơn mã trùng lặp, vì vậy hãy cẩn thận. Đã nói điều này, nếu bạn có thể tạo ra một bản tóm tắt tốt, hãy làm điều đó. Đừng lặp lại chính mình, nếu không bạn sẽ thấy mình cập nhật nhiều nơi bất cứ lúc nào bạn muốn thay đổi một điều
Xấu
getUserInfo[]; getClientData[]; getCustomerRecord[];2
Tốt
getUserInfo[]; getClientData[]; getCustomerRecord[];3
⬆quay lại đầu trang
Đặt đối tượng mặc định với Object. giao phó
Xấu
getUserInfo[]; getClientData[]; getCustomerRecord[];4
Tốt
getUserInfo[]; getClientData[]; getCustomerRecord[];5
⬆quay lại đầu trang
Không sử dụng cờ làm tham số chức năng
Cờ cho người dùng của bạn biết rằng chức năng này thực hiện nhiều việc. Chức năng nên làm một việc. Tách các chức năng của bạn nếu chúng đang theo các đường dẫn mã khác nhau dựa trên boolean
Xấu
getUserInfo[]; getClientData[]; getCustomerRecord[];6
Tốt
getUserInfo[]; getClientData[]; getCustomerRecord[];7
⬆quay lại đầu trang
Tránh Tác Dụng Phụ [phần 1]
Một hàm tạo ra tác dụng phụ nếu nó thực hiện bất kỳ điều gì khác ngoài việc lấy một giá trị và trả về một hoặc nhiều giá trị khác. Một tác dụng phụ có thể là ghi vào một tệp, sửa đổi một số biến toàn cầu hoặc vô tình chuyển tất cả số tiền của bạn cho một người lạ
Bây giờ, đôi khi bạn cần phải có tác dụng phụ trong một chương trình. Giống như ví dụ trước, bạn có thể cần ghi vào một tệp. Những gì bạn muốn làm là tập trung vào nơi bạn đang làm việc này. Không có nhiều hàm và lớp ghi vào một tệp cụ thể. Có một dịch vụ làm điều đó. Một và chỉ một
Điểm chính là để tránh những cạm bẫy phổ biến như chia sẻ trạng thái giữa các đối tượng mà không có bất kỳ cấu trúc nào, sử dụng các loại dữ liệu có thể thay đổi có thể được ghi vào bởi bất kỳ thứ gì và không tập trung vào nơi xảy ra tác dụng phụ của bạn. Nếu bạn làm được điều này, bạn sẽ hạnh phúc hơn đại đa số các lập trình viên khác
Xấu
getUserInfo[]; getClientData[]; getCustomerRecord[];8
Tốt
getUserInfo[]; getClientData[]; getCustomerRecord[];9
⬆quay lại đầu trang
Tránh Tác Dụng Phụ [phần 2]
Trong JavaScript, một số giá trị là không thể thay đổi [bất biến] và một số có thể thay đổi [có thể thay đổi]. Đối tượng và mảng là hai loại giá trị có thể thay đổi, vì vậy điều quan trọng là phải xử lý chúng cẩn thận khi chúng được truyền dưới dạng tham số cho hàm. Hàm JavaScript có thể thay đổi thuộc tính của đối tượng hoặc thay đổi nội dung của mảng, điều này có thể dễ dàng gây ra lỗi ở nơi khác
Giả sử có một hàm chấp nhận tham số mảng đại diện cho giỏ hàng. Nếu hàm thực hiện thay đổi trong mảng giỏ hàng đó - chẳng hạn bằng cách thêm một mặt hàng để mua - thì bất kỳ hàm nào khác sử dụng cùng mảng
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[location => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... dispatch[location]; }];9 đó sẽ bị ảnh hưởng bởi sự bổ sung này. Điều đó có thể là tuyệt vời, tuy nhiên nó cũng có thể là xấu. Hãy tưởng tượng một tình huống xấu
Người dùng nhấp vào nút "Mua hàng" để gọi hàm
const currentDate = moment[].format["YYYY/MM/DD"];00 tạo ra yêu cầu mạng và gửi mảng
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[location => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... dispatch[location]; }];9 đến máy chủ. Do kết nối mạng kém, chức năng
const currentDate = moment[].format["YYYY/MM/DD"];00 phải tiếp tục thử lại yêu cầu. Bây giờ, điều gì sẽ xảy ra nếu trong thời gian chờ đợi, người dùng vô tình nhấp vào nút "Thêm vào giỏ hàng" trên một mặt hàng mà họ không thực sự muốn trước khi yêu cầu mạng bắt đầu?
Một giải pháp tuyệt vời là hàm
const currentDate = moment[].format["YYYY/MM/DD"];04 luôn sao chép
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[location => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... dispatch[location]; }];9, chỉnh sửa và trả về bản sao. Điều này sẽ đảm bảo rằng các chức năng vẫn đang sử dụng giỏ mua hàng cũ sẽ không bị ảnh hưởng bởi các thay đổi
Hai lưu ý cần đề cập đến phương pháp này
Có thể có trường hợp bạn thực sự muốn sửa đổi đối tượng đầu vào, nhưng khi áp dụng cách lập trình này, bạn sẽ thấy rằng những trường hợp đó khá hiếm. Hầu hết mọi thứ có thể được tái cấu trúc để không có tác dụng phụ
Nhân bản các đối tượng lớn có thể rất tốn kém về hiệu suất. May mắn thay, đây không phải là một vấn đề lớn trong thực tế vì có những thư viện tuyệt vời cho phép cách tiếp cận lập trình này nhanh chóng và không tốn nhiều bộ nhớ như khi bạn sao chép các đối tượng và mảng theo cách thủ công
Xấu
getUser[];0
Tốt
getUser[];1
⬆quay lại đầu trang
Đừng ghi vào các chức năng toàn cầu
Gây ô nhiễm toàn cầu là một cách làm không tốt trong JavaScript vì bạn có thể xung đột với một thư viện khác và người dùng API của bạn sẽ không khôn ngoan hơn cho đến khi họ nhận được một ngoại lệ trong quá trình sản xuất. Hãy nghĩ về một ví dụ. điều gì sẽ xảy ra nếu bạn muốn mở rộng phương thức Array gốc của JavaScript để có một phương thức
const currentDate = moment[].format["YYYY/MM/DD"];06 có thể hiển thị sự khác biệt giữa hai mảng? . Điều gì sẽ xảy ra nếu thư viện kia chỉ sử dụng
const currentDate = moment[].format["YYYY/MM/DD"];06 để tìm sự khác biệt giữa phần tử đầu tiên và phần tử cuối cùng của một mảng?
Xấu
getUser[];2
Tốt
getUser[];3
⬆quay lại đầu trang
Ưu tiên lập trình chức năng hơn lập trình mệnh lệnh
JavaScript không phải là một ngôn ngữ chức năng theo cách của Haskell, nhưng nó có hương vị chức năng đối với nó. Các ngôn ngữ chức năng có thể sạch hơn và dễ kiểm tra hơn. Ưu tiên phong cách lập trình này khi bạn có thể
Xấu
getUser[];4
Tốt
getUser[];5
⬆quay lại đầu trang
Đóng gói điều kiện
Xấu
getUser[];6
Tốt
getUser[];7
⬆quay lại đầu trang
Tránh điều kiện phủ định
Xấu
getUser[];8
Tốt
getUser[];9
⬆quay lại đầu trang
Tránh điều kiện
Điều này có vẻ như là một nhiệm vụ bất khả thi. Khi lần đầu tiên nghe điều này, hầu hết mọi người nói, "làm sao tôi có thể làm bất cứ điều gì nếu không có tuyên bố
const currentDate = moment[].format["YYYY/MM/DD"];10?" . Câu hỏi thứ hai thường là, "điều đó thật tuyệt nhưng tại sao tôi lại muốn làm điều đó?" . một chức năng chỉ nên làm một việc. Khi bạn có các lớp và hàm có câu lệnh
const currentDate = moment[].format["YYYY/MM/DD"];10, bạn đang nói với người dùng rằng hàm của bạn thực hiện nhiều hơn một việc. Hãy nhớ rằng, chỉ cần làm một điều
Xấu
// What the heck is 86400000 for? setTimeout[blastOff, 86400000];0
Tốt
// What the heck is 86400000 for? setTimeout[blastOff, 86400000];1
⬆quay lại đầu trang
Tránh kiểm tra kiểu [phần 1]
JavaScript không được gõ, có nghĩa là các hàm của bạn có thể nhận bất kỳ loại đối số nào. Đôi khi bạn bị cắn bởi sự tự do này và việc kiểm tra kiểu trong các chức năng của bạn trở nên hấp dẫn. Có nhiều cách để tránh phải làm điều này. Điều đầu tiên cần xem xét là các API nhất quán
Xấu
// What the heck is 86400000 for? setTimeout[blastOff, 86400000];2
Tốt
// What the heck is 86400000 for? setTimeout[blastOff, 86400000];3
⬆quay lại đầu trang
Tránh kiểm tra kiểu [phần 2]
Nếu bạn đang làm việc với các giá trị nguyên thủy cơ bản như chuỗi và số nguyên, đồng thời bạn không thể sử dụng tính đa hình nhưng vẫn cảm thấy cần phải kiểm tra kiểu, thì bạn nên cân nhắc sử dụng TypeScript. Nó là một giải pháp thay thế tuyệt vời cho JavaScript thông thường, vì nó cung cấp cho bạn kiểu gõ tĩnh dựa trên cú pháp JavaScript tiêu chuẩn. Vấn đề với JavaScript thông thường kiểm tra kiểu thủ công là để thực hiện tốt nó đòi hỏi quá nhiều chi tiết đến mức "an toàn kiểu" giả tạo mà bạn nhận được không bù đắp cho khả năng đọc bị mất. Giữ cho JavaScript của bạn sạch sẽ, viết các bài kiểm tra tốt và có các đánh giá mã tốt. Mặt khác, hãy làm tất cả những điều đó nhưng với TypeScript [như tôi đã nói, là một sự thay thế tuyệt vời. ]
Xấu
// What the heck is 86400000 for? setTimeout[blastOff, 86400000];4
Tốt
// What the heck is 86400000 for? setTimeout[blastOff, 86400000];5
⬆quay lại đầu trang
Đừng tối ưu hóa quá mức
Các trình duyệt hiện đại thực hiện rất nhiều tối ưu hóa trong thời gian chạy. Rất nhiều lần, nếu bạn đang tối ưu hóa thì bạn chỉ đang lãng phí thời gian của mình. Có nhiều tài nguyên tốt để xem nơi thiếu tối ưu hóa. Nhắm mục tiêu những điều đó trong khi chờ đợi, cho đến khi chúng được sửa chữa nếu chúng có thể được
Xấu
// What the heck is 86400000 for? setTimeout[blastOff, 86400000];6
Tốt
// What the heck is 86400000 for? setTimeout[blastOff, 86400000];7
⬆quay lại đầu trang
Loại bỏ mã chết
Mã chết cũng tệ như mã trùng lặp. Không có lý do gì để giữ nó trong codebase của bạn. Nếu nó không được gọi, hãy loại bỏ nó. Nó sẽ vẫn an toàn trong lịch sử phiên bản của bạn nếu bạn vẫn cần nó
Xấu
// What the heck is 86400000 for? setTimeout[blastOff, 86400000];8
Tốt
// What the heck is 86400000 for? setTimeout[blastOff, 86400000];9
⬆quay lại đầu trang
Đối tượng và cấu trúc dữ liệu
Sử dụng getters và setters
Sử dụng getters và setters để truy cập dữ liệu trên các đối tượng có thể tốt hơn là chỉ tìm kiếm một thuộc tính trên một đối tượng. "Tại sao?" . Vâng, đây là một danh sách không có tổ chức các lý do tại sao
- Khi bạn muốn làm nhiều hơn ngoài việc lấy một thuộc tính đối tượng, bạn không cần phải tra cứu và thay đổi mọi trình truy cập trong cơ sở mã của mình
- Làm cho việc thêm xác thực trở nên đơn giản khi thực hiện
const currentDate = moment[].format["YYYY/MM/DD"];
12 - Đóng gói biểu diễn bên trong
- Dễ dàng thêm ghi nhật ký và xử lý lỗi khi nhận và cài đặt
- Bạn có thể lười tải các thuộc tính của đối tượng, giả sử tải nó từ máy chủ
Xấu
// Declare them as capitalized named constants. const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout[blastOff, MILLISECONDS_PER_DAY];0
Tốt
// Declare them as capitalized named constants. const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout[blastOff, MILLISECONDS_PER_DAY];1
⬆quay lại đầu trang
Làm cho các đối tượng có thành viên riêng
Điều này có thể được thực hiện thông qua các lần đóng [đối với ES5 trở xuống]
Xấu
// Declare them as capitalized named constants. const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout[blastOff, MILLISECONDS_PER_DAY];2
Tốt
// Declare them as capitalized named constants. const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout[blastOff, MILLISECONDS_PER_DAY];3
⬆quay lại đầu trang
Các lớp học
Thích các lớp ES2015/ES6 hơn các hàm đơn giản ES5
Rất khó để có được các định nghĩa phương thức, cấu trúc và kế thừa lớp có thể đọc được cho các lớp ES5 cổ điển. Nếu bạn cần kế thừa [và lưu ý rằng bạn có thể không], thì hãy ưu tiên các lớp ES2015/ES6. Tuy nhiên, hãy ưu tiên các hàm nhỏ hơn các lớp cho đến khi bạn thấy mình cần các đối tượng lớn hơn và phức tạp hơn
Xấu
// Declare them as capitalized named constants. const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout[blastOff, MILLISECONDS_PER_DAY];4
Tốt
// Declare them as capitalized named constants. const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout[blastOff, MILLISECONDS_PER_DAY];5
⬆quay lại đầu trang
Sử dụng chuỗi phương pháp
Mẫu này rất hữu ích trong JavaScript và bạn thấy nó trong nhiều thư viện như jQuery và Lodash. Nó cho phép mã của bạn biểu cảm và ít dài dòng hơn. Vì lý do đó, tôi nói, hãy sử dụng chuỗi phương thức và xem mã của bạn sẽ sạch như thế nào. Trong các hàm lớp của bạn, chỉ cần trả về
const currentDate = moment[].format["YYYY/MM/DD"];13 ở cuối mỗi hàm và bạn có thể xâu chuỗi các phương thức lớp khác vào đó
Xấu
// Declare them as capitalized named constants. const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout[blastOff, MILLISECONDS_PER_DAY];6
Tốt
// Declare them as capitalized named constants. const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout[blastOff, MILLISECONDS_PER_DAY];7
⬆quay lại đầu trang
Thích thành phần hơn thừa kế
Như đã nói một cách nổi tiếng trong Design Patterns by the Gang of Four, bạn nên ưu tiên bố cục hơn là kế thừa khi bạn có thể. Có rất nhiều lý do chính đáng để sử dụng tính kế thừa và rất nhiều lý do chính đáng để sử dụng bố cục. Điểm chính của câu châm ngôn này là nếu tâm trí của bạn theo bản năng muốn kế thừa, hãy thử nghĩ xem liệu bố cục có thể mô hình hóa vấn đề của bạn tốt hơn không. Trong một số trường hợp nó có thể
Sau đó, bạn có thể tự hỏi, "khi nào tôi nên sử dụng thừa kế?"
- Quyền thừa kế của bạn đại diện cho mối quan hệ "is-a" chứ không phải mối quan hệ "has-a" [Con người-> Động vật so với. Người dùng->Chi tiết người dùng]
- Bạn có thể sử dụng lại mã từ các lớp cơ sở [Con người có thể di chuyển như tất cả các loài động vật]
- Bạn muốn thực hiện các thay đổi toàn cục cho các lớp dẫn xuất bằng cách thay đổi một lớp cơ sở. [Thay đổi lượng calo tiêu thụ của tất cả động vật khi chúng di chuyển]
Xấu
// Declare them as capitalized named constants. const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout[blastOff, MILLISECONDS_PER_DAY];8
Tốt
// Declare them as capitalized named constants. const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout[blastOff, MILLISECONDS_PER_DAY];9
⬆quay lại đầu trang
CHẤT RẮN
Nguyên tắc trách nhiệm duy nhất [SRP]
Như đã nêu trong Clean Code, "Không bao giờ có nhiều hơn một lý do để một lớp thay đổi". Thật hấp dẫn khi đóng gói một hạng ghế có nhiều chức năng, chẳng hạn như khi bạn chỉ có thể mang theo một chiếc vali trên chuyến bay của mình. Vấn đề với điều này là lớp học của bạn sẽ không gắn kết về mặt khái niệm và nó sẽ tạo ra nhiều lý do để thay đổi. Giảm thiểu số lần bạn cần thay đổi một lớp học là rất quan trọng. Điều này quan trọng vì nếu có quá nhiều chức năng trong một lớp và bạn sửa đổi một phần của nó, thì có thể khó hiểu điều đó sẽ ảnh hưởng như thế nào đến các mô-đun phụ thuộc khác trong cơ sở mã của bạn
Xấu
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; saveCityZipCode[ address.match[cityZipCodeRegex][1], address.match[cityZipCodeRegex][2] ];0
Tốt
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; saveCityZipCode[ address.match[cityZipCodeRegex][1], address.match[cityZipCodeRegex][2] ];1
⬆quay lại đầu trang
Nguyên tắc Mở/Đóng [OCP]
Như Bertrand Meyer đã nói, "các thực thể phần mềm [các lớp, mô-đun, chức năng, v.v. ] nên mở để mở rộng, nhưng đóng để sửa đổi. " Điều đó có nghĩa là gì? Nguyên tắc này về cơ bản nói rằng bạn nên cho phép người dùng thêm các chức năng mới mà không thay đổi mã hiện có
Xấu
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; saveCityZipCode[ address.match[cityZipCodeRegex][1], address.match[cityZipCodeRegex][2] ];2
Tốt
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; saveCityZipCode[ address.match[cityZipCodeRegex][1], address.match[cityZipCodeRegex][2] ];3
⬆quay lại đầu trang
Nguyên tắc thay thế Liskov [LSP]
Đây là một thuật ngữ đáng sợ cho một khái niệm rất đơn giản. Nó được định nghĩa chính thức là "Nếu S là một kiểu con của T, thì các đối tượng kiểu T có thể được thay thế bằng các đối tượng kiểu S [i. e. , các đối tượng loại S có thể thay thế các đối tượng loại T] mà không làm thay đổi bất kỳ thuộc tính mong muốn nào của chương trình đó [tính chính xác, tác vụ đã thực hiện, v.v. ]. " Đó là một định nghĩa thậm chí còn đáng sợ hơn
Giải thích tốt nhất cho điều này là nếu bạn có một lớp cha và một lớp con, thì lớp cơ sở và lớp con có thể được sử dụng thay thế cho nhau mà không nhận được kết quả sai. Điều này có thể vẫn còn khó hiểu, vì vậy hãy xem ví dụ về Hình vuông-Hình chữ nhật cổ điển. Về mặt toán học, hình vuông là hình chữ nhật, nhưng nếu bạn mô hình hóa nó bằng cách sử dụng mối quan hệ "is-a" thông qua thừa kế, bạn sẽ nhanh chóng gặp rắc rối
Xấu
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; saveCityZipCode[ address.match[cityZipCodeRegex][1], address.match[cityZipCodeRegex][2] ];4
Tốt
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; saveCityZipCode[ address.match[cityZipCodeRegex][1], address.match[cityZipCodeRegex][2] ];5
⬆quay lại đầu trang
Nguyên tắc phân tách giao diện [ISP]
JavaScript không có giao diện nên nguyên tắc này không được áp dụng nghiêm ngặt như các giao diện khác. Tuy nhiên, điều quan trọng và phù hợp ngay cả khi JavaScript thiếu hệ thống loại
ISP tuyên bố rằng "Khách hàng không nên bị buộc phải phụ thuộc vào các giao diện mà họ không sử dụng. " Giao diện là hợp đồng ngầm trong JavaScript do gõ vịt
Một ví dụ điển hình để xem thể hiện nguyên tắc này trong JavaScript là dành cho các lớp yêu cầu các đối tượng cài đặt lớn. Việc không yêu cầu khách hàng thiết lập số lượng lớn tùy chọn là có lợi, bởi vì hầu hết thời gian họ sẽ không cần tất cả các cài đặt. Làm cho chúng trở thành tùy chọn giúp ngăn chặn việc có "giao diện béo"
Xấu
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; saveCityZipCode[ address.match[cityZipCodeRegex][1], address.match[cityZipCodeRegex][2] ];6
Tốt
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; saveCityZipCode[ address.match[cityZipCodeRegex][1], address.match[cityZipCodeRegex][2] ];7
⬆quay lại đầu trang
Nguyên tắc đảo ngược phụ thuộc [DIP]
Nguyên tắc này nói lên hai điều thiết yếu
- Các mô-đun cấp cao không nên phụ thuộc vào các mô-đun cấp thấp. Cả hai nên phụ thuộc vào trừu tượng
- Trừu tượng không nên phụ thuộc vào chi tiết. Chi tiết nên phụ thuộc vào trừu tượng
Điều này ban đầu có thể khó hiểu, nhưng nếu bạn đã từng làm việc với AngularJS, bạn sẽ thấy việc triển khai nguyên tắc này dưới dạng Dependency Injection [DI]. Mặc dù chúng không phải là các khái niệm giống hệt nhau, nhưng DIP ngăn các mô-đun cấp cao biết chi tiết về các mô-đun cấp thấp của nó và thiết lập chúng. Nó có thể thực hiện điều này thông qua DI. Một lợi ích rất lớn của việc này là nó làm giảm sự ghép nối giữa các mô-đun. Khớp nối là một mô hình phát triển rất tồi vì nó làm cho mã của bạn khó cấu trúc lại
Như đã nêu trước đây, JavaScript không có giao diện nên các phần trừu tượng phụ thuộc vào là các hợp đồng ngầm. Điều đó có nghĩa là, các phương thức và thuộc tính mà một đối tượng/lớp hiển thị cho một đối tượng/lớp khác. Trong ví dụ dưới đây, hợp đồng ngầm định là bất kỳ mô-đun Yêu cầu nào cho một
const currentDate = moment[].format["YYYY/MM/DD"];14 sẽ có một phương thức
const currentDate = moment[].format["YYYY/MM/DD"];15
Xấu
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; saveCityZipCode[ address.match[cityZipCodeRegex][1], address.match[cityZipCodeRegex][2] ];8
Tốt
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; saveCityZipCode[ address.match[cityZipCodeRegex][1], address.match[cityZipCodeRegex][2] ];9
⬆quay lại đầu trang
thử nghiệm
Thử nghiệm quan trọng hơn vận chuyển. Nếu bạn không có bài kiểm tra hoặc số lượng không đủ, thì mỗi khi bạn gửi mã, bạn sẽ không chắc chắn rằng mình không vi phạm bất cứ điều gì. Việc quyết định xem điều gì tạo thành một số lượng phù hợp tùy thuộc vào nhóm của bạn, nhưng có phạm vi bảo hiểm 100% [tất cả các câu lệnh và nhánh] là cách bạn đạt được độ tin cậy rất cao và sự an tâm của nhà phát triển. Điều này có nghĩa là ngoài việc có một khung thử nghiệm tuyệt vời, bạn cũng cần sử dụng một công cụ bao quát tốt
Không có lý do gì để không viết bài kiểm tra. Có rất nhiều khung kiểm tra JS tốt, vì vậy hãy tìm một khung mà nhóm của bạn thích hơn. Khi bạn tìm thấy một cái phù hợp với nhóm của mình, thì hãy đặt mục tiêu luôn viết các bài kiểm tra cho mọi tính năng/mô-đun mới mà bạn giới thiệu. Nếu phương pháp ưa thích của bạn là Phát triển theo hướng thử nghiệm [TDD], điều đó thật tuyệt, nhưng điểm chính là chỉ cần đảm bảo rằng bạn đang đạt được các mục tiêu về mức độ phù hợp của mình trước khi khởi chạy bất kỳ tính năng nào hoặc tái cấu trúc một tính năng hiện có
Khái niệm duy nhất cho mỗi bài kiểm tra
Xấu
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; const [_, city, zipCode] = address.match[cityZipCodeRegex] || []; saveCityZipCode[city, zipCode];0
Tốt
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; const [_, city, zipCode] = address.match[cityZipCodeRegex] || []; saveCityZipCode[city, zipCode];1
⬆quay lại đầu trang
đồng thời
Sử dụng Lời hứa, không gọi lại
Các cuộc gọi lại không rõ ràng và chúng gây ra quá nhiều việc lồng nhau. Với ES2015/ES6, Promise là một loại toàn cầu được tích hợp sẵn. Sử dụng chúng
Xấu
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; const [_, city, zipCode] = address.match[cityZipCodeRegex] || []; saveCityZipCode[city, zipCode];2
Tốt
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; const [_, city, zipCode] = address.match[cityZipCodeRegex] || []; saveCityZipCode[city, zipCode];3
⬆quay lại đầu trang
Async/Await thậm chí còn sạch hơn Promises
Lời hứa là một giải pháp thay thế rất rõ ràng cho các cuộc gọi lại, nhưng ES2017/ES8 mang đến tính năng không đồng bộ và chờ đợi cung cấp một giải pháp thậm chí còn sạch hơn. Tất cả những gì bạn cần là một hàm có tiền tố trong từ khóa
const currentDate = moment[].format["YYYY/MM/DD"];16, sau đó bạn có thể viết logic của mình một cách bắt buộc mà không cần chuỗi hàm
const currentDate = moment[].format["YYYY/MM/DD"];17. Sử dụng cái này nếu bạn có thể tận dụng các tính năng của ES2017/ES8 ngay hôm nay
Xấu
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; const [_, city, zipCode] = address.match[cityZipCodeRegex] || []; saveCityZipCode[city, zipCode];3
Tốt
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; const [_, city, zipCode] = address.match[cityZipCodeRegex] || []; saveCityZipCode[city, zipCode];5
⬆quay lại đầu trang
Xử lý lỗi
Ném lỗi là một điều tốt. Chúng có nghĩa là bộ thực thi đã xác định thành công khi có điều gì đó không ổn trong chương trình của bạn và nó cho bạn biết bằng cách dừng thực thi chức năng trên ngăn xếp hiện tại, hủy tiến trình [trong Nút] và thông báo cho bạn trong bảng điều khiển bằng dấu vết ngăn xếp
Đừng bỏ qua các lỗi đã bắt
Không làm gì với lỗi đã phát hiện sẽ không cho bạn khả năng sửa chữa hoặc phản ứng với lỗi đã nói. Ghi lỗi vào bảng điều khiển [
const currentDate = moment[].format["YYYY/MM/DD"];18] không tốt hơn nhiều vì thường thì nó có thể bị lạc trong biển những thứ được in trên bảng điều khiển. Nếu bạn bọc bất kỳ đoạn mã nào trong một
const currentDate = moment[].format["YYYY/MM/DD"];19, điều đó có nghĩa là bạn nghĩ rằng có thể xảy ra lỗi ở đó và do đó bạn nên có một kế hoạch hoặc tạo một đường dẫn mã khi nó xảy ra
Xấu
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; const [_, city, zipCode] = address.match[cityZipCodeRegex] || []; saveCityZipCode[city, zipCode];6
Tốt
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; const [_, city, zipCode] = address.match[cityZipCodeRegex] || []; saveCityZipCode[city, zipCode];7
Đừng bỏ qua những lời hứa bị từ chối
Vì lý do tương tự, bạn không nên bỏ qua các lỗi đã bắt được từ
const currentDate = moment[].format["YYYY/MM/DD"];19
Xấu
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; const [_, city, zipCode] = address.match[cityZipCodeRegex] || []; saveCityZipCode[city, zipCode];8
Tốt
const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+[.+?]\s*[\d{5}]?$/; const [_, city, zipCode] = address.match[cityZipCodeRegex] || []; saveCityZipCode[city, zipCode];9
⬆quay lại đầu trang
định dạng
Định dạng là chủ quan. Giống như nhiều quy tắc ở đây, không có quy tắc cứng và nhanh nào mà bạn phải tuân theo. Điểm chính là KHÔNG TRANH LUẬN về định dạng. Có rất nhiều công cụ để tự động hóa việc này. Sử dụng một. Thật lãng phí thời gian và tiền bạc khi các kỹ sư tranh luận về định dạng
Đối với những thứ không thuộc phạm vi định dạng tự động [thụt đầu dòng, tab so với. dấu cách, gấp đôi so với. dấu nháy đơn, v.v. ] nhìn vào đây để được hướng dẫn
Sử dụng cách viết hoa nhất quán
JavaScript không được gõ, vì vậy cách viết hoa cho bạn biết rất nhiều về các biến, hàm, v.v. Các quy tắc này là chủ quan, vì vậy nhóm của bạn có thể chọn bất cứ điều gì họ muốn. Vấn đề là, bất kể bạn chọn gì, chỉ cần nhất quán
Xấu
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[l => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... // Wait, what is `l` for again? dispatch[l]; }];0
Tốt
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[l => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... // Wait, what is `l` for again? dispatch[l]; }];1
⬆quay lại đầu trang
Người gọi chức năng và callees nên được đóng
Nếu một chức năng gọi một chức năng khác, hãy giữ các chức năng đó đóng theo chiều dọc trong tệp nguồn. Lý tưởng nhất là giữ caller ngay phía trên callee. Chúng ta có xu hướng đọc mã từ trên xuống dưới, giống như một tờ báo. Vì điều này, hãy làm cho mã của bạn đọc theo cách đó
Xấu
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[l => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... // Wait, what is `l` for again? dispatch[l]; }];2
Tốt
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[l => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... // Wait, what is `l` for again? dispatch[l]; }];3
⬆quay lại đầu trang
Bình luận
Chỉ bình luận những thứ có logic nghiệp vụ phức tạp
Nhận xét là một lời xin lỗi, không phải là một yêu cầu. Mã tốt chủ yếu là tài liệu
Xấu
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[l => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... // Wait, what is `l` for again? dispatch[l]; }];4
Tốt
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[l => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... // Wait, what is `l` for again? dispatch[l]; }];5
⬆quay lại đầu trang
Đừng để lại mã nhận xét trong cơ sở mã của bạn
Kiểm soát phiên bản tồn tại vì một lý do. Để lại mã cũ trong lịch sử của bạn
Xấu
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[l => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... // Wait, what is `l` for again? dispatch[l]; }];6
Tốt
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[l => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... // Wait, what is `l` for again? dispatch[l]; }];7
⬆quay lại đầu trang
Không có bình luận tạp chí
Hãy nhớ, sử dụng kiểm soát phiên bản. Không cần mã chết, mã nhận xét và đặc biệt là nhận xét tạp chí. Sử dụng
const currentDate = moment[].format["YYYY/MM/DD"];21 để lấy lịch sử
Xấu
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[l => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... // Wait, what is `l` for again? dispatch[l]; }];8
Tốt
const locations = ["Austin", "New York", "San Francisco"]; locations.forEach[l => { doStuff[]; doSomeOtherStuff[]; // ... // ... // ... // Wait, what is `l` for again? dispatch[l]; }];9
⬆quay lại đầu trang
Tránh đánh dấu vị trí
Họ thường chỉ thêm tiếng ồn. Hãy để các hàm và tên biến cùng với cách thụt đầu dòng và định dạng phù hợp mang lại cấu trúc trực quan cho mã của bạn