在 GitHub 上有一個(gè)新項(xiàng)目，它描述了「最佳垃圾代碼」的十九條關(guān)鍵準(zhǔn)則。從變量命名到注釋編寫。這些準(zhǔn)則將指導(dǎo)你寫出最亮眼的爛代碼。

為了保持與原 GitHub 項(xiàng)目一致的風(fēng)格，下文沒(méi)有進(jìn)行轉(zhuǎn)換。讀者們可以以相反的角度來(lái)理解所有觀點(diǎn)，這樣就能完美避免寫出垃圾代碼。

當(dāng)然，以下十九條垃圾代碼書寫準(zhǔn)則并沒(méi)有面面俱到，如果讀者們發(fā)現(xiàn)有一些難以忍受的爛代碼習(xí)慣，也可以留言發(fā)表你的看法。

這是一個(gè)你的項(xiàng)目應(yīng)該遵循的垃圾代碼書寫準(zhǔn)則的列表：

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

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

變量/函數(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

// 隱藏錯(cuò)誤彈窗
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除不用的代碼，最多注釋掉。