Loading...
Loading...
Compare original and translation side by side
NEVER choose clever over clear. Simple wins.NEVER choose clever over clear. Simple wins.// ❌ VIOLATION: Clever one-liner
const isPalindrome = (s: string): boolean =>
(s = s.toLowerCase().replace(/[^a-z0-9]/g, '')) === [...s].reverse().join('');
// ✅ CORRECT: Simple and clear
function isPalindrome(str: string): boolean {
const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, '');
for (let i = 0; i < cleaned.length / 2; i++) {
if (cleaned[i] !== cleaned[cleaned.length - 1 - i]) {
return false;
}
}
return true;
}// ❌ 违规:炫技单行代码
const isPalindrome = (s: string): boolean =>
(s = s.toLowerCase().replace(/[^a-z0-9]/g, '')) === [...s].reverse().join('');
// ✅ 正确:简洁清晰
function isPalindrome(str: string): boolean {
const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, '');
for (let i = 0; i < cleaned.length / 2; i++) {
if (cleaned[i] !== cleaned[cleaned.length - 1 - i]) {
return false;
}
}
return true;
}| Complex Code | Impact |
|---|---|
| Clever one-liners | Unreadable, hard to debug |
| Nested ternaries | Logic becomes opaque |
| Over-abstraction | Indirection hides intent |
| Premature optimization | Complexity without measured benefit |
| Design pattern overuse | Patterns for patterns' sake |
| 复杂代码 | 影响 |
|---|---|
| 炫技单行代码 | 难以阅读、难以调试 |
| 嵌套三元表达式 | 逻辑变得模糊 |
| 过度抽象 | 间接性掩盖了真实意图 |
| 过早优化 | 无实测收益的复杂度 |
| 过度使用设计模式 | 为模式而模式 |
// ❌ COMPLEX: "Elegant" functional chain
const result = data
.filter(Boolean)
.map(x => transform(x))
.reduce((acc, x) => ({ ...acc, [x.id]: x }), {})
.values()
.filter(x => x.active)
.sort((a, b) => b.date - a.date)
.slice(0, 10);
// ✅ SIMPLE: Clear steps with names
const validItems = data.filter(Boolean);
const transformed = validItems.map(transform);
const activeItems = transformed.filter(item => item.active);
const sorted = activeItems.sort((a, b) => b.date - a.date);
const topTen = sorted.slice(0, 10);// ❌ 复杂:“优雅”的链式调用
const result = data
.filter(Boolean)
.map(x => transform(x))
.reduce((acc, x) => ({ ...acc, [x.id]: x }), {})
.values()
.filter(x => x.active)
.sort((a, b) => b.date - a.date)
.slice(0, 10);
// ✅ 简洁:带命名的清晰步骤
const validItems = data.filter(Boolean);
const transformed = validItems.map(transform);
const activeItems = transformed.filter(item => item.active);
const sorted = activeItems.sort((a, b) => b.date - a.date);
const topTen = sorted.slice(0, 10);? : ? :? : ? :| Complex | Simple |
|---|---|
| Nested ternaries | if/else statements |
| Long chains | Named intermediate variables |
| Clever regex | Multiple simple checks |
| One-liner | Multi-line with comments |
| Implicit | Explicit |
| Magic numbers | Named constants |
| 复杂写法 | 简洁写法 |
|---|---|
| 嵌套三元表达式 | if/else语句 |
| 长链式调用 | 命名中间变量 |
| 炫技正则 | 多个简单检查 |
| 单行代码 | 多行加注释 |
| 隐式逻辑 | 显式逻辑 |
| 魔法数字 | 命名常量 |
| Symptom | Action |
|---|---|
| "Elegant" one-liner | Expand to clear multi-line |
| Nested ternary | Convert to if/else |
| Complex chain | Break into named steps |
| Multiple approaches | Pick simplest one |
| Pride in cleverness | Rewrite simply |
| 症状 | 行动 |
|---|---|
| “优雅”的单行代码 | 扩展为清晰的多行代码 |
| 嵌套三元表达式 | 转换为if/else |
| 复杂链式调用 | 拆分为带命名的步骤 |
| 多种实现方式 | 选择最简单的一种 |
| 为炫技感自豪 | 重写为简洁版本 |
| Excuse | Reality |
|---|---|
| "It's more elegant" | Clear code is more elegant than clever code. |
| "Shows advanced skills" | Simple solutions show more skill. |
| "It's a nice one-liner" | One-liners are often unreadable. |
| "Technically better" | Premature optimization is bad. |
| "Multiple options show versatility" | One clear solution is better. |
| "It's how experts do it" | Experts write simple code. |
| 借口 | 真相 |
|---|---|
| “它更优雅” | 清晰的代码比炫技代码更优雅。 |
| “展示高级技能” | 简洁的解决方案更能体现技能。 |
| “它是漂亮的单行代码” | 单行代码通常难以阅读。 |
| “技术上更优” | 过早优化是不良实践。 |
| “多种选项展示多面性” | 一个清晰的解决方案更好。 |
| “专家就是这么做的” | 专家编写简洁的代码。 |