[譯]編寫優雅的JavaScript代碼 - 最佳實踐

時間 2019-12-10

標籤編寫優雅 javascript 代碼最佳實踐欄目 JavaScript 简体版

原文原文鏈接

[原文]： devinduct.com/blogpost/22…javascript

有沒有似曾相識

若是你對於代碼，除了關注是否能準確的執行業務邏輯，還關心代碼自己是怎麼寫的，是否易讀，那麼你應該會關注如何寫出乾淨優雅的代碼。做爲專業的工程師，除了保證本身的代碼沒有bug，能正確的完成業務邏輯，還應該保證幾個月後的本身，或者其餘工程師，也可以維護本身的代碼。你寫的每一段代碼，一般狀況下，都不會是 一次性 工做，一般伴隨着後續的不斷迭代。若是代碼不夠優雅，那麼未來維護這段代碼的人(甚至你本身)，都將感到很是痛苦。祈禱吧，未來面對這些糟糕代碼的人，不是你本身，而是別人 😓。java

OK，咱們先來簡單定義下，什麼是 乾淨優雅 的代碼：乾淨優雅的代碼，應該是自解釋的，容易看懂的，而且很容易修改或者擴展一些功能 。面試

如今，靜下來回憶一下，有多少次，當你接手前輩留下來的糟糕代碼而懵逼時，內心默默的說過 "我*"的：編程

"我*，那是啥玩意兒"
"我*，這段代碼是幹啥的」
"我*，這個變量又是幹啥的"

[譯註]：我*，做者真大神啊，上面描繪的太真實了。有木有一種 Big brother is watching you 的趕腳。編程語言

嗯，下面這個圖片完美的展現了這種情形：函數

引用 Robert C. Martin 的名言來講明這種狀況：post

醜陋的代碼也能實現功能。可是不夠優雅的代碼，每每會讓整個開發團隊都跪在地上哭泣。測試

在這篇文章裏，我主要講下載 JavaScript裏怎麼書寫乾淨優雅的代碼，可是對於其餘編程語言，道理也是相似的。ui

JavaScript優雅代碼的最佳實踐

1. 強類型校驗

使用 === 而不是 == 。this

[譯註] ：這一條應該是普遍接受了吧，竟然還有人面試會問 == 類型轉換的問題……

// 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. 變量命名

變量、字段命名，應該包含它所對應的真實含義。這樣更容易在代碼裏搜索，而且其餘人看到這些變量，也更容易理解。

錯誤的示範

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;
複製代碼

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

錯誤的示範

let nameValue;
let theProduct;
複製代碼

正確的示範

let name;
let product;
複製代碼

不要強迫開發者去記住變量名的上下文。

錯誤的示範

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);
});
複製代碼

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

錯誤的示範

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

...

user.userName;
複製代碼

正確的示範

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

...

user.name;
複製代碼

3. 函數相關

儘可能使用足夠長的可以描述函數功能的命名。一般函數都會執行一個明確的動做或意圖，那麼函數名就應該是可以描述這個意圖一個動詞或者表達語句，包含函數的參數命名也應該能清晰的表達具體參數的含義。

錯誤的示範

function notif(user) {
  // implementation
}
複製代碼

正確的示範

function notifyUser(emailAddress) {
  // implementation
}
複製代碼

避免函數有太多的形參。比較理想的狀況下，一個函數的參數應該 <=2個。函數的參數越少，越容易測試。

錯誤的示範

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'
});
複製代碼

若是函數的某個參數有默認值，那麼應該使用新的參數默認值語法，而不是在函數裏使用 || 來判斷。

錯誤的示範

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

正確的示範

function createShape(type = "cube") {
  // ...
}
複製代碼

一個函數應該作一件事情。避免在一個函數裏，實現多個動做。

錯誤的示範

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 來給對象設置默認值。

錯誤的示範

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);
複製代碼

不要在函數參數中，包括某些標記參數，一般這意味着你的函數實現了過多的邏輯。

錯誤的示範

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}`);
}
複製代碼

不要污染全局變量、函數、原生對象的 prototype。若是你須要擴展一個原生提供的對象，那麼應該使用 ES新的類和繼承語法來創造新的對象，而不是去修改原生對象的prototype 。

錯誤的示範

Array.prototype.myFunc = function myFunc() {
  // implementation
};
複製代碼

正確的示範

class SuperArray extends Array {
  myFunc() {
    // implementation
  }
}
複製代碼

4. 條件分支

不要用函數來實現否認的判斷。好比判斷用戶是否合法，應該提供函數 isUserValid() ，而不是實現函數 isUserNotValid() 。

錯誤的示範

function isUserNotBlocked(user) {
  // implementation
}

if (!isUserNotBlocked(user)) {
  // implementation
}
複製代碼

正確的示範

function isUserBlocked(user) {
  // implementation
}

if (isUserBlocked(user)) {
  // implementation
}
複製代碼

在你明確知道一個變量類型是 boolean 的狀況下，條件判斷使用簡寫。這確實是顯而易見的，前提是你能明確這個變量是boolean類型，而不是 null 或者 undefined 。

錯誤的示範

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

if (isValid === false) {
  // do something...
}
複製代碼

正確的示範

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

if (!isValid) {
  // do something...
}
複製代碼

在可能的狀況下，儘可能避免使用條件分支。優先使用多態和繼承來實現代替條件分支。

錯誤的示範

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的類

在ES裏，類是新規範引入的語法糖。類的實現和之前 ES5 裏使用 prototype 的實現徹底同樣，只是它看上去更簡潔，你應該優先使用新的類的語法。

錯誤的示範

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() {
    /* ... */
  }
}
複製代碼

使用方法的 鏈式調用。不少開源的JS庫，都引入了函數的鏈式調用，好比 jQuery 和 Lodash 。鏈式調用會讓代碼更加簡潔。在 class 的實現裏，只須要簡單的在每一個方法最後都返回 this，就能實現鏈式調用了。

錯誤的示範

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. 避免冗餘代碼

一般來說，咱們應該避免重複寫相同的代碼，不該該有未被用到的函數或者死代碼(永遠也不會執行到的代碼)的存在。

咱們太容易就會寫出重複冗餘的代碼。舉個栗子，有兩個組件，他們大部分的邏輯都同樣，可是可能因爲一小部分差別，或者臨近交付時間，致使你選擇了把代碼拷貝了一份來修改。在這種場景下，要去掉冗餘的代碼，只能進一步提升組建的抽象程度。

至於死代碼，正如它名字所表明的含義。這些代碼的存在，多是在你開發中的某個階段，你發現某段代碼徹底用不上了，因而就把它們放在那兒，而沒有刪除掉。你應該在代碼裏找出這樣的代碼，而且刪掉這些永遠不會執行的函數或者代碼塊。我能給你的唯一建議，就是當你決定某段代碼不再用時，就當即刪掉它，不然晚些時候，可能你本身也會忘記這些代碼是幹神馬的。

當你面對這些死代碼時，可能會像下面這張圖所描繪的同樣：

結論

上面這些建議，只是一部分能提高你代碼的實踐。我在這裏列出這些點，是工程師常常會違背的。他們或許嘗試遵照這些實踐，可是因爲各類緣由，有的時候也沒能作到。或許當咱們在項目的初始階段，確實很好的遵照了這些實踐，保持了乾淨優雅的代碼，可是隨着項目上線時間的臨近，不少準則都被忽略了，儘管咱們會在忽略的地方備註上 TODO 或者 REFACTOR (但正如你所知道的，一般 later也就意味着never)。

OK，就這樣吧，但願咱們都可以努力踐行這些最佳實踐，寫出 乾淨優雅 的代碼 ☺️