看看这些被同事喷的JS代码风格你写过多少
最新回答
梦有一把锁
2020-10-27 20:44:42
在编程过程中，代码风格对于代码的可读性、可维护性以及团队协作效率有着至关重要的影响。以下是对一些常见不良JS代码风格的总结，以及对应的改进建议：
- 滥用变量：定义了变量却未使用，或变量使用次数极少。这会导致代码冗余，增加维护成本。应删除未使用的变量，仅保留必要的变量定义。
- 自我感觉良好的缩写：使用如fName、lName等难以理解的变量名。应使用如firstName、lastName等清晰、明确的变量名，提高代码可读性。
- 无说明的参数：在条件判断中使用如8这样的魔数，缺乏明确说明。应定义如MAX_INPUT_LENGTH等常量，使代码意图更清晰。
- 命名过于啰嗦：使用如nameString、theUsers等冗余的变量名。应简化命名，如使用name、users，保持命名简洁明了。
- 长代码缺乏解释：直接使用复杂的正则表达式匹配结果，缺乏解释性变量。应使用如[, city, zipCode]等解构赋值，增强代码可读性。
- 过多使用全局变量：在多个文件中随意定义全局变量，如window.name，易导致变量冲突。应减少全局变量使用，采用局部变量或状态管理工具如Vuex、Redux。
- 求值变量未兜底：对可能为undefined的变量未进行兜底处理，如fullName[1]。应对求值变量进行兜底，如使用fullName[1] || ''，确保代码稳定性。
- 函数命名不明确：函数名如showFriendsList无法清晰表达返回值类型。对于返回布尔值的函数，应使用should、is、can、has等前缀，如shouldShowFriendsList。
- 功能函数非纯函数：函数如plusAbc依赖外部API，导致输出不稳定。功能函数应使用纯函数，确保输入相同则输出唯一。
- 传参缺乏说明：函数调用时传递如true、false等无说明参数。应使用对象传参，并明确参数含义，如{ includePageBackground: true }。
- 函数意图不明确：函数名如emlU无法表达函数意图。动词开头的函数名能更清晰地表达函数行为，如sendEmailToUser。
- 函数功能混杂：一个函数如sendEmailToClients包含多个功能，如过滤客户和发送邮件。应拆分功能，使每个函数只完成一个独立任务。
- 使用命令式循环：采用for循环进行数组操作，如for(i = 1; i <= 10; i++)。应优先使用函数式编程，如map、filter，提高代码可读性。
- 过多的if else：在函数中使用多个if else语句，如根据a的值执行不同操作。应考虑使用switch语句或对象字面量进行优化，减少代码复杂度。
- 未使用箭头函数：采用传统函数表达式，如function foo() { ... }。箭头函数能简化代码，特别是在回调函数中，应优先使用。
- 字符串连接方式传统：使用+号进行字符串连接，如'Hello ' + name + ', it's ' + time + ' now'。模板字符串能更直观地嵌入变量，应使用反引号和${}语法。
- 赋值方式传统：使用传统方式从对象或数组中提取值，如var name = data.name。解构赋值能简化代码，应使用const { name } = data语法。
- 未使用类语法：采用传统的函数原型链实现继承，代码冗长且可读性差。ES6的class语法能更清晰地表达继承关系，应优先使用。
遵循这些最佳实践，可以显著提升代码质量，使代码更易于理解、维护和扩展。同时，利用ESLint、Prettier等工具进行代码格式化和检查，能进一步确保代码风格的一致性。
热门标签
