Viết code mà như thế này thì dev sau nó đấm cho gãy răng

Aug 02, 2022

Viết Code không phải khó, dễ đối với những bạn có suy nghĩ chạy là được. Còn việc ai review code hay người sau bảo trì code thì không quan tâm. Tình huống này gặp khá là nhiều. Nhân tiện đây, chúng ta xem qua những đoạn code mà số ít tôi đã xem qua.

Viết Code theo nguyên tắc nào?

Nếu như có những nguyên tắc chung cho mọi level khi học lập trình. Thì các viết code cũng có những nguyên tắc của nó. Trong một số tình huống mà mới đây tôi đã thấy được, thì nếu là bạn, bạn có thể viết tốt hơn không?

Có nhiều kỹ thuật lập trình dễ hiểu và dễ bảo trì chính vì thế lợi thế của các bạn đọc nhiều blog sẽ mang lại hiệu quả hơn nhiều. Nên tìm hiểu và lắng nghe những người có kinh nghiệm và tâm huyết, đừng tự ái mà bỏ qua những kỹ năng cần thiết của mỗi developer.

1 – Tránh viết tất cả chức năng vào một function

Nếu bạn nào nhìn vào đoạn code mà cười, và cảm giác mình trong đó thì cũng nên xem lại, chứ đừng cười xong để đó.

function addEventDom() {
    $.ajax.get('/getData').then((res) => {
        const ul = document.getElementById('ul');
        ul.innerHTML = res.list.map(text => `<li class="li">${text}</li>`).join('\n');
        const list = document.getElementsByClassName('li');
        for (let i = 0; i < list.length; i ++) {
            list[i].addEventListener('focus', () => {
                // do something
            });
        }
    });

}

Đoạn code trên là để thực hiện để lấy dữ liệu ở đâu đó, sau đó thao tác dom để hiển thị dữ liệu và cuối cùng là thêm sự kiện trong DOM. Nhìn vào có tốt không? Không hề, rối quá.

Giờ thử tách ra xem.

function getData() {
    return $.ajax.get('/getData').then((res) => res.data.list);
}
function showList(list) {
    const ul = document.getElementById('ul');
    ul.innerHTML = list.map(text => `<li class="li">${text}</li>`).join('\n');
}
function addEvent() {
    const list = document.getElementsByClassName('li');
    for (let i = 0; i < list.length; i ++) {
        list[i].addEventListener('focus', () => {
            // do something
        });
    }
}

async function addEventDom() {
    const list = await getData(); // Lấy dữ liệu
    showList(list); // Hiện thị dữ liệu
    addEvent(); // Thêm event vào dom
}

Chúng ta thấy đấy, việc tách mã từ một function lớn thành những function nhỏ, việc đó giúp bạn bảo trì code dễ hơn, nhìn cũng đỡ rối mắt hơn.

Ví dụ thứ 2, mà tôi đã nhìn thấy gần đây.

2 – Tách các câu lệnh rẽ nhánh có điều kiện thành các hàm

function getPrice( price ){
    var date = new Date();
    if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // khung giờ hết khuyến mãi
        return price * 0.8;
    }
    return price;
}

Thoạt nhìn có vẻ như đoạn code sau có vẻ cũng rất hợp lý, nhưng theo tôi thì có thể nên làm như thế này

// Check xem có nằm trong khung giờ sale hay không
function isSales(){
    var date = new Date();
    return date.getMonth() >= 6 && date.getMonth() <= 9;
};
// Tính toán gía cả
function getPrice( price ){
    if ( isSales() ){
        return price * 0.8;
    }
    return price;
};
//or
function getPrice( price ){

    return isSales() ? price * 0.8 : price;
};

Rõ ràng và tường minh hơn đúng không nào!

3 – Return một hàm không đủ diều kiện

Nếu như bạn có một đoạn mã thế này

function del( obj ){
    var ret;
    if ( !obj.isReadOnly ){ 
        if ( obj.isFolder ){ 
            ret = deleteFolder( obj );
        }else if ( obj.isFile ){ 
            ret = deleteFile( obj );
        }
    }
    return ret;
};
//is better
function del( obj ){
    if ( obj.isReadOnly ){ //nếu check ko đủ điều kiện thì leave luôn
        return;
    }
    if ( obj.isFolder ){ //tương tự
        return deleteFolder( obj );
    }
    if ( obj.isFile ){
        return deleteFile( obj );
    }
}

4 – Sử dụng hợp lý các vòng lặp

Trước đây có một đoạn code như thế này

function getBrowser(){
    const str = navigator.userAgent;
    if (str.includes('QQBrowser')) {
	return 'qq';
    } else if (str.includes('Chrome')) {
	return 'chrome';
    } else if (str.includes('Safari')) {
        return 'safri';
    } else if (str.includes('Firefox')) {
        return 'firefox';
    } else if(explorer.indexOf('Opera') >= 0){
        return 'opera';
    } else if (str.includes('msie')) {
        return 'ie';
    } else {
        return 'other';
    }
}

Trước thì nó phù hợp, sau thì có lẽ nên như thế này.

function getBrowser(){
    const str = navigator.userAgent;
    const list = [
        {key: 'QQBrowser', browser: 'qq'},
        {key: 'Chrome', browser: 'chrome'},
        {key: 'Safari', browser: 'safari'},
        {key: 'Firefox', browser: 'firefox'},
        {key: 'Opera', browser: 'opera'},
        {key: 'msie', browser: 'ie'},
    ];
    for (let i = 0; i < list.length; i++) {
        const item = list[i];
        if (str.includes(item.key)) {return item.browser};
    }
    return 'other';
}

Tóm lại

Bài viết mang thông điệp nên làm thế nào để người sau đến và chấp nhận viết tiếp trên code của bạn để lại, chứ đừng để người ta phải đập lại xây dựng lại từ đầu. Nói ít hiểu nhiều.

You need to login in order to like this post: click here