写组件时的一个常见错误

178 阅读1分钟

当多个组件有相似功能时,我经常能见到类似于下面这样的代码

    // 主组件
    function fn(type){
        /*
        ....
        ..一致的功能..
        ....
        */
        let a = "a";
        let b = "b";
        if(type === 1){
            //实现组件A的功能
            a = "1";
            b = "2";
            /*
            ....
            ..等等..
            ....
            */
        }else if(type === 2){
            //实现组件A的功能
            a = "2";
            b = "1";
            /*
            ....
            ..等等..
            ....
            */
        }
    }

虽然可以实现业务需求,但是这样明显是不对滴,你会发现A和B的代码交织在一起,非常容易出现BUG,而且还非常难以修改,应该怎么重构呢?很明显应该把一致的功能提取出来,类似于以下代码

function fn(){
    /*
      ....
      ..一致的功能..
      ....
    */
    let a = "a";
    let b = "b";
    // 等等....
    retrun "某个结果";
    
}
function A(){
    let c = fn();
    // A内部逻辑
}
function B(){
    let c = fn();
    // B内部逻辑
}

虽然很简单,但是我也不知道为啥有人不这么写,反而写到fn内部