乐趣区

关于javascript:前端代码优化-减少代码量和冗杂

背景

繁杂的代码是一场劫难,对于前期的保护十分不敌对,甚至可能会减少包的体积,影响页面首次下载的工夫,所以为了在前端开发越来越精进,望大家对于代码品质上本人做好把控;因为公司每次代码上线都会有小伙伴之间互相代码评审的强制要求,所以下方的优化其实都是工作中高频遇到的问题,总想着哪天有工夫能有个文档记录一下,
PS: 如有问题希指出

Javascript 篇

switch 语句 && 索引代码的优化

 需要是年级回显,依据数字匹配搜寻对应的明文字符;相似的需要还有回显星期和月份 

1. 简略的 switch 实现,if else 实现以及三元实现代码不够简洁 (不举荐)
2. 应用对象模式建设 key-value 映射关系 &&map 优化代码, 简单明了、

function grade(i){
    let _Map = new Map([[1, '一'],
        [2, '二'],
        [3, '三'],
        [4, '四'],
        [5, '五'],
        [6, '六'],
    ]);
    return _Map.get(i)?_Map.get(i)+'年级':'年级匹配不存在'
}

3. 数组 + 索引优化代码

function grade(i){return  i>0 && i<8 ?['一','二','三','四','五','六','日'][i-1] + '年级':'年级匹配不存在'
}

默认值优化

用 || 代替三元写法

 三元写法
function name(str) {return str? str : "erin"}
 优化 || 写法
function name(str) {return str || "erin"}

单个 if else 带 return, 应用三元写法

/* 传统写法 */
function test (bool) {if(bool) {return 1} else {return 0}
}
/* 简洁三元写法 */
function test (bool) {return bool ? 1 : 0}

多个 if else 多后果返回能够参照上方(3. 数组 + 索引优化代码)

本文参考 https://juejin.cn/post/684490…

学无止境,愿我在架构师的路线上越来越近

退出移动版