★★★★✰

An overview of the

We’ve talked a lot about code statements and functions, but we won’t get clean code unless we focus on higher levels of code organization.

For the front end, class is a syntax addition to ES6, a syntactic sugar based on the prototype mechanism. Class was born for object-oriented programming. So it has OOP characteristics: abstract encapsulation, inheritance, polymorphism.

One, the organization of class

The top-down order is as follows:

A static variable

A static method

The constructor

Prototype method

class Person {
    static VAR1 = 'xxx'

    static staticMethod() {
        console.log(this.VAR1)
    }

    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  
    getName() {
      return this.name; }}Copy the code

The above code is converted to ES5 code:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.getName = function() {
    return this.name;
}
// Static attributes
Person.VAR1 = 'xxx'
// Static method
Person.staticMethod = function() { console.log(this.VAR1) }
Copy the code

inheritance

class Child extends Person {
    constructor(name, age, toy) {
        // Call parent constructor(name, age)
        super(name, age);
        this.toy = toy;
    }
    
    playGame() {
        console.log(super.getName() + ' like ' + this.toy)
    }
}
Copy the code

A subclass can inherit the attributes and methods of its parent class and extend its own attributes and methods based on the parent class.

super

Super is the keyword used in subclasses, which can be used as objects and methods.

Second, the class should be short

Classes should not have too much authority and responsibility.

We should be able to describe a class in about 25 words without using words like if, AND, or, but, etc.

2.1 Principle of single rights and responsibilities

Every system of a certain size involves a great deal of logic and complexity. The question is: do you want to put your tools in a toolbox with many drawers, each containing well-defined and labeled components, or do you want to put them in a few drawers where you can just throw everything in.

2.2 cohesion

A class has maximum cohesion if every variable in it is used by every method. And of course this is the limiting case. High cohesion means that methods and variables in a class depend on each other and combine into a logical whole.

2.3 Break it down into short categories

The extreme case of a long class is that the front end of the compiled code is completely unreadable.

The split class will be longer and more readable than the original code because:

  1. The refactored program uses longer, more descriptive variable names
  2. Refactored programs use function and class declarations as a means of annotating code
  3. We use whitespace and formatting tricks to make the program more readable.

Three, open and close principle

As far as object oriented programming is concerned, the open close principle is emphasized in development. Open and close principle is the most basic design principle, the other five design principles are the specific form of open and close principle. In a nutshell: open for extension, closed for modification.

For a detailed description, please refer to this article: Six Design Principles: Open and Close principles

Four,

The construction of complex system is inseparable from the abstract concept, the embodiment of which is closely related to the object-oriented programming thought, so class is the concrete form of each abstract object. So a well-designed class can make the whole system orderly and clear.

This article is based on Code Cleanliness by Robert C. Martin, translated by Han Lei.

Zhejiang Dahua Technology Co., Ltd.- Soft research – Smart City Product R&D Department Recruiting senior front end, welcome to contact, interested can send resume to [email protected], long-term effective

Unit Testing

11. System