【菜农大丰收】论我写的一处垃圾代码

一个performance监控上报的需求，其中涉及一个方法是通过文件扩展名和resource的initiatorType来获取资源的实际文件类型
当然是先看看类似需求在同性交友网站上有没有
找到一处
performance-bookmarklet
看这段代码

helper.getFileType = function(fileExtension, initiatorType){
    if(fileExtension){
        switch(fileExtension){
            case "jpg" :
            case "jpeg" :
            case "png" :
            case "gif" :
            case "webp" :
            case "svg" :
            case "ico" :
                return "image";
            case "js" : 
                return "js"
            case "css":
                return "css"
            case "html":
                return "html"
            case "woff":
            case "woff2":
            case "ttf":
            case "eot":
            case "otf":
                return "font"
            case "swf":
                return "flash"
            case "map":
                return "source-map"
        }
    }
    if(initiatorType){
        switch(initiatorType){
            case "xmlhttprequest" :
                return "ajax"
            case "img" :
                return "image"
            case "script" :
                return "js"
            case "internal" :
            case "iframe" :
                return "html" //actual page
            default :
                return "other"
        }
    }
    return initiatorType;
};

拿来我就用了……
这段代码的作用是判断传入的扩展名和追踪类型存在 有一个存在即进入推断过程，推断过程是用一堆switch case写的，当时copy的时候也是懒，没想过改造下……
当然mr的时候被老大给点了，点的一点都不冤……然后我就写了个如下代码……

image.png

在使用时

const fileType = fileTypeMap[扩展名] || fileTypeMap[追踪类型] || 'other'';

这是我这个脑子能想到的……
然后老大写了下他瞬间实现的（这可能和他从小爱吃肉有关系 笑）

const typeMapList = [{
    originType: ['xmlhttprequest'],
    targetType: 'ajax',
}, {
    originType: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'ico', 'img' ],
    targetType: 'image',

}, {
    originType: ['js', 'script' ],
    targetType: 'js',
}, {
    originType: ['css'],
    targetType: 'css',
}, {
    originType: ['html', 'internal', 'iframe' ],
    targetType: 'html',
}, {
    originType: ['woff', 'woff2', 'ttf', 'eot', 'otf' ],
    targetType: 'font',
}, {
    originType: ['swf'],
    targetType: 'flash',
}, {
    originType: ['map'],
    targetType: 'source-map',
}];

function getFileType(type) {
    const typeMap = typeMapList.find(map => map.originType.includes(type));
    return typeMap ? typeMap.targetType : 'other';
}
const fileType = getFileType(追踪类型 || 扩展名);

从此处代码可以看出来我的几个明显错误

• 拿来主义 对交友网站的代码没有考虑
• 抽象意识局限 哪怕改了switch-case结构 却依旧没有意识到类型的匹配和扩展

改进方法

• 对别人写的代码不能懒copy 其实就是懒的(屎一样的switch-case当然看到了😢
• 想清楚要的功能是什么，可以抽象出哪几个部分，是否满足方法/组件设计的原则
• 多吃些核桃