JavaScript代碼整潔之道——好代碼和壞代碼

JavaScript代碼整潔之道——好代碼和壞代碼

概述

我們之道作為一個碼農，不論其實現如何，功能怎樣，寫的一手清晰靠譜的代碼是其代碼功力的體現。好的、清潔的代碼可以方便自己以后維護，讓你的繼任者馬上能接手維護它，而不是給你檫屁股，被人戳脊梁骨、被罵垃圾代碼。所以，寫清潔地代碼非常重要。

那么什么才是清潔代碼的呢？不言而喻，清潔的代碼就是可以讓人易于人理解、易于更改、方便擴展的代碼。寫清潔的代碼要常捫心自問：

為什么要這樣寫？

為什么要在這兒寫？

為什么不換個寫法？

Robert C. Martin在《代碼整潔之道》一書中說過：

JavaScript代碼整潔之道——好代碼和壞代碼

就算是的壞代碼也能運行，但如果代碼不干凈，也能會讓你的開發團隊陷入困境。

JavaScript代碼整潔之道——好代碼和壞代碼

在本文中，蟲蟲就給大家講講JavaScript代碼的整潔知道，全面對比下好的代碼和壞的代碼的寫法。

強類型檢查，使用"==="，不用"=="

類型的檢查非常重要，使用強類型檢查可以幫我理清程序邏輯，如果類型檢查松懈了（使用==），有可能使你的邏輯"南轅北撤了"，試看下面的例子：

JavaScript代碼整潔之道——好代碼和壞代碼

所以從現在開始就強類型檢查，"亡羊補牢，猶未晚也"！

const value = "520";
if (value === 520) {
console.log(value);
}
//條件不會滿足。
if (value === "520") {
console.log(value);
}
//條件滿足。

變量命名

變量的命名要有意義，而不是隨意亂起。最好是"望文生義"，一看到變量名就知道是干嘛用的。

望文生義

壞代碼：

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 ans = ["Chongchong", "maomaochong", "bollworm"];
ans.forEach(an => {
doSomething();
doSomethingElse();
// ...
// 等等，這個u是干嘛用的？
register(an);
});

好代碼：

const animals = ["Chongchong", "maomaochong", "bollworm"];
animals.forEach(animal => {
doSomething();
doSomethingElse();
// ...
// ...
register(animal);
});

不添加多余的上下文

壞代碼：

const user = {
userName: "Chongchong",
userNameAbb: "CC",
userAge: "28"
};
...
user.userName;

好代碼：

const user = {
Name: "Chongchong",
NameAbb: "CC",
userAge: "28"
};
...
user.userName;

函數

使用長而具有描述性的函數名。

由于函數一般來說表示某種行為，函數名稱應該是動詞或短??語，這樣可以顯示功能以及參數的意義。

壞代碼：

function notif(user) {
// 代碼邏輯
}

好代碼：

function notifyUser（emailAddress）{
//代碼邏輯
}

避免大量使用參數。

理想情況下，函數應該指定兩個或更少的參數。參數越少，函數單元測試就越容易。

壞代碼：

function getUsers(fields, fromDate, toDate) {
//代碼邏輯
}

好代碼：

function getUsers({ fields, fromDate, toDate }) {
// 碼邏輯
}
getUsers({
fields: ['name', 'surname', 'email'],
fromDate: '2019-05-22',
toDate: '2019-05-31'
});

使用默認參數，不用條件

壞代碼：

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

好代碼：

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

一個函數做一件事。避免在單個函數中執行多個操作,多種邏輯

壞代碼：

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

不要讓全局變量/函數污染

如果需要擴展現有對象，請使用ES類和繼承，不要在對象原型鏈上創建函數。

壞代碼：

Array.prototype.myFunc = function myFunc() {
// 代碼邏輯
};

**好代碼：**
class SuperArray extends Array {
myFunc() {
//代碼邏輯
}
}

條件

不要用否定句

壞代碼：

function isUserNotBlocked(user) {
//代碼邏輯
}
if (!isUserNotBlocked(user)) {
//代碼邏輯
}

好代碼：

function isUserBlocked(user) {
//代碼邏輯
}
if (isUserBlocked(user)) {
//代碼邏輯
}

使用布爾變量直接判斷，而不是條件語句

壞代碼：

if (isValid === true) {
//代碼邏輯
}
if (isValid === false) {
//代碼邏輯
}

好代碼：

if (isValid) {
//代碼邏輯
}
if (!isValid) {
//代碼邏輯
}

避免使用條件，用多態和繼承。

壞代碼：

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

好代碼：

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

ES類

類是JavaScript中的新的語法糖。除了語法不同外，其他都和prototype一樣工作。使用ES類可以讓你的代碼更加簡潔清晰。

壞代碼：

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() {
    /* ... */
  }
}

使用方法鏈接

許多庫如jQuery和Lodash都使用該模式。因此，該方法可以讓的代碼簡潔。在主類中，只需在每個函數的末尾返回"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("Chongchong");
person.setSurname("CC");
person.setAge(29);
person.save();

好代碼：

class Person {
  constructor(name) {
    this.name = name;
  }
  setSurname(surname) {
    this.surname = surname;
    return this;
  }
  setAge(age) {
    this.age = age;
    return this;
  }
  save() {
    console.log(this.name, this.surname, this.age);
    return this;
  }
}
const person = new Person("Chongchong")
    .setSurname("CC")
    .setAge(29)
.save();

其他

通常情況下，盡量不要寫不要重復代碼，不要寫不使用的函數和死代碼。

出于歷史原因，可能會遇到重復的代碼。例如，有兩段你略有不同的代碼，但是有很多共同的邏輯，為省事或者趕工期，導致你復制了大段代碼，略做小改然后使用了。針對這種代碼，后期一定要及早抽象出相同邏輯部分刪除重復代碼越早越好，不要欠死賬，不然后越積越多就不好處理了。

關于死代碼，碼如其名。就是啥事不干，刪了可能引入錯誤，這和上面的一樣處理，及早處理，不用了就早處理，早刪除。

結論

上面只是代碼整潔的部分原理，而且個別條款也可能需要商榷。這些大部分理論來源于《代碼整潔之道》這本書。有什么建議意見請回復，一起學習討論。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、整潔代碼 A.混亂的代價 1.有些團隊在項目初期進展迅速，但有那么一兩年的時間卻慢去蝸行。對代碼的每次修改都影...
    ZyBlog閱讀 2,064評論 0贊 2
  • 代碼整潔之道 Clean Code 第一章 整潔代碼 代碼的重要性我們永遠拋不掉代碼，因為代碼呈現了需求的細節。在...
    Pengzh1閱讀 1,238評論 0贊 1
  • 目錄及筆記鏈接 序 丹麥諺語：小處誠實非小事。 建筑師路德維希：神在細節之中。 日本的 5S 哲學： 整理（整理、...
    小鐳Ra閱讀 1,502評論 3贊 3
  • 函數和對象 1、函數 1.1 函數概述 函數對于任何一門語言來說都是核心的概念。通過函數可以封裝任意多條語句，而且...
    道無虛閱讀 4,635評論 0贊 5
  • 整潔代碼 Leblanc ： Later equals never.（勒布朗法則：稍后等于永不） 對代碼的每次修改...
    foever_f1eb閱讀 825評論 0贊 0