Shulou(Shulou.com)06/03 Report--

What is the idea of optimizing the refactoring of JS classes and objects? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

JavaScript is an easy-to-learn programming language, and it's easy to write programs that run and perform certain operations. However, it is difficult to write a clean piece of JavaScript code.

Use constants to represent numbers

If we have a lot of duplicate values that mean the same thing, but don't specify them, then we should convert them to constants so that everyone knows what they mean, and if we need to change them, we only need to change one place.

For example, we might write code like this:

Const getWeight = (mass) = > mass * 9.81 const potentialEnergy = (mass, height) = > mass * height * 9.81

For mathematics with the same meaning, I can express it as a constant:

Const GRAVITATIONAL_CONSTANT = 9.81; const getWeight = (mass) = > mass * GRAVITATIONAL_CONSTANT const potentialEnergy = (mass, height) = > mass * height * GRAVITATIONAL_CONSTANT

Now that we know that 9.81 actually means GRAVITATIONAL_CONSTANT, we don't have to repeat ourselves.

Above we use the constant GRAVITATIONAL_CONSTANT to represent 9.81, so that others will know at a glance that it represents a constant of gravitation.

Encapsulated field

We can add getter and setter to the fields of the class so that we don't want to manipulate the fields of the class directly.

For example, we might write code like this:

Class Person {constructor (name) {this.name = name;}}

If you want to control how the value is set, you can ReFactor it like this:

Class Person {constructor (name) {this._name = name} get name () {return this._name} set name () {this._name = name}}

In this way, we can control how the value is set, because we can put code in the setter to set the name. We can also control who gets the name because it is returned in getter.

Replace fields with array classes

We can replace the field with its own data class, which gives us more flexibility in recording the data.

For example, we might write code like this:

Class Person {constructor (name, bloodGroup) {this.name = name; this.bloodGroup = bloodGroup;}} const person = new Person ('joe', 'a')

If we want to expand the type of bloodGroup (blood type), we can reconstruct bloodGroup into a class.

Class BloodGroup {constructor (name) {this.bloodGroup = name;}} class Person {constructor (name, bloodGroup) {this.name = name; this.bloodGroup = bloodGroup;}} const bloodGroup = new BloodGroup ('a'); const person = new Person ('joe', bloodGroup)

In this way, we can store more kinds of data in the bloodGroup field.

Replace type codes with status / policy

Sometimes we can create subclasses based on the type of the object instead of using type fields in the class. In this way, we can have more members in their own subclasses that the two classes do not share.

For example, we might write code like this:

Class Animal {constructor (type) {this.type = type}} const cat = new Animal ('cat') const dog = new Animal (' dog')

We can ReFactor the corresponding class based on the type type:

Class Animal {/ /...} class Cat extends Animal {/ /...} class Dog extends Animal {/ /...} const cat = new Cat (); const dog = new Dog ()

In the above example, we write a separate Animal class and add the Cat and Dog classes, which are subclasses of the Animal class.

In this way, we can save the properties shared in the Cat and Dog classes in their respective classes, and put the shared properties in the Animal class.

Decomposition conditional expression

We can decompose a long conditional expression into smaller conditional expressions.

For example, we might write code like this:

Let ieIEMac = navigator.userAgent.toLowerCase () .includes ("mac") & & navigator.userAgent.toLowerCase () .includes ("ie")

We can ReFactor it like this:

Let userAgent = navigator.userAgent.toLowerCase (); let isMac = userAgent.includes ("mac"); let isIE = userAgent.toLowerCase () .includes ("ie"); let isMacisMacIE = isMac & & isIE

We decompose long and difficult conditional expressions into multiple short expressions, which will greatly increase readability.

If we have a lot of duplicate values that mean the same thing, but don't specify them, then we should convert them to constants so that everyone knows what they mean, and if we need to change them, we only need to change one place.

To better control the properties of the class, we can add getter and setter methods to it.

If we have type fields, we can replace them with their own subclasses.

Finally, we can decompose long conditional expressions into smaller conditional expressions for easy reading and understanding.

This is the answer to the question about how to optimize the refactoring ideas of JS classes and objects. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.