垃圾代碼書寫準(zhǔn)則

這是一個(gè)你的項(xiàng)目應(yīng)該遵循的垃圾代碼書寫準(zhǔn)則的列表，符合這些準(zhǔn)則的代碼將被認(rèn)為是合格的垃圾代碼。

獲取徽章

如果你的倉(cāng)庫(kù)遵循垃圾代碼書寫準(zhǔn)則，你就可以用上這個(gè)的"state-of-the-art shitcode" 徽章：

準(zhǔn)則

???以一種代碼已經(jīng)被混淆的方式命名變量

如果我們鍵入的東西越少，那么就有越多的時(shí)間去思考代碼邏輯等問(wèn)題。

Good ????

let a = 42;

Bad ????

let age = 42;

???變量/函數(shù)混合命名風(fēng)格

為不同慶祝一下。

Good ????

let wWidth = 640;
let w_height = 480;

Bad ????

let windowWidth = 640;
let windowHeight = 480;

???不要寫注釋

反正沒(méi)人會(huì)讀你的代碼。

Good ????

const cdr = 700;

Bad ????

更多時(shí)候，評(píng)論應(yīng)該包含一些“為什么”，而不是一些“是什么”。如果“什么”在代碼中不清楚，那么代碼可能太混亂了。

// 700ms的數(shù)量是根據(jù)UX A/B測(cè)試結(jié)果進(jìn)行經(jīng)驗(yàn)計(jì)算的。
// @查看: <詳細(xì)解釋700的一個(gè)鏈接>
const callbackDebounceRate = 700;

???使用母語(yǔ)寫注釋

如果您違反了“無(wú)注釋”原則，那么至少嘗試用一種不同于您用來(lái)編寫代碼的語(yǔ)言來(lái)編寫注釋。如果你的母語(yǔ)是英語(yǔ)，你可能會(huì)違反這個(gè)原則。

Good ????

// Закрива?мо модальне в?конечко при виникненн? помилки.
toggleModal(false);

Bad ????

// Hide modal window on error
toggleModal(false);

???盡可能混合不同的格式

為不同慶祝一下。

Good ????

let i = ['tomato', 'onion', 'mushrooms'];
let d = [ "ketchup", "mayonnaise" ];

Bad ????

let ingredients = ['tomato', 'onion', 'mushrooms'];
let dressings = ['ketchup', 'mayonnaise'];

???盡可能把代碼寫成一行

Good ????

document.location.search.replace(/(^\?)/,'').split('&').reduce(function(o,n){n=n.split('=');o[n[0]]=n[1];return o},{})

Bad ????

document.location.search
  .replace(/(^\?)/, '')
  .split('&')
  .reduce((searchParams, keyValuePair) => {
    keyValuePair = keyValuePair.split('=');
    searchParams[keyValuePair[0]] = keyValuePair[1];
    return searchParams;
  },
  {}
)

???不要處理錯(cuò)誤

無(wú)論何時(shí)發(fā)現(xiàn)錯(cuò)誤，都沒(méi)有必要讓任何人知道它。沒(méi)有日志，沒(méi)有錯(cuò)誤彈框。

Good ????

try {
  // 意料之外的情況。
} catch (error) {
  // tss... ??
}

Bad ????

try {
  // 意料之外的情況。
} catch (error) {
  setErrorMessage(error.message);
  // and/or
  logError(error);
}

???廣泛使用全局變量

全球化的原則。

Good ????

let x = 5;

function square() {
  x = x ** 2;
}

square(); // 現(xiàn)在x是25

Bad ????

let x = 5;

function square(num) {
  return num ** 2;
}

x = square(x); // 現(xiàn)在x是25

???創(chuàng)建你不會(huì)使用的變量

以防萬(wàn)一。

Good ????

function sum(a, b, c) {
  const timeout = 1300;
  const result = a + b;
  return a + b;
}

Bad ????

function sum(a, b) {
  return a + b;
}

???如果語(yǔ)言允許，不要指定類型和/或不執(zhí)行類型檢查。

Good ????

function sum(a, b) {
  return a + b;
}

// 在這里享受沒(méi)有注釋的快樂(lè)
const guessWhat = sum([], {}); // -> "[object Object]"
const guessWhatAgain = sum({}, []); // -> 0

Bad ????

function sum(a: number, b: number): ?number {
  // 當(dāng)我們?cè)贘S中不做置換和/或流類型檢查時(shí)，覆蓋這種情況。
  if (typeof a !== 'number' && typeof b !== 'number') {
    return undefined;
  }
  return a + b;
}

// 這個(gè)應(yīng)該在轉(zhuǎn)換/編譯期間失敗。
const guessWhat = sum([], {}); // -> undefined

???你應(yīng)該有不能到達(dá)的代碼

這是你的 "Plan B".

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;
}

???三角法則

就像鳥巢，鳥巢，鳥巢。

Good ????

function someFunction() {
  if (condition1) {
    if (condition2) {
      asyncFunction(params, (result) => {
        if (result) {
          for (;;) {
            if (condition3) {
            }
          }
        }
      })
    }
  }
}

Bad ????

async function someFunction() {
  if (!condition1 || !condition2) {
    return;
  }
  
  const result = await asyncFunction(params);
  if (!result) {
    return;
  }
  
  for (;;) {
    if (condition3) {
    }
  }
}

???混合縮進(jìn)

避免縮進(jìn)，因?yàn)樗鼈儠?huì)使復(fù)雜的代碼在編輯器中占用更多的空間。如果你不喜歡回避他們，那就和他們搗亂。

Good ????

const fruits = ['apple',
  'orange', 'grape', 'pineapple'];
  const toppings = ['syrup', 'cream', 
                    'jam', 
                    'chocolate'];
const desserts = [];
fruits.forEach(fruit => {
toppings.forEach(topping => {
    desserts.push([
fruit,topping]);
    });})

Bad ????

const fruits = ['apple', 'orange', 'grape', 'pineapple'];
const toppings = ['syrup', 'cream', 'jam', 'chocolate'];
const desserts = [];

fruits.forEach(fruit => {
  toppings.forEach(topping => {
    desserts.push([fruit, topping]); 
  });
})

???不要鎖住你的依賴項(xiàng)

以非受控方式更新每個(gè)新安裝的依賴項(xiàng)。為什么堅(jiān)持使用過(guò)去的版本，讓我們使用最先進(jìn)的庫(kù)版本。

Good ????

$ ls -la

package.json

Bad ????

$ ls -la

package.json
package-lock.json

???函數(shù)長(zhǎng)的比短的好

不要把程序邏輯分成可讀的部分。如果IDE的搜索停止，而您無(wú)法找到所需的文件或函數(shù)，該怎么辦?

• 一個(gè)文件中10000行代碼是OK的。

• 一個(gè)函數(shù)體有1000行代碼是OK的。

• 在一個(gè)' service.js ' 中處理許多服務(wù)(第三方庫(kù)和內(nèi)部庫(kù)、一些工具、手寫的數(shù)據(jù)庫(kù)ORM和jQuery滑塊)? 這是OK的。

???不要測(cè)試你的代碼

這是重復(fù)且不需要的工作。

???避免代碼風(fēng)格統(tǒng)一

編寫您想要的代碼，特別是在一個(gè)團(tuán)隊(duì)中有多個(gè)開發(fā)人員的情況下。這是“自由”原則。

???構(gòu)建新項(xiàng)目不需要 README 文檔

一開始我們就應(yīng)該保持。

???保存不必要的代碼

不要?jiǎng)h除不用的代碼，最多注釋掉。

怎么樣，現(xiàn)在你學(xué)會(huì)了沒(méi)有？

如果讓你茅塞頓開的話，別忘了轉(zhuǎn)發(fā)/點(diǎn)贊/收藏哦！

_往期文章推薦_