JavaScript設計模式之性能優化模式享元模式

Posted on by

前言

享元設計模式是用於性能優化的模式，這種設計模式的核心在於可以共享技術並支持對大量細分過後的對象進行調整，如果系統    中因為創建大量類似的對象而導致內存占用過高，享元設計模式在其中就會起到非常重要的作用，因為它可以使其減少重復創建相同類似的實例對象。在JavaScript中瀏覽器特別是移動端的瀏覽器部分所能夠使用的內存並不是很多，所以在其中節省內存就變得至關重要

案例

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

創建一個模特實例，該模特實例接收倆個參數，sex是指男模特還是女模特，name是衣服的編號，擁有一個拍照方法take，調用此方法則會進行拍照

class Model{
       constructor(sex,name){
        this.sex=sex;
           this.name=name;
       }
       take(){
           console.log(`進行拍照，性別:${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();
   }

如上操作，現在一共有20套男士衣服和20套女士衣服，所以會產生40個對象，如果將來我們生產瞭100種，1000種衣服，程序可能還沒有創建夠這麼多實例就已經提前崩潰，我們來考慮下如何進行優化這個場景，雖然有40種衣服，但是我們並不需要20個男模特和20個女模特，其實男女模特各自擁有一個就可以瞭，他們可以分別穿上不同的衣服進行拍照，然後再更換其他衣服在進行拍照，以此往復

我們男女模特各創建一個實例，然後通過更換衣服的編號在進行拍照，最後我們隻創建瞭倆個實例就完成瞭之前的功能

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();
   }

享元設計模式的狀態

享元設計模式狀態分為內部狀態和外部狀態，內部狀態是可以被存儲於對象內部且被共享的，外部狀態獨立於具體的場景，一般無需改變，他可以根據場景進行變化，不過她是不可被共享的

享元設計模式的狀態我們可以使用我們做過的案例來進行描述，性別是內部狀態，而服裝是外部狀態，通過區分這倆種狀態，大大減少瞭系統中的對象數量，一般內部狀態有多少種組合，系統中便會存在多少個對象，因為一般隻有男女倆種性別，所以我們這裡隻需要倆個實例對象

享元設計模式在需要到大量重復且相同實例的時候進行使用，能夠減少對內存的大量消耗

到此這篇關於JavaScript設計模式之性能優化模式享元模式的文章就介紹到這瞭,更多相關JavaScript享元模式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：