[譯]編寫(xiě)優(yōu)雅的JavaScript代碼 - 最佳實(shí)踐

[原文]： https://devinduct.com/blogpost/22/javascript-clean-code-best-practices

有沒(méi)有似曾相識(shí)

如果你對(duì)于代碼，除了關(guān)注是否能準(zhǔn)確的執(zhí)行業(yè)務(wù)邏輯，還關(guān)心代碼本身是怎么寫(xiě)的，是否易讀狞换，那么你應(yīng)該會(huì)關(guān)注如何寫(xiě)出干凈優(yōu)雅的代碼。作為專(zhuān)業(yè)的工程師圆丹，除了保證自己的代碼沒(méi)有bug墓捻，能正確的完成業(yè)務(wù)邏輯谜叹，還應(yīng)該保證幾個(gè)月后的自己右锨，或者其他工程師括堤，也能夠維護(hù)自己的代碼。你寫(xiě)的每一段代碼绍移，通常情況下悄窃，都不會(huì)是 一次性 工作，通常伴隨著后續(xù)的不斷迭代蹂窖。如果代碼不夠優(yōu)雅轧抗，那么將來(lái)維護(hù)這段代碼的人(甚至你自己)，都將感到非常痛苦瞬测。祈禱吧鸦致，將來(lái)面對(duì)這些糟糕代碼的人，不是你自己涣楷，而是別人 ??。

OK抗碰，我們先來(lái)簡(jiǎn)單定義下狮斗，什么是 干凈優(yōu)雅 的代碼：干凈優(yōu)雅的代碼，應(yīng)該是自解釋的弧蝇，容易看懂的碳褒，并且很容易修改或者擴(kuò)展一些功能 。

現(xiàn)在看疗，靜下來(lái)回憶一下沙峻，有多少次，當(dāng)你接手前輩留下來(lái)的糟糕代碼而懵逼時(shí)两芳，心里默默的說(shuō)過(guò) "我*"的：

• "我*摔寨，那是啥玩意兒"
• "我*，這段代碼是干啥的”
• "我*怖辆，這個(gè)變量又是干啥的"

[譯注]： 我*是复，作者真大神啊删顶，上面描繪的太真實(shí)了。有木有一種 Big brother is watching you 的趕腳淑廊。

嗯逗余，下面這個(gè)圖片完美的展示了這種情形：

1.jpeg

引用 Robert C. Martin 的名言來(lái)說(shuō)明這種情況：

丑陋的代碼也能實(shí)現(xiàn)功能。但是不夠優(yōu)雅的代碼季惩，往往會(huì)讓整個(gè)開(kāi)發(fā)團(tuán)隊(duì)都跪在地上哭泣录粱。

在這篇文章里，我主要講下載 JavaScript里怎么書(shū)寫(xiě)干凈優(yōu)雅的代碼画拾，但是對(duì)于其他編程語(yǔ)言啥繁，道理也是類(lèi)似的。

JavaScript優(yōu)雅代碼的最佳實(shí)踐

1. 強(qiáng)類(lèi)型校驗(yàn)

使用 === 而不是 == 碾阁。

[譯注] ：這一條應(yīng)該是廣泛接受了吧输虱，居然還有人面試會(huì)問(wèn) == 類(lèi)型轉(zhuǎn)換的問(wèn)題……

// If not handled properly, it can dramatically affect the program logic. It's like, you expect to go left, but for some reason, you go right.
0 == false // true
0 === false // false
2 == "2" // true
2 === "2" // false

// example
const value = "500";
if (value === 500) {
  console.log(value);
  // it will not be reached
}

if (value === "500") {
  console.log(value);
  // it will be reached
}

2. 變量命名

變量、字段命名脂凶，應(yīng)該包含它所對(duì)應(yīng)的真實(shí)含義宪睹。這樣更容易在代碼里搜索，并且其他人看到這些變量蚕钦，也更容易理解亭病。

錯(cuò)誤的示范

let daysSLV = 10;
let y = new Date().getFullYear();

let ok;
if (user.age > 30) {
  ok = true;
}

正確的示范

const MAX_AGE = 30;
let daysSinceLastVisit = 10;
let currentYear = new Date().getFullYear();

...

const isUserOlderThanAllowed = user.age > MAX_AGE;

不要在變量名中加入不必要的單詞。

錯(cuò)誤的示范

let nameValue;
let theProduct;

正確的示范

let name;
let product;

不要強(qiáng)迫開(kāi)發(fā)者去記住變量名的上下文嘶居。

錯(cuò)誤的示范

const users = ["John", "Marco", "Peter"];
users.forEach(u => {
  doSomething();
  doSomethingElse();
  // ...
  // ...
  // ...
  // ...
  // Here we have the WTF situation: WTF is `u` for?
  register(u);
});

正確的示范

const users = ["John", "Marco", "Peter"];
users.forEach(user => {
  doSomething();
  doSomethingElse();
  // ...
  // ...
  // ...
  // ...
  register(user);
});

不要在變量名中添加多余的上下文信息罪帖。

錯(cuò)誤的示范

const user = {
  userName: "John",
  userSurname: "Doe",
  userAge: "28"
};

...

user.userName;

正確的示范

const user = {
  name: "John",
  surname: "Doe",
  age: "28"
};

...

user.name;

3. 函數(shù)相關(guān)

盡量使用足夠長(zhǎng)的能夠描述函數(shù)功能的命名。通常函數(shù)都會(huì)執(zhí)行一個(gè)明確的動(dòng)作或意圖邮屁，那么函數(shù)名就應(yīng)該是能夠描述這個(gè)意圖一個(gè)動(dòng)詞或者表達(dá)語(yǔ)句，包含函數(shù)的參數(shù)命名也應(yīng)該能清晰的表達(dá)具體參數(shù)的含義佑吝。

錯(cuò)誤的示范

function notif(user) {
  // implementation
}

正確的示范

function notifyUser(emailAddress) {
  // implementation
}

避免函數(shù)有太多的形參。比較理想的情況下开仰，一個(gè)函數(shù)的參數(shù)應(yīng)該 <=2個(gè) 。函數(shù)的參數(shù)越少，越容易測(cè)試抖所。

錯(cuò)誤的示范

function getUsers(fields, fromDate, toDate) {
  // implementation
}

正確的示范

function getUsers({ fields, fromDate, toDate }) {
  // implementation
}

getUsers({
  fields: ['name', 'surname', 'email'],
  fromDate: '2019-01-01',
  toDate: '2019-01-18'
});

如果函數(shù)的某個(gè)參數(shù)有默認(rèn)值梨州，那么應(yīng)該使用新的參數(shù)默認(rèn)值語(yǔ)法，而不是在函數(shù)里使用 || 來(lái)判斷田轧。

錯(cuò)誤的示范

function createShape(type) {
  const shapeType = type || "cube";
  // ...
}

正確的示范

function createShape(type = "cube") {
  // ...
}

一個(gè)函數(shù)應(yīng)該做一件事情暴匠。避免在一個(gè)函數(shù)里，實(shí)現(xiàn)多個(gè)動(dòng)作傻粘。

錯(cuò)誤的示范

function notifyUsers(users) {
  users.forEach(user => {
    const userRecord = database.lookup(user);
    if (userRecord.isVerified()) {
      notify(user);
    }
  });
}

正確的示范

function notifyVerifiedUsers(users) {
  users.filter(isUserVerified).forEach(notify);
}

function isUserVerified(user) {
  const userRecord = database.lookup(user);
  return userRecord.isVerified();
}

使用 Object.assign 來(lái)給對(duì)象設(shè)置默認(rèn)值每窖。

錯(cuò)誤的示范

const shapeConfig = {
  type: "cube",
  width: 200,
  height: null
};

function createShape(config) {
  config.type = config.type || "cube";
  config.width = config.width || 250;
  config.height = config.width || 250;
}

createShape(shapeConfig);

正確的示范

const shapeConfig = {
  type: "cube",
  width: 200
  // Exclude the 'height' key
};

function createShape(config) {
  config = Object.assign(
    {
      type: "cube",
      width: 250,
      height: 250
    },
    config
  );

  ...
}

createShape(shapeConfig);

不要在函數(shù)參數(shù)中，包括某些標(biāo)記參數(shù)弦悉，通常這意味著你的函數(shù)實(shí)現(xiàn)了過(guò)多的邏輯窒典。

錯(cuò)誤的示范

function createFile(name, isPublic) {
  if (isPublic) {
    fs.create(`./public/${name}`);
  } else {
    fs.create(name);
  }
}

正確的示范

function createFile(name) {
  fs.create(name);
}

function createPublicFile(name) {
  createFile(`./public/${name}`);
}

不要污染全局變量、函數(shù)稽莉、原生對(duì)象的 prototype瀑志。如果你需要擴(kuò)展一個(gè)原生提供的對(duì)象，那么應(yīng)該使用 ES新的 類(lèi)和繼承語(yǔ)法來(lái)創(chuàng)造新的對(duì)象污秆，而 不是 去修改原生對(duì)象的prototype 劈猪。

錯(cuò)誤的示范

Array.prototype.myFunc = function myFunc() {
  // implementation
};

正確的示范

class SuperArray extends Array {
  myFunc() {
    // implementation
  }
}

4. 條件分支

不要用函數(shù)來(lái)實(shí)現(xiàn) 否定 的判斷。比如判斷用戶是否合法良拼，應(yīng)該提供函數(shù) isUserValid() 战得，而 不是 實(shí)現(xiàn)函數(shù) isUserNotValid() 。

錯(cuò)誤的示范

function isUserNotBlocked(user) {
  // implementation
}

if (!isUserNotBlocked(user)) {
  // implementation
}

正確的示范

function isUserBlocked(user) {
  // implementation
}

if (isUserBlocked(user)) {
  // implementation
}

在你明確知道一個(gè)變量類(lèi)型是 boolean 的情況下庸推，條件判斷使用 簡(jiǎn)寫(xiě)常侦。這確實(shí)是顯而易見(jiàn)的，前提是你能明確這個(gè)變量是boolean類(lèi)型贬媒，而不是 null 或者 undefined 聋亡。

錯(cuò)誤的示范

if (isValid === true) {
  // do something...
}

if (isValid === false) {
  // do something...
}

正確的示范

if (isValid) {
  // do something...
}

if (!isValid) {
  // do something...
}

在可能的情況下，盡量 避免 使用條件分支际乘。優(yōu)先使用 多態(tài) 和 繼承 來(lái)實(shí)現(xiàn)代替條件分支杀捻。

錯(cuò)誤的示范

class Car {
  // ...
  getMaximumSpeed() {
    switch (this.type) {
      case "Ford":
        return this.someFactor() + this.anotherFactor();
      case "Mazda":
        return this.someFactor();
      case "McLaren":
        return this.someFactor() - this.anotherFactor();
    }
  }
}

正確的示范

class Car {
  // ...
}

class Ford extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor() + this.anotherFactor();
  }
}

class Mazda extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor();
  }
}

class McLaren extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor() - this.anotherFactor();
  }
}

5. ES的類(lèi)

在ES里，類(lèi)是新規(guī)范引入的語(yǔ)法糖蚓庭。類(lèi)的實(shí)現(xiàn)和以前 ES5 里使用 prototype 的實(shí)現(xiàn)完全一樣，只是它看上去更簡(jiǎn)潔仅仆，你應(yīng)該優(yōu)先使用新的類(lèi)的語(yǔ)法器赞。

錯(cuò)誤的示范

const Person = function(name) {
  if (!(this instanceof Person)) {
    throw new Error("Instantiate Person with `new` keyword");
  }

  this.name = name;
};

Person.prototype.sayHello = function sayHello() { /**/ };

const Student = function(name, school) {
  if (!(this instanceof Student)) {
    throw new Error("Instantiate Student with `new` keyword");
  }

  Person.call(this, name);
  this.school = school;
};

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.printSchoolName = function printSchoolName() { /**/ };

正確的示范

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    /* ... */
  }
}

class Student extends Person {
  constructor(name, school) {
    super(name);
    this.school = school;
  }

  printSchoolName() {
    /* ... */
  }
}

使用方法的 鏈?zhǔn)秸{(diào)用。很多開(kāi)源的JS庫(kù)墓拜，都引入了函數(shù)的鏈?zhǔn)秸{(diào)用港柜，比如 jQuery 和 Lodash 。鏈?zhǔn)秸{(diào)用會(huì)讓代碼更加簡(jiǎn)潔。在 class 的實(shí)現(xiàn)里夏醉，只需要簡(jiǎn)單的在每個(gè)方法最后都返回 this爽锥，就能實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用了。

錯(cuò)誤的示范

class Person {
  constructor(name) {
    this.name = name;
  }

  setSurname(surname) {
    this.surname = surname;
  }

  setAge(age) {
    this.age = age;
  }

  save() {
    console.log(this.name, this.surname, this.age);
  }
}

const person = new Person("John");
person.setSurname("Doe");
person.setAge(29);
person.save();

正確的示范

class Person {
  constructor(name) {
    this.name = name;
  }

  setSurname(surname) {
    this.surname = surname;
    // Return this for chaining
    return this;
  }

  setAge(age) {
    this.age = age;
    // Return this for chaining
    return this;
  }

  save() {
    console.log(this.name, this.surname, this.age);
    // Return this for chaining
    return this;
  }
}

const person = new Person("John")
    .setSurname("Doe")
    .setAge(29)
    .save();

6. 避免冗余代碼

通常來(lái)講畔柔，我們應(yīng)該避免重復(fù)寫(xiě)相同的代碼氯夷，不應(yīng)該有未被用到的函數(shù)或者死代碼(永遠(yuǎn)也不會(huì)執(zhí)行到的代碼)的存在。

我們太容易就會(huì)寫(xiě)出重復(fù)冗余的代碼靶擦。舉個(gè)栗子腮考，有兩個(gè)組件，他們大部分的邏輯都一樣玄捕，但是可能由于一小部分差異踩蔚，或者臨近交付時(shí)間，導(dǎo)致你選擇了把代碼拷貝了一份來(lái)修改枚粘。在這種場(chǎng)景下馅闽，要去掉冗余的代碼，只能進(jìn)一步提高組建的抽象程度馍迄。

至于死代碼福也，正如它名字所代表的含義。這些代碼的存在柬姚，可能是在你開(kāi)發(fā)中的某個(gè)階段拟杉，你發(fā)現(xiàn)某段代碼完全用不上了，于是就把它們放在那兒量承，而沒(méi)有刪除掉搬设。你應(yīng)該在代碼里找出這樣的代碼，并且刪掉這些永遠(yuǎn)不會(huì)執(zhí)行的函數(shù)或者代碼塊撕捍。我能給你的惟一建議拿穴，就是當(dāng)你決定某段代碼再也不用時(shí)，就立即刪掉它忧风，否則晚些時(shí)候默色，可能你自己也會(huì)忘記這些代碼是干神馬的。

當(dāng)你面對(duì)這些死代碼時(shí)狮腿，可能會(huì)像下面這張圖所描繪的一樣：

2.png

結(jié)論

上面這些建議效诅，只是一部分能提升你代碼的實(shí)踐兄渺。我在這里列出這些點(diǎn)，是工程師經(jīng)常會(huì)違背的。他們或許嘗試遵守這些實(shí)踐施掏，但是由于各種原因滑黔，有的時(shí)候也沒(méi)能做到趁蕊∧颗桑或許當(dāng)我們?cè)陧?xiàng)目的初始階段伊者，確實(shí)很好的遵守了這些實(shí)踐，保持了干凈優(yōu)雅的代碼间护，但是隨著項(xiàng)目上線時(shí)間的臨近亦渗，很多準(zhǔn)則都被忽略了，盡管我們會(huì)在忽略的地方備注上 TODO 或者 REFACTOR (但正如你所知道的汁尺，通常 later也就意味著never)法精。

OK，就這樣吧均函，希望我們都能夠努力踐行這些最佳實(shí)踐亿虽，寫(xiě)出 干凈優(yōu)雅 的代碼 ??