代码整洁之道

普通人读的懂的代码, 才是好代码 --- 沃滋基梭德

概述篇

1. 代码可读性 代码必须是对人类是可读的。不要考虑计算机如何处理它，因为会有许多工具来转换我们的代码（编译器）。因此，最重要的是，代码将是人类可读的，因为你在开发代码时，最长的工作就是阅读代码，而不是写代码。

const users = [{ id: 1, name: "Carlos Caballero", memberSince: "1997–04–20", favoriteLanguageProgramming: ["JavaScript", "C", "Java"] }, { id: 2, name: "Antonio Villena", memberSince: "2014–08–15", favoriteLanguageProgramming: ["Go", "Python", "JavaScript"] }, { id: 3, name: "Jesús Segado", memberSice: "2015–03–15", favoriteLanguageProgramming: ["PHP", "JAVA", "JavaScript"] } ];

/***********************/

const users = [
    { id: 1, name: "Carlos Caballero", memberSince: "1997–04–20", favoriteLanguageProgramming: ["JavaScript", "C", "Java"] },
    { id: 2, name: "Antonio Villena", memberSince: "2014–08–15", favoriteLanguageProgramming: ["Go", "Python", "JavaScript"] },
    { id: 3, name: "Jesús Segado", memberSice: "2015–03–15", favoriteLanguageProgramming: ["PHP", "JAVA", "JavaScript"] },
    ];


/***********************/

const users = [{
    id: 1,
    name: "Carlos Caballero",
    memberSince: "1997–04–20",
    favoriteLanguageProgramming: ["JavaScript", "C", "Java"],
},
{
    id: 2,
    name: "Antonio Villena",
    memberSince: "2014–08–15",
    favoriteLanguageProgramming: ["Go", "Python", "JavaScript"],
},
{
    id: 3,
    name: "Jesús Segado",
    memberSince: "2015–03–15",
    favoriteLanguageProgramming: ["PHP", "JAVA", "JavaScript"],
}];

1. 使用英语编写代码

const benutzer = {
     id: 1,
     name: "John Smith",
     mitgliedVon: "1997–04–20",
    };

    Gehaltserhöhung(benutzer, 1000); 

    /***********************/

    const użytkownik = {
     id: 1,
     imię: "John Smith",
     członekZ: "1997–04–20",
    };
    wzrostWynagrodzeń(użytkownik, 1000);

    /***********************/

    const user = {
     id: 1,
     name: "John Smith",
     memberSince: "1997–04–20",
    };
    increaseSalary(user, 1000);

1. 团队协作 可以通过配置一个标准的 .editorconfig 文件

• 用空格还是 Tab 来格式化代码

• 在函数的名称旁边还是在下一行写大括号

• 是否在语句的结尾处放一个分号

root = true

    [*]
    end_of_line = lf
    insert_final_newline = true

    [*.{js,py}]
    charset = utf-8

    [*.py]
    indent_style = space
    indent_size = 4

    [Makefile]
    indent_style = tab

    [*.js]
    indent_style = space
    indent_size = 2

    [{package.json,.travis.yml}]
    indent_style = space
    indent_size = 2

有一个在业界广泛使用的工具被称为 Prettier，它能够根据 linter 的规则实时改变我们的代码格式（IDE的插件）。

变量篇

1. 变量名要名副其实 变量的名称必须能够描述出该变量的作用和用途。

2. 变量名可以读出来

在选择变量的名称时，另一个错误的行为是删除一个词中某些字母，使用这些缩略语读起来很困难。首先，我们是在用英语编码，而且不是所有的开发者都是讲英语的。因此，我们为什么要把它的名字减少 3 或 4 个字符？这有什么好处呢？代码会被工具（转译器包括其他语言的编译器）操作，最终正确地完成格式化（使用 Prettier）。因此，把不能发音的名字放在一起，只能让我们更费力地去推断变量的用途。

1. 不要在名称中使用变量的类型 在变量名称中使用数据类型作为前缀是一个很古老的做法，现在让我们反思一下这个问题。

变量名称中必须要用类型作为前缀吗？ 每个公司和工程都有各自的前缀规范，那如何去学习和书写这种代码呢？ 如果我在变量的名称中使用一种编程语言的类型系统，为什么要用它呢？ 当变量的数据类型发生变化时，比如把 Array 修改为 Map，这种情况怎么处理？ 这个前缀能给我们带来什么？它是可以发音的吗？

const aCountries = [];
const sName = "";
const dAmount = 3.2;

const countries = [];
const name = "";
const amount = 3.2;

1. 对同一类型的变量使用相同的词汇表 对同一类型的数据使用相同的词汇表。如果我们需要检索一个用户或客户的信息，我们不能以不同的方式称呼用户或客户。也就是说，不能有时称其为 user，有时称其为 customer，甚至是 client 这个词。更不可 取的是，在变量名称上额外再加一个后缀。 下面代码就是很好的示例，同一个概念，有三个不同的定义。必须自始至终使用统一的命名，不管是 user、customer 还是 client，只能用同一个。

getUserInfo();
getClientData();
getCustomerRecord(); 

getUser();

1. 不要添加不需要的上下文 在变量名称中没有必要添加类或包的相关上下文。 在变量名称中添加上下文是很常见的，这样可以知道这个变量位于哪个工作区。

const Car = {
    carMake: 'Honda',
    carModel: 'Accord',
    carColor: 'Blue',
}

function paintCar(car){
    car.carColor = 'red'
}

const Car = {
    make: 'Honda',
    model: 'Accord',
    color: 'Blue'
}
function paint(car){
    car.color = 'Red'
}

1. 不要使用魔法数字和字符串 在编写代码时，不应该在源代码中直接使用数字或文本字符串，这些通常也被称为魔法数字.这个数字是什么意思？必须要解释这个数字吗？这让我们不得不思考业务逻辑之外的事情。

这些魔法数字或字符串必须存储在常量中，通过对常量的名称来表达出它们的用途。在业务逻辑层面上，对于那些有意义的数字或文本字符串，如果没有一个确切的名字就会引起噪音。

在业务逻辑层面上，对于那些有意义的数字或文本字符串，如果没有一个确切的名字就会引起噪音。

// what the heck is 86400000 for?
setTimeout(blastOff, 864000000);
user.rol = 'Administrator';

const MILLISECONDS_IN_A_DAY = 'Administrator';

setTimeout(blastOff, MILLISECONDS_IN_A_DAY);
user.rol = ADMINISTRATOR_ROL

复杂判断

1. 不要使用标记 (flag) 作为函数参数 这样会破坏函数功能的单一性，我们必须创建两个函数来实现各自对应的逻辑功能，而不是使用一个函数来实现两个逻辑功能，因为他们是不同的功能。

// Dirty
function book(customer, isPremium) {
  // ...
  if (isPremium) {
    premiumLogic();
  } else {
    regularLogic();
  }
}

// Clean (Declarative way)
function bookPremium (customer) {
  premiumLogic();
}

function bookRegular (customer) {
  retularLogic();
}

1. 封装判断条件 条件封装在具有明确语义的函数中

if (platform.state === 'fetching' && isEmpty(cart)) {
    // ...
}


function showLoading(platform, cart) {
    return platform.state === 'fetching' && isEmpty(cart);
}

if (showLoading(platform, cart)) {
    // ...
}

1. 用卫语句替换嵌套的条件语句

function getPayAmount() {
    let result;
    if (isDead){
        result = deadAmount();
    } else {
        if (isSeparated){
            result = separatedAmount();
        } else {
            if (isRetired){
                result = retiredAmount();
            }else{
                result = normalPayAmount();
            }
        }
    }
    return result;
}


function getPayAmount() {
    if (isDead) return deadAmount();
    if (isSeparated) return separatedAmount();
    if (isRetired) return retiredAmount();
    return normalPayAmount();
}

1. 空对象 不断检查对象是否为null， 并根据该检查判断是否显示默认操作。这种模式称为空对象模式，我们默认封装了空对象行为的对象

class Dog {
  sound() {
    return 'bark';
  }
}

['dog', null].map((animal) => {
  if(animal !== null) { 
    sound(); 
  }
 });

class Dog {
  sound() {
    return 'bark';
  }
}

class NullAnimal {
  sound() {
    return null;
  }
}

function getAnimal(type) {
  return type === 'dog' ? new Dog() : new NullAnimal();
}

['dog', null].map((animal) => getAnimal(animal).sound());
// Returns ["bark", null]

1. 使用多态删除条件 通过判断对象的类型去定义对象的方法，但是这里的条件语句被滥用了，在这种场景下，我们可以通过类的继承，为每个特定类型创建一个类，利用多态来避免使用条件判断。

function Auto() {
}
Auto.prototype.getProperty = function () {
    switch (type) {
        case BIKE:
            return getBaseProperty();
        case CAR:
            return getBaseProperty() - getLoadFactor();
        case BUS:
            return (isNailed) ? 
            0 : 
            getBaseProperty(voltage);
    }
    throw new Exception("Should be unreachable");
};



abstract class Auto { 
    abstract getProperty();
}

class Bike extends Auto {
    getProperty() {
        return getBaseProperty();
    }
}
class Car extends Auto {
    getProperty() {
        return getBaseProperty() - getLoadFactor();
    }
}
class Bus extends Auto {
    getProperty() {
        return (isNailed) ? 
                0 : 
                getBaseProperty(voltage);
    }
}
// Somewhere in client code
speed = auto.getProperty();

1. 使用策略模式/命令模式移除条件

函数

1. 使用默认参数去代替短路操作或条件赋值

   在大多数编程语言中，函数的参数支持设置默认值。这就意味着我们可以在代码中避免使用短路操作和条件赋值。

function setName(name) {
    const newName = name || 'Juan Palomo';
}

function setName(name  = 'Juan Palomo') {
    // ...
}

1. 函数参数(理想情况下不多于 2 个)

当一个函数有很多参数时，可以把这些参数组合在一起构成一个对象。我们需要避免使用多个基础类型 (如字符串、数字、布尔值等) 作为函数的入参，而是要使用抽象级别更高的对象作为入参。这样我们会更接近业务逻辑，并且更加远离底层实现。

function newBurger(name, price, ingredients, vegan) {
    // ...
}

function newBurger(burger) {
    // ...
} 

function newBurger({ name, price, ingredients, vegan }) {
    // ...
}

const burger = {
    name: 'Chicken',
    price: 1.25,
    ingredients: ['chicken'],
    vegan: false,
};
newBurger(burger);

第一个例子中，我们实现了一个生产汉堡的函数，它有 4 个参数。这些参数是固定的，并且必须按照这个顺序传参，这会给我们带来很多的限制。这样的函数在使用的时候不是很灵活。

第二个例子中，最大的改进就是使用一个对象来作为参数，只需要传入一个 burger 对象就可以生产出一个 “新汉堡”。通过这种方式，我们将汉堡的基本属性整合到 1 个对象里面。

在第三个例子中，我们对传入的对象进行解构赋值，让对象的属性在函数体中可访问到，但是实际上我们传入的仅仅是一个参数，这使得这个函数有了更大的灵活性。

1. 避免副作用 - 全局变量 副作用是未来麻烦的根源。虽然从定义上来说副作用不一定是有害的，但是如果在项目中没有节制的引起副作用，代码出错的可能性就会大大提高。 不惜一切代价避免副作用，并且确保函数是可以被测试到的。

let fruits = 'Banana Apple';

function splitFruits() {
    fruits = fruits.split(' ');
}

splitFruits();

console.log(fruits); // ['Banana', 'Apple'];

改进后

function splitFruits(fruits) {
    return fruits.split(' ');
}

const fruits = 'Banana Apple';
const newFruits = splitFruits(fruits);

console.log(fruits); // 'Banana Apple';
console.log(newFruits); // ['Banana', 'Apple'];

1. 避免副作用 - 可变对象 是直接修改对象本身，如果你一直从事计算机相关的工作，你会知道 JavaScript 自诞生以来就是支持对象可变的，目前许多库都在尽量避免使用可变对象。

数组的方法一般被分为两部分: 一部分是会对数组本身进行修改的方法，例如: push、pop、sort，另一部分是不会对数组本身产生修改的方法例如：filter、reduce 、map 等。

const addItemToCart = (cart, item) => {
    cart.push({ item, date: Date.now() });
};

//无副作用
const addItemToCart = (cart, item) => {
    return [...cart, {
                item, 
                date: Date.now(),
            }];
};

1. 函数应该只做一件事

function emailCustomers(customers) {
    customers.forEach((customer) => {
        const customerRecord = database.find(customer);
        if (customerRecord.isActive()) {
            email(client);
        }
    });
}

function emailActiveCustomers(customers) {
    customers
        .filter(isActiveCustomer)
        .forEach(email);
    }

function isActiveCustomer(customer) {
    const customerRecord = database.find(customer);
    return customerRecord.isActive();
}

1. 函数应该只是有一个抽象级别 每个函数应仅具有单个抽象级别。

function parseBetterJSAlternative(code) {
    const REGEXES = [
        // ...
    ];

    const statements = code.split(' ');
    const tokens = [];
    REGEXES.forEach((REGEX) => {
        statements.forEach((statement) => {
        // ...
        });
    });

    const ast = [];
    tokens.forEach((token) => {
        // lex...
    });

    ast.forEach((node) => {
        // parse...
    });
}

const REGEXES = [ // ...];
function tokenize(code) {    
    const statements = code.split(' ');
    const tokens = [];
    REGEXES.forEach((REGEX) => {
        statements.forEach((statement) => {
            tokens.push( /* ... */ );
        });
    });
    return tokens;
}
function lexer(tokens) {
    const ast = [];
    tokens.forEach((token) => ast.push( /* */ ));
    return ast;
}
function parseBetterJSAlternative(code) {
    const tokens = tokenize(code);
    const ast = lexer(tokens);
    ast.forEach((node) => // parse...);
}

1. 优先考虑函数式编程而不是命令式编程 函数式编程相对于命令式编程相比的另一个特点是代码更具可读性。 函数式编程在这方面就具有很大的优势;但对于那些使用命令式编程学习并开始解决问题的初级程序员来说，他们很难使用这种编程范式，因为它改变了他们的工作习惯。但是在这个行业中，我们必须适应变化，况且目前使用函数式编程的场景越来越多。

const items = [{
    name: 'Coffe',
    price: 500
  }, {
    name: 'Ham',
    price: 1500
  }, {
    name: 'Bread',
    price: 150
  }, {
    name: 'Donuts',
    price: 1000
  }
];

let total = 0;
for (let i = 0; i < items.length; i++) {
  total += items[i].price;
}

// 优化后
const total = items
  .map(({ price }) => price)
  .reduce((total, price) => total + price);

1. 函数链式调用

class Car {
    constructor({ make, model, color } = car) {
        this.make = make;
        this.model = model;
        this.color = color;
    }
    setMake(make) {
        this.make = make;
    }
    setModel(model) {
        this.model = model;
    }
    setColor(color) {
        this.color = color;
    }
    save() {
        console.log(this.make, this.model, this.color);
    }
}    
const car = new Car({make: 'hoel', model: 'Jetta', color: 'gray'});
car.setColor('red');
car.save();

class Car {
    constructor({ make, model, color } = car){
        this.make = make;
        this.model = model;
        this.color = color;
    }
    setMake(make) {
        this.make = make;
        return this;
    }
    setModel(model) {
        this.model = model;
        return this;
    }
    setColor(color) {
        this.color = color;
        return this;
    }
    save() {
        console.log(this.make, this.model, this.color);
        return this;
    }
}
const car = new Car({make: 'hoel', model: 'Jetta', color: 'gray'});
.setColor('red')
.save();

重构篇

重构很重要的原因：

1. 改进软件/应用程序的设计

2. 使软件更容易理解

3. 发现 bug

4. 修复现有的旧数据库

5. 为用户提供更好的一致性

   重构不是银弹，但它是一种有价值的武器，可以帮助你控制好代码和项目 (软件/应用)。它是一个科学的过程，对现有的代码进行改造，使代码可读性更高、更好理解和更整洁。而且，使添加新功能、构建大型应用程序以及发现和修复 bug 变得非常便捷。

撒密码是由明文和密文两个字母表构成的，密文字母表是将明文字母表向左或向右移动一个固定位置得到的。例如，这个恺撒密码，使用的偏移量为 6，相当于右移 6 位

Plain:
    ABCDEFGHIJKLMNOPQRSTUVWXYZ

Cipher:
   GHIJKLMNOPQRSTUVWXYZABCDEF

重构建议： 无论我们如何重构代码，都要使用自动化测试来帮助我们验证有没有 “破坏” 代码。

console.assert(cipher
('Hello World',1) === 'Ifmmp!Xpsme',
`${cipher('Hello World', 1)} === 'Ifmmp!Xpsme'`,
);

console.assert(decipher(cipher
('Hello World',3),3) === 'Hello World',
`${decipher(cipher('Hello World', 3), 3)} === 'Hello World'`,);

1. 魔法数字 通过定义语义化的变量来移除代码中出现的魔法数字

const NUMBER_LETTERS = 26; 
const LETTER ={
    a: 65,
    z: 90,
    A: 97,
    Z: 122
}

1. 从 if-else 中提取相似代码 下一步是将代码中重复的代码提取到函数中。具体来说，if 控制结构体中的赋值代码在整个代码中是重复的，我们可以提取这些赋值代码。

2. 避免使用 else 下一步是避免使用 else 控制结构。避免使用它是很容易的，我们只需要在循环开始之前将代码从 else 移到变量 character，并作为它的默认值。

3. 合并 IF 逻辑

4. 简化算法逻辑

5. 封装条件

6. 移除 if-else 控制结构

7. 变量命名