Clean Code JavaScript精粹

小咪咪 2023-06-23 13:11 18阅读 0赞

from：https://github.com/alivebao/clean-code-js

> 本文从`Clean Code JavaScript`中提取出部分个人认为的重点，并掺杂了部分个人见解。

### 对功能类似的变量名采用统一的命名风格 ###

**反例**:

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

**正例**:

getUser();
    getClient();
    getCustomer();

### 使用易于检索名称 ###

我们需要阅读的代码远比自己写的要多，使代码拥有良好的可读性且易于检索非常重要。阅读变量名晦涩难懂的代码对读者来说是一种相当糟糕的体验。  
让你的变量名易于检索。`不要出现类似魔法数字（525600）`

**反例**:

// 525600 是什么?
    for (var i = 0; i < 525600; i++) {
        
      runCronJob();
    }

**正例**:

// Declare them as capitalized `var` globals.
    var MINUTES_IN_A_YEAR = 525600;
    for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
        
      runCronJob();
    }

### 使用说明变量(即有意义的变量名) ###

赋予一些复杂操作以变量名有利于代码的阅读

**反例**:

const cityStateRegex = /^(.+)[,\\s]+(.+?)\s*(\d{5})?$/;
    saveCityState(cityStateRegex.match(cityStateRegex)[1], cityStateRegex.match(cityStateRegex)[2]);

**正例**:

const ADDRESS = 'One Infinite Loop, Cupertino 95014';
    var cityStateRegex = /^(.+)[,\\s]+(.+?)\s*(\d{5})?$/;
    var match = ADDRESS.match(cityStateRegex)
    var city = match[1];
    var state = match[2];
    saveCityState(city, state);

### 避免重复的描述 ###

当类/对象名已经有意义时，对其变量进行命名不需要再次重复。

**反例**:

var Car = {
        
      carMake: 'Honda',
      carModel: 'Accord',
      carColor: 'Blue'
    };
    
    function paintCar(car) {
        
      car.carColor = 'Red';
    }

**正例**:

var Car = {
        
      make: 'Honda',
      model: 'Accord',
      color: 'Blue'
    };
    
    function paintCar(car) {
        
      car.color = 'Red';
    }

### 函数功能的单一性 ###

这是软件功能中最重要的原则之一。

功能不单一的函数将导致难以重构、测试和理解。功能单一的函数易于重构，并使代码更加干净。（`尽管可能开发时需要多敲几个字符，但是相对于后人包括自己以后的维护所带来的的便利这些都是值得的`）

**反例**:

**正例**:

### 移除重复的代码 ###

永远、永远、永远不要在任何循环下有重复的代码。

这种做法毫无意义且潜在危险极大(`尤其是当有不熟悉整体业务的后人来维护时，无论开发或测试都会崩溃的`)。重复的代码意味着逻辑变化时需要对不止一处进行修改。JS 弱类型的特点使得函数拥有更强的普适性。好好利用这一优点吧。

**反例**:

**正例**:

### 采用默认参数精简代码 ###

**反例**:

function writeForumComment(subject, body) {
        
      subject = subject || 'No Subject';
      body = body || 'No text';
    }

**正例**:

function writeForumComment(subject = 'No subject', body = 'No text') {
        
      ...
    }

### 采用函数式编程 ###

函数式的编程具有更干净且便于测试的特点。尽可能的使用这种风格吧。

**反例**:

**正例**:

const programmerOutput = [
      {
        
        name: 'Uncle Bobby',
        linesOfCode: 500
      }, {
        
        name: 'Suzie Q',
        linesOfCode: 1500
      }, {
        
        name: 'Jimmy Gosling',
        linesOfCode: 150
      }, {
        
        name: 'Gracie Hopper',
        linesOfCode: 1000
      }
    ];
    
    var totalOutput = programmerOutput
      .map((programmer) => programmer.linesOfCode)
      .reduce((acc, linesOfCode) => acc + linesOfCode, 0);

### 使用方法链 ###

这里我们的理解与《代码整洁之道》的建议有些不同。

有争论说方法链不够干净且违反了[德米特法则][Link 1]，也许这是对的，但这种方法在 JS 及许多库(如 JQuery)中显得非常实用。

因此，我认为在 JS 中使用方法链是非常合适的。在 class 的函数中返回 this，能够方便的将类需要执行的多个方法链接起来。(`同样的方式可以适用于react组件，其有序的链式调用再加上准确的命名将为代码的逻辑性和可读性带来极高的效果，同时保证每一链点及函数的单一无副作用原则，也将极大的方便于维护，就个人来说极为推崇`)

**反例**:

class Car {
        
      constructor() {
        
        this.make = 'Honda';
        this.model = 'Accord';
        this.color = 'white';
      }
    
      setMake(make) {
        
        this.name = name;
      }
    
      setModel(model) {
        
        this.model = model;
      }
    
      setColor(color) {
        
        this.color = color;
      }
    
      save() {
        
        console.log(this.make, this.model, this.color);
      }
    }
    
    let car = new Car();
    car.setColor('pink');
    car.setMake('Ford');
    car.setModel('F-150')
    car.save();

**正例**:

class Car {
        
      constructor() {
        
        this.make = 'Honda';
        this.model = 'Accord';
        this.color = 'white';
      }
    
      setMake(make) {
        
        this.name = name;
        // NOTE: Returning this for chaining
        return this;
      }
    
      setModel(model) {
        
        this.model = model;
        // NOTE: Returning this for chaining
        return this;
      }
    
      setColor(color) {
        
        this.color = color;
        // NOTE: Returning this for chaining
        return this;
      }
    
      save() {
        
        console.log(this.make, this.model, this.color);
      }
    }
    
    let car = new Car()
      .setColor('pink')
      .setMake('Ford')
      .setModel('F-150')
      .save();

[Link 1]: https://en.wikipedia.org/wiki/Law_of_Demeter