前言

享元設(shè)計模式是用于性能優(yōu)化的模式，這種設(shè)計模式的核心在于可以共享技術(shù)并支持對大量細(xì)分過后的對象進(jìn)行調(diào)整，如果系統(tǒng)    中因為創(chuàng)建大量類似的對象而導(dǎo)致內(nèi)存占用過高，享元設(shè)計模式在其中就會起到非常重要的作用，因為它可以使其減少重復(fù)創(chuàng)建相同類似的實例對象。在JavaScript中瀏覽器特別是移動端的瀏覽器部分所能夠使用的內(nèi)存并不是很多，所以在其中節(jié)省內(nèi)存就變得至關(guān)重要

案例

假設(shè)有一個服裝廠，目前的產(chǎn)品擁有20種男士衣服和20種女士衣服，為了提高衣服產(chǎn)品銷量，服裝廠決定生產(chǎn)一些塑料模特來穿上他們的衣服拍成廣告照片進(jìn)行宣傳。正常情況下需要20個男模特和20個女模特，然后讓他們每一個模特都穿上一件內(nèi)衣來在進(jìn)行拍照。我們來實現(xiàn)一下

創(chuàng)建一個模特實例，該模特實例接收倆個參數(shù)，sex是指男模特還是女模特，name是衣服的編號，擁有一個拍照方法take，調(diào)用此方法則會進(jìn)行拍照

class?Model{
???????constructor(sex,name){
        this.sex=sex;
           this.name=name;
???????}
???????take(){
???????????console.log(`進(jìn)行拍照，性別:${this.sex},衣服編號：${this.name}`);
???????}
???}

使用:

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

如上操作，現(xiàn)在一共有20套男士衣服和20套女士衣服，所以會產(chǎn)生40個對象，如果將來我們生產(chǎn)了100種，1000種衣服，程序可能還沒有創(chuàng)建夠這么多實例就已經(jīng)提前崩潰，我們來考慮下如何進(jìn)行優(yōu)化這個場景，雖然有40種衣服，但是我們并不需要20個男模特和20個女模特，其實男女模特各自擁有一個就可以了，他們可以分別穿上不同的衣服進(jìn)行拍照，然后再更換其他衣服在進(jìn)行拍照，以此往復(fù)

我們男女模特各創(chuàng)建一個實例，然后通過更換衣服的編號在進(jìn)行拍照，最后我們只創(chuàng)建了倆個實例就完成了之前的功能

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

享元設(shè)計模式的狀態(tài)

享元設(shè)計模式狀態(tài)分為內(nèi)部狀態(tài)和外部狀態(tài)，內(nèi)部狀態(tài)是可以被存儲于對象內(nèi)部且被共享的，外部狀態(tài)獨(dú)立于具體的場景，一般無需改變，他可以根據(jù)場景進(jìn)行變化，不過她是不可被共享的

享元設(shè)計模式的狀態(tài)我們可以使用我們做過的案例來進(jìn)行描述，性別是內(nèi)部狀態(tài)，而服裝是外部狀態(tài)，通過區(qū)分這倆種狀態(tài)，大大減少了系統(tǒng)中的對象數(shù)量，一般內(nèi)部狀態(tài)有多少種組合，系統(tǒng)中便會存在多少個對象，因為一般只有男女倆種性別，所以我們這里只需要倆個實例對象

享元設(shè)計模式在需要到大量重復(fù)且相同實例的時候進(jìn)行使用，能夠減少對內(nèi)存的大量消耗

到此這篇關(guān)于JavaScript設(shè)計模式之性能優(yōu)化模式享元模式的文章就介紹到這了,更多相關(guān)JavaScript享元模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論