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

This article mainly explains "what is the method of JavaScript object refactoring". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the method of JavaScript object refactoring".

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.81const 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_CONSTANTconst 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.

Thank you for your reading, the above is the content of "what is the method of JavaScript object refactoring". After the study of this article, I believe you have a deeper understanding of what the method of JavaScript object refactoring is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.