Bài viết này tập trung vào các đề xuất về quy ước đặt tên, công cụ và tiện ích mở rộng. Để tìm hiểu chi tiết, vui lòng tham khảo các liên kết được đánh dấu.
Hãy cùng điều chỉnh cách làm việc của bạn với những điểm sau:
- Yêu cầu công ty trang bị cho bạn ba màn hình: màn hình đầu để xem kết quả trình duyệt, màn hình thứ hai để viết code, và màn hình thứ ba để xem công cụ phát triển.
- Yêu cầu công ty trang bị ghế gaming có thể ngả, để tiện nghỉ trưa.
- Yêu cầu công ty cấp cho bạn phòng riêng và được phép hút thuốc.
- Yêu cầu làm việc linh hoạt, có thể linh hoạt hai giờ vào đầu ngày và cuối ngày.
Nếu công ty không đồng ý (đừng nói là do tôi không dám), thì chỉ còn cách tự mình cải thiện. Những việc có vẻ phức tạp đôi khi lại giúp chúng ta làm việc dễ dàng hơn.
Quy ước đặt tên cho thư mục, tệp, biến, hàm và bộ chọn CSS
Nếu bạn nói điều này không quan trọng, tôi sẽ không phản đối bạn, vì mỗi người có quan điểm riêng. Tuy nhiên, việc có một bộ quy ước đặt tên riêng sẽ rất hữu ích khi bạn xem lại code sau một thời gian.
Thư mục
Sau khi tải xuống tiện ích mở rộng vscode-icons trong VS Code, một số thư mục từ khóa sẽ được thay thế bằng biểu tượng đặc biệt, ví dụ:
Việc đặt tên thư mục có sử dụng từ khóa một cách hợp lý (lưu ý không lạm dụng) sẽ giúp bạn tìm tệp nhanh hơn.
Đừng trùng lặp chức năng thư mục, có nghĩa là nếu bạn đã có một thư mục src\assets\imgs, thì không nên tạo thêm src\assets\images.
Nếu có hình ảnh không được đặt trong src\assets\imgs mà ở một thư mục khác, điều này cũng không nên, vì nó sẽ khiến việc theo dõi đường dẫn hình ảnh trở nên khó khăn. Nếu bạn muốn phân loại hình ảnh chi tiết hơn, có thể tạo src\assets\imgs\icons, và cứ thế tiếp tục. Các loại tệp khác cũng tương tự.
Nếu bạn muốn tạo một thư mục js cho công cụ bên thứ ba, có thể dùng src\plugins. Các phương thức công cộng tự viết có thể tạo thành src\utils hoặc src\tools.
Lưu ý:
- Nếu bạn đã tạo src\tools, thì không nên tạo thêm src\xxx\tools, vì điều này sẽ gây lộn xộn trong danh sách và khó theo dõi.
- Đừng tạo các thư mục từ khóa có sẵn trong framework, ví dụ trong dự án vue, không nên tạo src\views\home\components vì đã có src\components. Nếu muốn tạo components riêng cho trang home, có thể tạo src\components\home.
- Tránh đặt tên thư mục bằng định dạng tệp, vì lâu ngày bạn có thể quên chức năng của thư mục đó, ví dụ src\utils\json, src\utils\script.
- Tránh sử dụng dấu gạch ngang, có thể dùng dấu gạch dưới, nhưng không nên dùng dấu gạch dưới ở đầu hoặc cuối.
- Sử dụng thống nhất kiểu viết hoa chữ cái đầu, viết hoa chữ cái đầu mỗi từ hoặc dùng dấu gạch dưới, không trộn lẫn. Viết với dấu gạch dưới có khả năng tương thích cao, viết hoa chữ cái đầu mỗi từ dễ nhận biết, viết hoa chữ cái đầu mỗi từ trông đẹp hơn.
- Trộn lẫn tiếng Trung và tiếng Anh, hoặc toàn bộ bằng tiếng Anh, hoặc toàn bộ bằng tiếng Trung.
Tệp
Tệp chính trong một thư mục nên có tên giống tên thư mục, ví dụ src\views\remoteBD\remoteBD.vue, không nên dùng src\views\remoteBD\index.vue hoặc src\views\remoteBD\main.vue.
- Tránh sử dụng dấu gạch ngang, có thể dùng dấu gạch dưới, nhưng không nên dùng dấu gạch dưới ở đầu hoặc cuối.
- Sử dụng thống nhất kiểu viết hoa chữ cái đầu, viết hoa chữ cái đầu mỗi từ hoặc dùng dấu gạch dưới, không trộn lẫn.
- Trộn lẫn tiếng Trung và tiếng Anh, hoặc toàn bộ bằng tiếng Anh, hoặc toàn bộ bằng tiếng Trung.
- Đừng đặt tên tệp bằng từ khóa của dự án framework, ví dụ vue.config.js.
- Đừng đặt tên bằng các ký tự đơn giản, vô nghĩa, ví dụ: a.png, b.png, topBtnBg.png, innerData.json, config.json, tools.js. Nên đặt tên đúng như: meatInAView.png, meatInBView.png, sendMsgBtnInTopBg.png, foodInnerData.json, foodConfig.json, eatTools.js. Dài hơn một chút nhưng ý nghĩa rõ ràng hơn.
Nếu làm tốt hai điểm trên, bạn sẽ có một cấu trúc tệp sạch sẽ, gọn gàng và phân loại rõ ràng. Xin chúc mừng.
Biến và hàm
Yêu cầu duy nhất là tên phải thể hiện được ý nghĩa, đừng sợ tên dài. Một điều nữa là thứ tự động từ và danh từ phải cố định, ví dụ: sendMsgToServer (động từ trước, danh từ sau), serverMsgSender (danh từ trước, động từ sau).
Mặc dù không ảnh hưởng nhiều, nhưng khi đọc hàng ngày sẽ tăng thêm một chút gánh nặng.
Tên biến cũng không nên đặt bằng các ký tự đơn giản, vô nghĩa, ví dụ: let data = {}, let str1 = "", let newArr = []. Nên đổi thành let originalData= {}, let msg= "", let recArr= [] sẽ tốt hơn.
Bộ chọn CSS
Khuyến nghị sử dụng less làm tiền xử lý, bạn hoàn toàn không cần học less, chỉ cần sử dụng tính năng lồng nhau của nó. Các tính năng khác bạn cần tự khám phá trong quá trình phát triển thực tế.
Tên bộ chọn CSS chỉ cần thể hiện được ý nghĩa là được, không khuyến khích sử dụng dấu gạch ngang ("-") để phân loại, khuyến khích sử dụng nhiều tên class hơn để phân loại. Nhiều người có thói quen viết kiểu &-xxx, nhưng cách viết này rất khó đọc. Nếu muốn thêm cùng kiểu样式 cho một số phần tử, có thể tạo một class riêng, ví dụ:
.flex{
display:flex;
}
Như vậy, chỉ cần thêm class flex vào bất kỳ phần tử nào. Từ bỏ dấu gạch ngang, bạn có thể dễ dàng chọn và tìm kiếm bằng cách nhấp đúp. Ở đây tôi giới thiệu một tiện ích mở rộng cho VS Code: CSS Navigation.
Sử dụng ES6
Nhiều người chỉ biết cú pháp mới của es6 có let const, hàm mũi tên, cấu trúc giải mảng đối tượng, nhưng rất ít người sử dụng các tính năng nhỏ, thực tế.
Toán tử tùy chọn chuỗi
//const name = obj && obj.name;
const name = obj?.name;
Chuỗi mẫu và biểu thức thuộc tính đối tượng
//let obj = {};
//let index = 1;
//let key = `topic${index}`;
//obj[key] = 'nội dung chủ đề';
let obj = {};
let index = 1;
obj[`topic${index}`] = 'nội dung chủ đề';
Kiểm tra không rỗng
//if(value !== null && value !== undefined && value !== ''){
//...
//}
if((value??'') !== ''){
//...
}
Để tìm hiểu thêm các cú pháp thực tế, vui lòng tham khảo: Bạn biết dùng ES6, vậy thì hãy dùng! , Toàn bộ cú pháp cơ bản của ES6
Sử dụng công cụ (powerToys)
PowerToys là bộ công cụ do Microsoft phát triển, có chức năng như hình dưới
Đây thực sự là công cụ không thể thiếu cho nhà phát triển frontend
Sử dụng tiện ích mở rộng trình duyệt
Tiện ích mở rộng trình duyệt có thể giúp bạn hoàn thành nhiều công việc, như kiểm tra giao diện, quản lý cookie và bộ nhớ cache, thậm chí có thể tự động hóa quy trình. Nếu bạn chưa biết cách phát triển tiện ích mở rộng trình duyệt, vui lòng tham khảo: Học nhanh tiện ích mở rộng trình duyệt Đừng tự reinvent the wheel!
Ngoài ra
Học Node.js (hoặc bất kỳ ngôn ngữ backend nào khác) và MySQL (hoặc bất kỳ cơ sở dữ liệu nào khác) đều có ích cho việc phát triển frontend. Ít nhất bạn nên biết nên đổ lỗi cho ai,而不是唯唯诺诺不敢说话. Cá nhân tôi khuyên học ngôn ngữ backend từ Node.js (dễ上手) bắt đầu, học cơ sở dữ liệu từ MySQL (dễ上手) bắt đầu. Ở đây tôi giới thiệu một dự án mã nguồn mở học phát triển full-stack: Vue-Admin-Xmw-Pro, backend sử dụng egg.js (framework node.js) cũng là một framework dễ上手. Nắm vững dự án này, bạn có thể tự phát triển một dự án full-stack.
Học ngôn ngữ kiểu mạnh có thể mang lại cho bạn một số lợi ích, nhưng trong phát triển frontend, việc nâng cao hiệu quả không rõ ràng. Ví dụ, một số dự án nhỏ nếu sử dụng TS phát triển, chỉ sẽ tăng thêm gánh nặng và giảm hiệu quả. Vì vậy không cần lo lắng việc không biết TS sẽ ảnh hưởng đến sự nghiệp của bạn, hầu hết các dự án không cần sử dụng. Nếu muốn học một ngôn ngữ kiểu mạnh, tôi cũng không khuyên học TS (TS không thể coi là một ngôn ngữ, nó chỉ là công cụ kiểm tra kiểu của js), có thể cân nhắc học Java để trải nghiệm ngôn ngữ kiểu mạnh đầy đủ hơn.
Khi bạn nắm vững các nội dung trên, bạn sẽ có khả năng phát triển hướng nghiệp nhanh chóng hơn 80% người khác, cố lên, người triệu hồi nhà phát triển frontend