Performance optimization mode and meta sharing mode of JavaScript Design Pattern

1024 Q 2022-06-23 15:06:36 阅读数:999




Case study

Enjoy the status of the meta design pattern


The shared element design pattern is used for performance optimization , The core of this design pattern is that it can share technology and support the adjustment of a large number of subdivided objects , If the system     High memory usage due to the creation of a large number of similar objects in , Sharing element design pattern will play a very important role in it , Because it can reduce the repetition of creating the same similar instance object . stay JavaScript There is not much memory that can be used by Chinese browsers, especially mobile browsers , So saving memory becomes very important

Case study

Suppose there is a clothing factory , The current product has 20 Men's clothes and 20 Women's clothes , In order to increase the sales of clothing products , The clothing factory decided to produce some plastic models to wear their clothes and make advertising photos for publicity . Under normal circumstances, it is necessary to 20 A male model and 20 A female model , Then let each of their models wear a piece of underwear to take photos . Let's make it happen

Create a model instance , The model instance receives two parameters ,sex Is it a male model or a female model ,name It's the number of the clothes , Have a way to take pictures take, Calling this method will take pictures

class Model{       constructor(sex,name){;;       }       take(){           console.log(` Take pictures , Gender :${}, Clothing number :${}`);       }   }

Use :

   for (let index = 0; index <= 20; index++) {      var male=new Model('male',index);      var female=new Model('female',index);      male.take();      female.take();   }

The above operation , Now there is 20 A man's suit and 20 A lady's suit , So there will be 40 Objects , If we produce 100 Kind of ,1000 Kind of clothes , The program may crash prematurely before it has created enough instances , Let's consider how to optimize this scenario , Although there are 40 Kind of clothes , But we don't need 20 A male model and 20 A female model , In fact, male and female models can have one each , They can wear different clothes to take photos , Then change other clothes to take photos , In reciprocating

We create one instance for each male and female model , Then take photos by changing the number of clothes , Finally, we only created two instances to complete the previous functions

var male=new Model('male'); var female=new Model('female');for (let index = 0; index <= 20; index++) {;;     male.take();      female.take();   } Enjoy the status of the meta design pattern

Shared element design mode status is divided into internal status and external status , Internal states can be stored inside objects and shared , The external state is independent of the specific scenario , Generally no change is required , He can change according to the scene , But she can't be shared

We can use the cases we have done to describe the status of the shared element design pattern , Gender is the internal state , And clothing is the external state , By distinguishing between these two states , Greatly reduce the number of objects in the system , How many combinations of general internal states , How many objects exist in the system , Because there are only two genders , So we only need two instance objects here

The shared element design pattern is used when a large number of repeated and identical instances are required , It can reduce the large consumption of memory

This is about JavaScript This is the end of the article on performance optimization mode and meta sharing mode of design mode , More about JavaScript Please search the previous articles of SDN or continue to browse the related articles below. I hope you will support SDN more in the future !

版权声明:本文为[1024 Q]所创,转载请带上原文链接,感谢。