《零食：去掉累赘的if...else...,清爽代码的一种写法》—— 2021-01-17 分享

[isbaselvy]

改造jplat平台的公共代码，if...else...20个，扒了扒easyui 表格的editor代码，仿写下，去掉if...else...,配置化

// 改造前的代码
 function setinput(data) {
    $.each(data, function (i, val) {
        var inputId = val.id ? val.id : val.field;
        if (val.hidden) {

        } else if (val.type == 'daterangebox') {
            // 处理函数
        } else if (val.type == 'combotreegrid') {
            // 处理函数
        } else if (val.type === 'group') {
            // 处理函数
        } else if (val.type == ('datebox')) {
            // 处理函数
        } else if (val.type == ('combobox')) {
            // 处理函数
        } else if (val.type == ('combotree')) {
            // 处理函数
        } else if (val.type == ('combogrid')) {
            // 处理函数
        } else if (val.type == ('numberbox')) {
            // 处理函数
        } else if (val.type == ('comboxpage')) {
            // 处理函数
        } else if (val.type == ('datetimebox')) {
            // 处理函数
        } else if (val.type == ('numberspinner')) {
            // 处理函数
        } else if (val.type == 'datetimespinner') {
            // 处理函数
        } else if (val.type == ('filebox')) {
            // 处理函数
        } else if (val.type == ('textarea')) {
            // 处理函数
        } else if (val.type == ('checkbox')) {

        } else if (val.type == ('radio')) {

        } else if (val.type == 'easyuiCheckbox') {
            // 处理函数
        } else if (val.type == ('radiogroup')) {
            // 处理函数
        } else if (val.type == ('button')) {
            // 处理函数
        } else {
            // 处理函数
        }
    });
} 

// 改造后的代码
function setinputNew(data) {
    var editorConf = {
        daterangebox: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        combotreegrid: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        group: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        datebox: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        combobox: {
            exec: function (inputId, val) {
                // url前缀
                if (val.url && val.url.match(/\/([^\/]*)\//g)[0] != (Config.sysUrl + '/')) {
                    val.url = Config.sysUrl + val.url;
                }
                // input类型为下拉列表
                var options = $.extend({}, comboOptions, val);
                $("#" + inputId).combobox(options);
            }
        },
        combotree: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        combogrid: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        numberbox: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        comboxpage: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        datetimebox: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        numberspinner: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        datetimespinner: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        filebox: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        textarea: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        checkbox: {
            exec: function (inputId, val) {

            }
        },
        radio: {
            exec: function (inputId, val) {

            }
        },
        easyuiCheckbox: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        radiogroup: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        button: {
            exec: function (inputId, val) {
                // 处理函数
            }
        },
        default: {
            exec: function (inputId, val) {
                // 处理函数
            }
        }
    }
    $.each(data, function (i, val) {
        var inputId = val.id ? val.id : val.field;
        if (val.hidden) {
            return true;
        }
        var editor = editorConf[val.type] || editorConf.default;
        editor.exec(inputId, val)
    });
}

[sworlife]

我的理解： 这种改造方式的理论支持：设计模式——策略模式。

我猜写上面代码的人对面向对象语言很熟悉（感觉面向对象总是将函数作为方法放在一个对象里）。

如果是我，丢掉 exec 方法，直接用策略名作为执行函数名（感觉没有面向对象经验的人，都会这么处理）。但上面的写法很明显更具有优势，能够添加各种状态来作为执行条件（更易扩展）。

[AwakenedSomeone]

哈哈，如果是我，也不会写exec，要不是你提醒，我都没注意到这个关键的地方