雨巷 (rainto.top)

屎山代码风格指南

笔记 / 

State-of-the-art Shitcode

✋ 以下不要尝试学习，不要写！给出这些建议就是避免这样写，不听的话，下周就是你提桶跑路的日子（划重点）Good 👍🏻

  1. 良好的代码结构：Bad!👎🏻
    • 使用有意义的变量和函数名，遵循命名规范，使代码易于理解。
    • 组织代码，使用适当的文件和文件夹结构，保持模块化。
    • 避免全局变量的滥用，尽量使用局部作用域。
  2. 单一职责原则：Bad!👎🏻
    • 每个函数或模块应该只负责一个特定的功能。这样的设计使得代码更容易维护和扩展。
  3. DRY 原则（不要重复自己）：Bad!👎🏻
    • 避免复制粘贴代码，尽量将重复的逻辑提取成函数、类或模块。 使用函数封装通用功能，以便在整个应用程序中重复使用。
  4. 注释和文档：Bad!👎🏻
    • 写清晰、有意义的注释，解释代码的目的和特殊考虑。
    • 为 API、函数等提供良好的文档，使其他开发者能够轻松理解和使用你的代码。
  5. 代码复审：Bad!👎🏻
    • 进行代码复审是避免屎山代码的重要步骤。同事可以提供不同的视角和建议，有助于发现潜在的问题。
  6. 测试驱动开发（TDD）：Bad!👎🏻
    • 使用测试来确保代码的质量和稳定性。在编写代码之前先写测试，以确保代码的正确性。
  7. 使用设计模式：Bad!👎🏻
    • 学习并应用设计模式，它们提供了一些通用的解决方案，有助于降低复杂性和提高代码的可维护性。
  8. 版本控制：Bad!👎🏻
    • 使用版本控制系统（如 Git）来跟踪代码的变化，以便轻松地回滚到之前的版本，并且能够合理管理多人协作的情况。
  9. 性能优化和代码优化：Bad!👎🏻
    • 注意代码的性能，避免写出低效的代码。使用工具和技术进行性能分析和优化。
  10. 学习和持续改进：Bad!👎🏻
    • 不断学习新的技术和最佳实践，关注前端领域的最新发展。
    • 定期检讨自己的代码，寻找优化的机会，并从他人的经验中吸取教训。

以下是我精心准备的福利大礼包 Good!👍🏻

通用js,css,html系列

  1. 混淆方式命名变量
js
// Bad 👎🏻（不要参考）
const age = 18

// Good 👍🏻（谨记）
// 这是个啥？猜去吧！没用的，只有我才知道！
const a = ""
  1. 不要注释！不要注释！不要注释！
js
// Bad 👎🏻（不要参考）
// 400的数量是根据UX A/B测试结果进行计算的。
// @查看: <详细解释的一个链接>
const callbackCode = 400

// Good 👍🏻（谨记）
const cbc = 400
  1. 非母语注释

如果你手贱，确实想写注释，你已经违背了规则2,在这种情况下，规则3一定要遵守，写注释用非母语，提升别人看注释的门槛，例如：你的母语是中文，你写注释就用法语或者俄语。有人可能会问，我不会怎么办？善用翻译！

js
// Bad 👎🏻（不要参考）
// 隐藏错误弹窗
togglePop(false)

// Good 👍🏻（谨记）
// Ха - ха, большой идиот, я догадался, что ты скопируешь, чтобы найти переводчика.
togglePop(false)
  1. 尽可能把代码写成一行

把代码写在一行才显得更牛逼,别人写 20 行，你一行就搞定了！实力无需多言！

js
// Bad 👎🏻（不要参考）
document.location.search
  .replace(/(^\?)/, '')
  .split('&')
  .reduce((searchParams, keyValuePair) => {
    keyValuePair = keyValuePair.split('=')
    searchParams[keyValuePair[0]] = keyValuePair[1]
    return searchParams
  }, {})

// Good 👍🏻（谨记）
document.location.search.replace(/(^\?)/,'').split('&').reduce(function(o,n){n=n.split('=');o[n[0]]=n[1];return o},{})
  1. 三角法则

众所周知，三角形是最稳定的结构，严格遵循三角法则的代码又怎么会崩呢？

Good 👍🏻（谨记） / js
function someFunction() {
  if (condition1) {
    if (condition2) {
      asyncFunction(params, (result) => {
        if (result) {
          for (;;) {
            if (condition3) {
            }
          }
        }
      })
    }
  }
}
Bad 👎🏻（不要参考） / js
async function someFunction() {
  if (!condition1 || !condition2) {
    return
  }

  const result = await asyncFunction(params)
  if (!result) {
    return
  }

  for (;;) {
    if (condition3) {
    }
  }
}
  1. 尽可能的使用全局变量
js
// Good 👍🏻（谨记）
let a = 5;
var b = 2;
function square(b) {
  b = a + b;
}
square(1);

// Bad 👎🏻（不要参考）
let num = 5;
function square(sub) {
  return sub ** 2;
}
num = square(x); // 现在x是25
  1. 混合缩进

避免缩进，因为它们会使复杂的代码在编辑器中占用更多的空间。

js
// Good 👍🏻（谨记）
const fruits = [ "Apple",
"Banana", "Cherry",
  "Date",
    "Elderberry",
"Fig",];
const drinks=[
"Coffee",
        "Tea",
        "Cocoa","Cola",]

// Bad 👎🏻（不要参考）
const fruits = [ "Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig"]
const drinks = [ "Coffee", "Tea", "Cocoa", "Cola"]
  1. 循环里面最好if，if里面最好再有循环

正所谓你中有我，我中有你，彼此相依，永不分离。这样写出来的代码才是有灵魂的代码，有个人风格的代码！
⭐ 最好运用上三角法则或混合缩进法则

js
function dealData(num) {
  for (循环1) {
    if (判断1) {
      if (判断2) {
        asyncFunction(params, (result) => {
          if (result) {
            for (循环2) {
              if (判断3) {
              }
            }
          }
        })
      }
    }
  }
}
  1. 写永远无法到达的代码

得不到的才是最好的，这个没啥好说。

js
// Good 👍🏻（谨记）
function square(num) {
  if (typeof num === 'undefined') {
    return undefined
  } else {
    return num ** 2
  }
  return null // 这就是我的"Plan B".
}

// Bad 👎🏻（不要参考）
function square(num) {
  if (typeof num === 'undefined') {
    return undefined
  }
  return num ** 2
}
  1. TypeScript?AnyScript!

类型可选？就别写! 频繁报错？那就any！

ts
// Good 👍🏻（谨记）
function sum(a, b) {
  return a + b
}
sum([],{}) // [object Object]
sum({}, []) // -> 0

// Bad 👎🏻（不要参考）
function sum(a: number, b: number): ?number {
  // 当我们在JS中不做置换和/或流类型检查时，覆盖这种情况。
  if (typeof a !== 'number' && typeof b !== 'number') {
    return undefined
  }
  return a + b
}
sum([], {}) // -> undefined

综上所述，祝愿大家在写💩山的路上越走越远，稳坐岗位！