Vuejs Refactor Code – Một vài kinh nghiệm xương máu

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

Refactor code, câu chuyện không của riêng ai. Tuy nhiên, chỉ có khi đi review source code của ai đó, hoặc họa may có task review, mấy ông dev mới lọc cọc đi review.

Dưới đây là 4 điều các bạn có thể tham khảo qua trước khi bắt đầu code Vuejs. Nếu thực tế, có thể áp dụng vào dự án. Tránh trường hợp nghe chửi “ầm ì xèo” khi có ai đi review code mình nha.

BẮT ĐẦU NÀO!

1. Chú ý tới thứ tự life cycle hooks

Bạn nào chưa biết về VueJs Life Cycle thì đọc ngay bài viết này ở Kieblog nha. Life Cycle là phần kiến thức cực kì quan trọng cần nắm vững trước khi bắt đầu tìm hiểu sâu hơn.

Lời khuyên là ngay từ lúc bắt đầu, nên sắp xếp thứ tự đúng như life cycle. Biết là có thể đang bị dí task, leader thúc đít. Nhưng thà mất công từ đầu, còn hơn để sau này lòi ra bug (sau này càng khó refactor code)

Mình ban đầu cũng làm khá ẩu, đụng đâu quăng đấy. Rõ ràng là beforeMount (before là trước), nhưng cũng quăng ra sau mounted. Cuối cùng có bug kiếm hoài không ra, gặp ai đó review thì lại bị càm ràm. Vì vậy, mình khuyên là ngay từ ban đầu là nên để đúng thứ tự life cycle.

<template>
<div class="abc">
</div>
</template>
<script>
export default {
name: 'KieblogComponent',
// Destroy không nên đặt ở đây
// Destroyed nằm ở cuối cùng trong life cycle hooks
destroyed() {
this.destroySomething()
},
data() {
return {}
},
mounted() {
this.doSomething()
this.doSomeSomeThing()
},
// Thứ tự loạn xạ
// Props lại nằm sau mounted()
props: {
data: {
type: Array,
default: []
},
change: {
type: Function,
default: () => {}
}
}
}

Có 3 cái lợi thấy ngay:

• Dễ dàng hình dung thứ tự thực hiện trên Component
• Dễ dàng cho người khác đọc hiểu code, refactor code
• Trường hợp có bug, dễ dàng phát hiện, fix bug

2. Sử dụng Reference alias từ đầu

Một kinh nghiệm nho nhỏ của mình trong quá trình refactor code cho cái VueJs application là:

Hãy sử dụng reference alias NGAY từ ban đầu, NGAY khi còn có thể, NGAY khi bạn viết component đầu tiên. Lắm ngay vậy ba!.

<template>
<div class="abc">
</div>
</template>
<script>
// Nếu không dùng reference alias
// Import theo kiểu mò ngược vị trí folder như thế này
// Nhìn ghê,không kiểm soát nổi
import Utils from './../../../utils'

import ApiService from './../api.service'
import { COLOR, TAB_BAR } from './../Constants'

// Nếu folder structure thay đổi -> tiêu
import ComponentA from './../../../Notification.vue'
import ComponentB from './../../../LineButton.vue'
import ComponentC from './../../../NoData.vue'
import HomeIcon from './../../../../homeCalendar.svg'
export default {
}

<template>
<div class="abc">
</div>
</template>
<script>
// Dùng alias thứ tự import chuẩn
// Đẹp long lanh, lại dễ hiểu
import Utils from 'Utils/utils'

import ApiService from 'Services/api.service'
import { COLOR } from 'Colors/MainColor'

import ComponentA from 'Atoms/Notification.vue'
import ComponentB from 'Atoms/LineButton.vue'
import ComponentC from 'Atoms/NoData.vue'

import IconsA from 'Icons/IconABC.svg'
export default {
}

Ngay là vì:

• Khi project bự ra, có nhiều folder, lúc đó import thật sự là cơn ác mộng
• Khi có thay đổi cấu trúc folder, đi import lại thôi cũng đã là một cực hình
• Đặc biệt hơn, ông nào review code cho bạn mà thấy viết kiểu đó, đằng nào cũng ăn chửi chói tai

3. Import sao cho dễ refactor code

Những dự án FE lớn thường sử dụng không dưới 3 thư viện. Nếu dùng axios, thường sẽ import API service để handle lúc gọi API.

Nếu sử dụng icon nhiều, thường dùng là Fontawesome. Tuy nhiên, hạn chế cài đặt thêm các module, đối với các application khắt khe. Library nào lớn hơn 100kb là không thể chấp nhận.

<template>
<div class="abc">
</div>
</template>
<script>
// Import theo kiểu xen kẽ, đụng đâu import đấy 
// Trường hợp có bug, chắc chắn là kiếm không ra
import Utils from 'Utils/utils'
import ComponentB from 'Atoms/LineButton.vue'
import ApiService from 'Services/api.service'
import ComponentC from 'Atoms/NoData.vue'
import { COLOR } from 'Colors/MainColor'
import IconsA from 'Icons/IconABC.svg'
import ComponentA from 'Atoms/Notification.vue'
export default {
}

Vì vậy, trước khi bắt đầu vào code rầm rầm, nên chú ý thứ tự các nội dung import trong components.

Thứ tự rõ ràng có nhiều lợi ích:

• Nhìn sơ thôi cũng biết Component có call API không?, có sử dụng Utils không?.
• Thoáng qua cái là biết Component có sử dụng bao nhiêu component nhỏ?
• Component có pass props không?, vân vân, mây mây.

4. Dùng Vuex khi lớn hơn 2

Nguyên tắc mình nói tới ở đây là gì?. À, cái “LỚN HƠN 2” có nghĩa rằng khi có bất kì 2 component nào khác nhau cùng sử dụng chung một biến, hoặc một object, … Thì luôn nhớ rằng hãy lưu nó trong Vuex Store.

Tại sao?. Tại vì bạn không làm thì ông Senior FE đi review cho bạn cũng sẽ làm. Mà đừng có những ý tưởng kiểu kiểu như mình:

• Sử dụng LocalStorage hoặc Cookies để lưu, cuối cùng không xóa được, dùng thì chậm, không phải browser nào cũng ưa, …
• Trốn tránh sử dụng Vuex bằng cách pass Properties quá trời, loạn hết cả lên.

5. Tham khảo

• Hackernoon – Components Refactor.
• Mattstauffer – Refactoring of Vue – Cleanup
• Medium – Vuejs Secret Guidle
• Easier import with Webpacks

Cảm ơn đã đọc bài, nhớ like và chia sẻ bài viết từ page Facebook nha!

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

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

• Vue conditional rendering – những điều cần biết
• Kinh nghiệm xương máu từ 9 tháng làm kỹ sư phần mềm (P1)
• Kinh nghiệm xương máu từ 9 tháng làm kỹ sư phần mềm (P2)

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