我在一家企业医院外科做护士的时候，有一位小我一岁的护工，我叫她小汪。我一直相信人与人之间的缘分，对于我，她有一些依恋，她说我待她好。我喜欢她的为人憨厚老实、做事踏实勤勉。病房和走道的地面，她一天要拖好多个来回，收拾整理病人的被褥她一样也不含糊，来了新病人，她会主动地协助护士铺床叠被。她在医院工作期间，常来我家玩，后来，她的父亲一年也总要到我家来几回。几年后，她离开了医院，她父亲告诉我，她在上海打工，之后成家生子。那时候，我们都没有手机，后来，我也离开了医院，再后来，又搬了家，便失去了联系，但是，心里一直惦记她想念她——她的外形如苔、知识层次如苔，却在平常的人生道路上，认真地生活、努力地开花结果。

常年在我们单位收报纸废品的一位妇人，那天来时，她的神情格外的欢快，她从口袋里掏出些软糖，给我们办公室每位同事两颗。她说她很开心，她的大儿媳生了一对龙凤胎。早先就听她说过，她的大儿子是安庆某医院的医生，她的小儿子正在华师大读博士。她还说过，她爱人身体不好，肾脏做过大手术，收报纸废品这样的重活，主要由她完成，在她把大堆大堆的报纸废品从楼上搬至楼下，她往三轮车上搬时，她爱人帮她搭把手。她是家里的功臣，两个儿子的培养，家庭生活的支撑，她起着举足轻重的作用。她很辛苦，她很劳累，但是，每次我见到她时，她脸上都挂着灿烂的笑容——她也平常如苔，但是，她努力地做事挣钱，努力地经营自己的家庭，并且，她总是向大家展示自己最阳光的一面，她始终洋溢在面庞上的笑容，亦如牡丹开。

我年少时，家里没有男性劳动力，家里的农活，几乎全部由母亲和姐姐去完成。这是由我家的特殊情况决定的，父亲当年从苏州大学毕业后，在绩溪中学从事教育工作，在我出生那年，父亲虽然调到了离家三十里路远处的汤沟中学教书，但是父亲基本上还是不可能帮助母亲做农活，一来做不了，二来也没有时间去做。姐姐九岁那年，母亲生下大哥，后来相继生下二哥、我和弟弟。姐姐后面的我们姊妹四个，到了上学年龄，一个一个地被母亲送进学校读书。因为缺少劳动力，也因为当时老师的工资水平实在有限，我们家的生活一直都很清贫，不仅如此，还不时地遭受有许多强壮劳动力人家的欺负。不服输的母亲，因为常年超负荷的劳动，身体上老伤叠加新伤，但是，再苦再难，给我们姊妹四个读书，是母亲坚守的底线。母亲也是苔，她的内心聚集着一团火焰，那团火焰，如牡丹，照亮着她自己的内心，也照亮着我们从贫困生活里一步一个脚印地走过来的一家人。

在我刚踏入社会那几年，除了工作，我的业余时间基本上荒废了。如今每每想起，都无比地心疼和自责。后来成家生子，业余时间被没完没了的家庭琐碎事务以及孩子的学习教育悉数占据了，孩子大一些后，我开始阅读一些书籍，后来尝试写作，也算是为自己的业余生活开辟了一条路。在这条路上，我一直走得战战兢兢如履薄冰，因为起步太迟，也因为天赋不够，但是，于我，那毕竟是可以带给我充实感和愉悦感的一条路，我在收获文学营养的同时，也收获了一些提升自己品质素质方面的营养，如此，虽在红尘世井里跌打滚爬多年，不至于粗陋到鄙俗。

春水初生，春林初盛。我深知，自己平常如苔，在和暖宜人的春光里，牡丹花开的样子，万花齐放的姿态，我唯有仰望，但是，这并不妨碍，我欣赏，我效仿。

我从小生长在天津，爱吃螃蟹。那时在路边摊位上就有当日蒸煮的螃蟹，价钱很便宜，红红的煞是诱人。尤其那碗口大的海螃蟹更是解馋，吃一只就差不多饱了，连饭也不想吃了。我的老姨夫是农民，在天津附近的军粮城种植水稻，也在稻田里养螃蟹。每年秋天总要送来很多稻田蟹，虽说个头不大，但个个“顶盖肥”。全家人大口朵颐，总要吃个尽兴，至今想起来，还口有余香。

有一年我和妻子回天津探亲，父母别提多高兴了。听说妻子是太原人，从小没吃过螃蟹，母亲就亲自去买。当时天津胡同里，有叫卖“活螃蟹”的小商贩，用一条湿布袋子装着螃蟹。母亲用有盖的饭锅买回螃蟹，拿出一只，让妻子观看。形状可怕，丑陋凶狠，八条腿横着爬行。我打趣说，这就是成语“横行霸（八）道”的来源。母亲在煤球火炉上清蒸螃蟹，开始用手按压着锅盖，听见锅里劈里叭啦响，不一会儿就安静下来了。妻子悄悄对我说：“螃蟹真恓惶！”这时母亲开始切姜末，倒上天津青酱（酱油），还特意给妻子备上醋。大约蒸了一刻钟，揭开锅盖一看，螃蟹全成了红色，蒸锅水面浮着一层油，让人垂涎欲滴。

父亲让我们趁热吃，并介绍说：“秋季刚好是螃蟹生长最好的时候，时下正是饭桌上的时令美味。吃圆脐的母蟹，蟹黄多；吃长脐的公蟹，蟹膏多。你们多吃点！”妻子没有动手，我给她先揭开了蟹盖，用筷子把蟹黄剥落在碗里，蘸着姜末酱油吃。妻子一尝，果然味道鲜美。父亲又告诉哪里是蟹腮、蟹胃、蟹肠、蟹心，这四处不能吃。然后我掰开蟹身，让妻子吃白色的蟹肉，最后吃蟹钳和蟹腿，这可需要好牙口了，好在那时我们正年轻。

我们也有好久没有吃螃蟹了，如今贴心的大儿子儿媳送来大闸蟹，让我们老两口回味家乡美味，大饱口福了。喜爱读书的老伴对我说：“鲁迅先生说过，第一个吃螃蟹的人是令人钦佩的勇士啊！”我若有所思地接着说：“吃螃蟹，让我们缅怀起早已作古的两位老人，令人感怀的无价亲情啊！”

示例描述：根据 文件后缀fileSuffix 所属的范围，获取对应单一的icon值

// 文件后缀
const fileSuffix = 'ppt'

// 创建映射
const map = {
    "xls":["xls", "xlsx", "xlsm"],
    "doc": ["doc", "docx"],
    "ppt": ["ppt", "pptx"],
    "pdf": ["pdf"],
    "audio":["mp3", "wma"],
    "media":["mp4"],
    "zip": ["zip", "7z", "rar", "apz"],
    "txt":["txt"],
    "image":["jpg", "jpeg", "gif", "png"]
}
// 有的小伙伴可能或 for in 循环对象判断
// 少数或许实现思路是这样的
const icon = Object.keys(map)[Object.values(map).findIndex(i => i.includes(fileSuffix))] || 'default'
复制代码

思考：如果我们现在有这么一个场景，多个范围值对应一个单一值，这个 单一值 可以是一个字符串，也可以是一个函数，传入的值如果不在对应范围值内，我们需要返回一个默认值或执行一个默认的函数，那么我们又当如何做呢

示例

// 文件后缀
const fileSuffix = 'ppt'
const defaultFn = ()=>{}

 // 如果 fileSuffix 是属于 ["xls", "xlsx", "xlsm"]当中，返回"xls"
 // 如果 fileSuffix 是属于 ["zip"] 当中，就返回 逻辑处理的的结果，否则就 执行默认函数 
 
 if(["xls", "xlsx", "xlsm"].includes(fileSuffix)){
     return "xls"
 }else if(["zip"].includes(fileSuffix)){
     // 各种逻辑处理...
     return "各种逻辑处理后的结果"
 }
 // 两个还好处理，一旦变得多起来，这种if else 就不好维护了
复制代码

有的小伙伴或许想到了 Map，因为任何值(对象或者原始值) 都可以作为一个键,但是我还是不想用 Map 来实现，请原谅我的倔强

继续思考和优化，创建了3种数据类型，都需要达到兼容

// 文件后缀
const fileSuffix = 'ppt'

// 创建数 据类型 1，fileSuffix 只有属于对应 key 解析后的数组，就返回对应的字符串值
const type1 = {
    '["xls", "xlsx", "xlsm"]':"xls",
    '["doc", "docx"]':"doc",
    '["ppt", "pptx"]':"ppt",
    '["pdf"]':"pdf",
    '["mp3", "wma"]':"audio",
    '["mp4"]':"media",
    '["zip", "7z", "rar", "apz"]':"zip",
    '["txt"]':"txt",
    '["jpg", "jpeg", "gif", "png"]':"image"
}

// 创建数 据类型 2，fileSuffix 只有属于对应 key 解析后的数组，就返回对应函数返回的值
const type2 = {
    '["xls", "xlsx", "xlsm"]':()=>{
        // 各种逻辑处理...
        return "各种逻辑处理的结果"+"xls"
    },
    '["doc", "docx"]':()=>{
         // 各种逻辑处理...
        return "各种逻辑处理的结果"+"doc"
    },
    '["ppt", "pptx"]':()=>{
           // 各种逻辑处理...
        return "各种逻辑处理的结果"+"ppt"
    },
    '["pdf"]':()=>{
          // 各种逻辑处理...
        return "各种逻辑处理的结果"+"pdf"
    },
    '["mp3", "wma"]':()=>{
          // 各种逻辑处理...
        return "各种逻辑处理的结果"+"audio"
    },
    '["mp4"]':()=>{
          // 各种逻辑处理...
        return "各种逻辑处理的结果"+"media"
    },
    '["zip", "7z", "rar", "apz"]':()=>{
          // 各种逻辑处理...
        return "各种逻辑处理的结果"+"zip"
    },
    '["txt"]':()=>{
          // 各种逻辑处理...
        return "各种逻辑处理的结果"+"txt"
    },
    '["jpg", "jpeg", "gif", "png"]':()=>{
          // 各种逻辑处理...
        return "各种逻辑处理的结果"+"image"
    }
}
// 创建数 据类型 3，fileSuffix 只有属于对应 key 解析后的数组，就返回对应的字符串值 或 返回 对应函数返回的值
const type3 = {
    '["xls", "xlsx", "xlsm"]':"xls",
    '["doc", "docx"]':"doc",
    '["ppt", "pptx"]':"ppt",
    '["pdf"]':"pdf",
    '["mp3", "wma"]':()=>{
       // 各种逻辑处理...
        return "各种逻辑处理的结果"+"audio"
    },
    '["mp4"]':"media",
    '["zip", "7z", "rar", "apz"]':"zip",
    '["txt"]':"txt",
    '["jpg", "jpeg", "gif", "png"]':()=>{
        // 各种逻辑处理...
        return "各种逻辑处理的结果"+"image"
    }
}
复制代码

事实上，实际项目中就有很多这样的需求，用 对象处理也是简化 if else的最佳方案，我们用一个函数来兼容这些场景，PS：我们map 对象的key种的属性值 只支持数组 和 字符串

/**                                       
 * @description: 简化函数 key为数组字符串
 * @param { Object } o: 像 上面的 3种对象            
 * @param { String } s ：像 上面的 3种对象一样的 key 字符串      
 * @param { String | Function } d ：没有匹配到 给的默认值 或是 执行的默认函数  
 */
function simplify(o, s, d){

    // 查询是否能找到对应的key

    const k = Object.keys(o).find(k => JSON.parse(k).includes(s))

    // 如果查找到 并且 其对应的值是字符串，那么直接返回该字符串

    if(typeof o[k] ==='string')return o[k]

    // 如果查找到 并且 其对应的值是函数，那么直接执行

    if(typeof o[k] === 'function')return o[k]()

    // 如果没有查找到并且 默认d是字符串，那么就返回默认d值

    if(!o[k] && d && typeof d ==='string')return d

    // 如果没有查找到并且 默认d是函数，那么就直接执行

    if(!o[k] && d && typeof d === 'function') return d()

}
// 如何使用
// 没有从type1 种匹配到 'wma'，就返回 'default'，匹配到就返回匹配值
simplify(type1,'wma','default')


simplify(type1,'wma1',()=>{
    // 没有匹配到 执行该默认函数
    console.log('没有匹配到 执行该默认函数了')
})

复制代码

if

有这么段代码，代码如下

const a = 1
const b = 1
const c = 1

if (a === 1) {
    if (b === 1) {
        if (c === 1) {
            return 'a1-b1-c1'
        } else if (c === 2) {
            return 'a1-b1-c2'
        } else {
            return 'a1-b1-else'
        }
    } else if (b === 2) {
        if (c === 1) {
            return 'a1-b2-c1'
        } else if (c === 2) {
            return 'a1-b2-c2'
        } else {
            return 'a1-b2-else'
        }
    } else {
        if (c === 1) {
            return 'a1-else-c1'
        } else if (c === 2) {
            return 'a1-else-c2'
        } else {
            return 'a1-else-else'
        }
    }
} else if (a === 2) {
    if (b === 1) {
        if (c === 1) {
            return 'a2-b1-c1'
        } else if (c === 2) {
            return 'a2-b1-c2'
        } else {
            return 'a2-b1-else'
        }
    } else if (b === 2) {
        if (c === 1) {
            return 'a2-b2-c1'
        } else if (c === 2) {
            return 'a2-b2-c2'
        } else {
            return 'a2-b2-else'
        }
    } else {
        if (c === 1) {
            return 'a2-else-c1'
        } else if (c === 2) {
            return 'a2-else-c2'
        } else {
            return 'a2-else-else'
        }
    }
} else {
    if (b === 1) {
        if (c === 1) {
            return 'else-b1-c1'
        } else if (c === 2) {
            return 'else-b1-c2'
        } else {
            return 'else-b1-else'
        }
    } else if (b === 2) {
        if (c === 1) {
            return 'else-b2-c1'
        } else if (c === 2) {
            return 'else-b2-c2'
        } else {
            return 'else-b2c-else'
        }
    } else {
        if (c === 1) {
            return 'else-else-c1'
        } else if (c === 2) {
            return 'else-else-c2'
        } else {
            return 'else-else-else'
        }
    }
}
复制代码

以上还只是写了不多的几个条件，如果很多就会变的很麻烦，不好维护，因此，我们把上面的代码扁平化再看看

const a = 1
const b = 1
const c = 1

const elseValue = 99 // else 统一标识为 99 ，可以自定义

if(a===1 && b===1 && c===1){
     return 'a1-b1-c1'
}else if(a===1 && b===1 && c===2){
    return 'a1-b1-c2'
}else if(a===1 && b===1 && c===elseValue){
    return 'a1-b1-else'
} else if(a===1 && b===2 && c===1){
     return 'a1-b2-c1'
}else if(a===1 && b===2 && c===2){
    return 'a1-b2-c2'
}else if(a===1 && b===2 && c===elseValue){
    return 'a1-b2-else'
} else if(a===1 && b===elseValue && c===1){
     return 'a1-else-c1'
}else if(a===1 && b===elseValue && c===2){
    return 'a1-else-c2'
}else if(a===1 && b===elseValue && c===elseValue){
    return 'a1-else-else'
}
else 

if(a===2 && b===1 && c===1){
     return 'a2-b1-c1'
}else if(a===2 && b===1 && c===2){
    return 'a2-b1-c2'
}else if(a===2 && b===1 && c===elseValue){
    return 'a2-b1-else'
} else if(a===2 && b===2 && c===1){
     return 'a2-b2-c1'
}else if(a===2 && b===2 && c===2){
    return 'a2-b2-c2'
}else if(a===2 && b===2 && c===elseValue){
    return 'a2-b2-else'
} else if(a===2 && b===elseValue && c===1){
     return 'a2-else-c1'
}else if(a===2 && b===elseValue && c===2){
    return 'a2-else-c2'
}else if(a===2 && b===elseValue && c===elseValue){
    return 'a2-else-else'
}

else

if(a===elseValue && b===1 && c===1){
     return 'else-b1-c1'
}else if(a==elseValue && b===1 && c===2){
    return 'else-b1-c2'
}else if(a===elseValue && b===1 && c===elseValue){
    return 'else-b1-else'
} else if(a===elseValue && b===2 && c===1){
     return 'else-b2-c1'
}else if(a===elseValue && b===2 && c===2){
    return 'else-b2-c2'
}else if(a===elseValue && b===2 && c===elseValue){
    return 'else-b2-else'
} else if(a===elseValue && b===elseValue && c===1){
     return 'else-else-c1'
}else if(a===elseValue && b===elseValue && c===2){
    return 'else-else-c2'
}else if(a===elseValue && b===elseValue && c===elseValue){
    return 'else-else-else'
}
复制代码

我们再进一步处理和优化

const a = 1
const b = 1
const c = 1

const ValidValue = [1,2]
const elseValue = 99

// a 和 b、c的枚举值只能是约定好的 1 或 2，即使后面要加，我们在map对象里面也是很好加的，管理和维护一个对象更方便，else 我们统一标识为 99，你可以定义成其它

// 我们创建一个对象,依此来维护一个对象

const map = {
     '{"a":1,"b":1,"c":1}':()=>'a1-b1-c1',
     '{"a":1,"b":1,"c":2}':()=>'a1-b1-c2',
     '{"a":1,"b":1,"c":99}':()=>'a1-b1-else',
     '{"a":1,"b":2,"c":1}':()=>'a1-b2-c1',
     '{"a":1,"b":2,"c":2}':()=>'a1-b2-c2',
     '{"a":1,"b":2,"c":99}':()=>'a1-b2-else',
     '{"a":1,"b":99,"c":1}':()=>'a1-else-c1',
     '{"a":1,"b":99,"c":2}':()=>'a1-else-c2',
     '{"a":1,"b":99,"c":99}':()=>'a1-else-else',
     
     '{"a":2,"b":1,"c":1}':()=>'a2-b1-c1',
     '{"a":2,"b":1,"c":2}':()=>'a2-b1-c2',
     '{"a":2,"b":1,"c":99}':()=>'a2-b1-else',
     '{"a":2,"b":2,"c":1}':()=>'a2-b2-c1',
     '{"a":2,"b":2,"c":2}':()=>'a2-b2-c2',
     '{"a":2,"b":2,"c":99}':()=>'a2-b2-else',
     '{"a":2,"b":99,"c":1}':()=>'a2-else-c1',
     '{"a":2,"b":99,"c":2}':()=>'a2-else-c2',
     '{"a":2,"b":99,"c":99}':()=>'a2-else-else',
     
     '{"a":99,"b":1,"c":1}':()=>'else-b1-c1',
     '{"a":99,"b":1,"c":2}':()=>'else-b1-c2',
     '{"a":99,"b":1,"c":99}':()=>'else-b1-else',
     '{"a":99,"b":2,"c":1}':()=>'else-b2-c1',
     '{"a":99,"b":2,"c":2}':()=>'else-b2-c2',
     '{"a":99,"b":2,"c":99}':()=>'else-b2-else',
     '{"a":99,"b":99,"c":1}':()=>'else-else-c1',
     '{"a":99,"b":99,"c":2}':()=>'else-else-c2',
     '{"a":99,"b":99,"c":99}':()=>'else-else-else',
}
// map 的key 你也可以 这样写,如下
/*
const map = {
    [JSON.stringify({a:1,b:1,c:1})]:()=>'a1-b1-c1'
}
*/
/**@description: 简化函数 对象key为对象字符串
 * @param { Object } o: 对象 map
 * @param { Object } c ：条件对象
 * @param { String | Function } d ：没有匹配到 给的默认值 或是 执行的默认函数 
 */
 const simplifyFunc = function (o, c, d) {
    const keys = Object.keys(o)
    if (!keys.length) throw Error('不接受空对象')
    const index = keys.findIndex(i => JSON.stringify(JSON.parse(i)) === JSON.stringify(c))
    const val = o[keys[index]]
    if (typeof val === 'string') return val
    if (typeof val === 'function') return val()
    if (!val && typeof d === 'string') return d
    if (!val && typeof d === 'function') return d()
}

simplifyFunc(map,{ 
    a:ValidValue.includes(a)?a:elseValue,
    b:ValidValue.includes(b)?a:elseValue,
    c:ValidValue.includes(c)?a:elseValue 
})
复制代码

以上两个代码简洁优化的核心原理 是创建一个对象，对象的key转换成了 字符串数组 或是 字符串对象，我们维护一个对象比维护一大堆if else 更方便

switch

switch 优化的第一反应应该是对象，但是也看具体情况

function previewWeek(i){
    switch(i){
        case 1:
            return '星期一'
            break;
        case 2:
            return '星期二'
            break;
        case 3:
            return '星期三'
            break;  
        case 4:
            return '星期四'
            break;  
        case 5:
            return '星期五'
            break;  
        case 6:
            return '星期六'
            break;  
        case 7:
            return '星期日'
            break;
        default:
            return ''
    }
}
复制代码

用 对象形式优化

function previewWeek(i){
    return ({
        1:'星期一',
        2:'星期二',
        3:'星期三',
        4:'星期四',
        5:'星期五',
        6:'星期六',
        7:'星期日',
    })[i] || ''
}
复制代码

是不一样了，代码确实少了很多，其实观察其特征，不用对象也是可以优化的，这特征就是规律，键值都是对应的，1的值是 '星期一',都是 1，和索引有关系，那么索引和数组有关系，那么我们用数组试试呢

function previewWeek(i){
    return  i>0 && i<8 ?'星期'+['一','二','三','四','五','六','日'][i-1]:''
}
复制代码

于是我们懂得了，方法很多，只是未能找到最适合的那个，就写到这里吧，感谢你的阅读，如果对你有用，求个赞

结语

如果你有更好的想法，欢迎留言

文中若有不准确或错误的地方，欢迎指出

1.打包体积 优化思路

• 提取第三方库或通过引用外部文件的方式引入第三方库

• 代码压缩插件UglifyJsPlugin

• 服务器启用gzip压缩

• 按需加载资源文件 require.ensure

• 优化devtool中的source-map

• 剥离css文件，单独打包

• 去除不必要插件，通常就是开发环境与生产环境用同一套配置文件导致

2.打包效率

• 开发环境采用增量构建，启用热更新

• 开发环境不做无意义的工作如提取css计算文件hash等

• 配置devtool

• 选择合适的loader

• 个别loader开启cache 如babel-loader

• 第三方库采用引入方式

• 提取公共代码

• 优化构建时的搜索路径 指明需要构建目录及不需要构建目录

• 模块化引入需要的部分

3.说一下webpack的一些plugin，怎么使用webpack对项目进行优化 构建优化

• 减少编译体积 ContextReplacementPugin、IgnorePlugin、babel-plugin-import、babel-plugin-transform-runtime

• 并行编译 happypack、thread-loader、uglifyjsWebpackPlugin开启并行

• 缓存 cache-loader、hard-source-webpack-plugin、uglifyjsWebpackPlugin开启缓存、babel-loader开启缓存

• 预编译 dllWebpackPlugin && DllReferencePlugin、auto-dll-webapck-plugin