Clean code với Vuejs Anti pattern – Phần 2

1264

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Tiếp nối series về chuỗi bài Vuejs Anti Pattern, Kieblog hân hạnh giới thiệu bài viết số 2 về chuỗi bài này. Xúc hết hai ba phần của chuỗi bài viết này thì khả năng code tăng lên khá nhiều rồi nhé.

Bài viết này chủ yếu bổ sung thêm một số phần còn thiếu về naming, template và prop validation. Nhưng pattern này tuy nhỏ, nhưng không nên vì nhỏ mà khinh thường bỏ qua.

Nhỏ mà có võ nha mấy ba!

10 kinh nghiệm khi làm việc với các dự án lớn viết bằng Vue.js

3 phút làm quen với Vue.js

Xem thêm nhiều chương trình tuyển dụng VueJS hấp dẫn trên TopDev

1. Naming components – Vuejs Anti pattern

Về việc đặt tên cho components, thường một số bạn đặt tên component vô tội vạ, thích đặt gì thì đặt cái đó

Đặt tên component quá chung chung và không thể hiện được ý nghĩa của component có thể ảnh hưởng lớn tới project sau này. Cũng gây khó khăn không nhỏ cho việc maintain.

// This would not be an appropriate name as it conflicts with HTML elements.
Vue.component('form', Form)

// This is a better name as it's multi-word and there are less chances to conflict.
Vue.component('signup-form', Form)

Component nếu chỉ đặt tên form sẽ gây confuse cho người sử dụng. Best idea là thêm vào purpose của component, signup-form.

Pattern này là một Vuejs Anti pattern khá nhỏ và đơn giản, tuy nhỏ nhưng không kém phần quan trọng.

2. Template expressions

Often times, when we’re displaying items on the screen, we may have to compute values and call functions to change the way our data looks.

Thi thoảng, khi hiển thị items lên màn hình, ta có thể tính toán giá trị và gọi function để thay đổi data nếu cần thiết

Thay vì gọi thẳng function ở phía template hoặc viết logic ở phần này, ta có thể đem function tính toán này vào computed.

Việc này giúp việc maintain và đọc source sau này trở nên cực kì đơn giản và gọn gàng

// Bad 
<nuxt-link :to="`/categories/${this.category.id}`" class="card-footer-item">View</nuxt-link>

// Good
<nuxt-link :to="categoryLink" class="card-footer-item">View</nuxt-link>

export default {
props: ['category'],
computed: {
categoryLink () {
return `/categories/${this.category.id}`
}
}
}

3. Prop validation

Giao tiếp giữa các component cũng như parent và child component tất nhiên sẽ sử dụng props. Tuy nhiên một số ông chỉ đơn giản là thảy props vào, còn chuyện props có đúng hay không thì không bàn tới

export default {
props: {
firstName: {
type: String
},
lastName: {
type: String
},
age: {
type: Number
},
friendList: {
type: Array
}
},
}

Việc này theo đánh giá thì khá là tệ. Props thì định nghĩa ở component con, nhưng việc truyền props vào cho component con lại do thằng cha quản lý

Nếu gửi props sai thì sao?, props gửi không đúng hoặc sai có thể gây ra nhiều con bug ảo lòi

  props: {
firstName: {
type: String,
required: true,
default: 'John'
},
lastName: {
type: String,
required: true,
default: 'Doe'
}
}

Hơn nữa, nếu props đóng vai trò chính trong component thì có thể set required. Nếu không có props có thể gây ra bug -> required

Ta cũng có thể tạo ra các validator cho props nếu cảm thấy việc này là cần thiết. Trường hợp ở dưới dây component sẽ chỉ render nếu age > 18. Các trường hợp khác component sẽ không render

props: {
age: {
type: Number,
required: true,
validator: value => {
return value >= 18
}
},
}

4. Tham khảo

Vuejs Anti Pattern còn có phần 1 rất là hay nha. Anh em đã tham khảo về pattern thì không nên bỏ qua

Thank you for spend a time to read – Hope you have nice week. Happy coding!

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

Xem thêm Việc làm IT hấp dẫn trên TopDev