JavaScript設(shè)計(jì)模式之性能優(yōu)化模式享元模式
前言
享元設(shè)計(jì)模式是用于性能優(yōu)化的模式,這種設(shè)計(jì)模式的核心在于可以共享技術(shù)并支持對(duì)大量細(xì)分過(guò)后的對(duì)象進(jìn)行調(diào)整,如果系統(tǒng) 中因?yàn)閯?chuàng)建大量類似的對(duì)象而導(dǎo)致內(nèi)存占用過(guò)高,享元設(shè)計(jì)模式在其中就會(huì)起到非常重要的作用,因?yàn)樗梢允蛊錅p少重復(fù)創(chuàng)建相同類似的實(shí)例對(duì)象。在JavaScript中瀏覽器特別是移動(dòng)端的瀏覽器部分所能夠使用的內(nèi)存并不是很多,所以在其中節(jié)省內(nèi)存就變得至關(guān)重要
案例
假設(shè)有一個(gè)服裝廠,目前的產(chǎn)品擁有20種男士衣服和20種女士衣服,為了提高衣服產(chǎn)品銷(xiāo)量,服裝廠決定生產(chǎn)一些塑料模特來(lái)穿上他們的衣服拍成廣告照片進(jìn)行宣傳。正常情況下需要20個(gè)男模特和20個(gè)女模特,然后讓他們每一個(gè)模特都穿上一件內(nèi)衣來(lái)在進(jìn)行拍照。我們來(lái)實(shí)現(xiàn)一下
創(chuàng)建一個(gè)模特實(shí)例,該模特實(shí)例接收倆個(gè)參數(shù),sex是指男模特還是女模特,name是衣服的編號(hào),擁有一個(gè)拍照方法take,調(diào)用此方法則會(huì)進(jìn)行拍照
class?Model{
???????constructor(sex,name){
this.sex=sex;
this.name=name;
???????}
???????take(){
???????????console.log(`進(jìn)行拍照,性別:${this.sex},衣服編號(hào):${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套女士衣服,所以會(huì)產(chǎn)生40個(gè)對(duì)象,如果將來(lái)我們生產(chǎn)了100種,1000種衣服,程序可能還沒(méi)有創(chuàng)建夠這么多實(shí)例就已經(jīng)提前崩潰,我們來(lái)考慮下如何進(jìn)行優(yōu)化這個(gè)場(chǎng)景,雖然有40種衣服,但是我們并不需要20個(gè)男模特和20個(gè)女模特,其實(shí)男女模特各自擁有一個(gè)就可以了,他們可以分別穿上不同的衣服進(jìn)行拍照,然后再更換其他衣服在進(jìn)行拍照,以此往復(fù)
我們男女模特各創(chuàng)建一個(gè)實(shí)例,然后通過(guò)更換衣服的編號(hào)在進(jìn)行拍照,最后我們只創(chuàng)建了倆個(gè)實(shí)例就完成了之前的功能
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è)計(jì)模式的狀態(tài)
享元設(shè)計(jì)模式狀態(tài)分為內(nèi)部狀態(tài)和外部狀態(tài),內(nèi)部狀態(tài)是可以被存儲(chǔ)于對(duì)象內(nèi)部且被共享的,外部狀態(tài)獨(dú)立于具體的場(chǎng)景,一般無(wú)需改變,他可以根據(jù)場(chǎng)景進(jìn)行變化,不過(guò)她是不可被共享的
享元設(shè)計(jì)模式的狀態(tài)我們可以使用我們做過(guò)的案例來(lái)進(jìn)行描述,性別是內(nèi)部狀態(tài),而服裝是外部狀態(tài),通過(guò)區(qū)分這倆種狀態(tài),大大減少了系統(tǒng)中的對(duì)象數(shù)量,一般內(nèi)部狀態(tài)有多少種組合,系統(tǒng)中便會(huì)存在多少個(gè)對(duì)象,因?yàn)橐话阒挥心信畟z種性別,所以我們這里只需要倆個(gè)實(shí)例對(duì)象
享元設(shè)計(jì)模式在需要到大量重復(fù)且相同實(shí)例的時(shí)候進(jìn)行使用,能夠減少對(duì)內(nèi)存的大量消耗
到此這篇關(guān)于JavaScript設(shè)計(jì)模式之性能優(yōu)化模式享元模式的文章就介紹到這了,更多相關(guān)JavaScript享元模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
XML文件轉(zhuǎn)化成NSData對(duì)象的方法
這篇文章主要介紹了XML文件轉(zhuǎn)化成NSData對(duì)象的方法,需要的朋友可以參考下2015-08-08
20個(gè)你不得不知道的JS async/await實(shí)用技巧
JavaScript的async和await關(guān)鍵詞是現(xiàn)代JavaScript異步編程的核心,它們讓異步代碼看起來(lái)和同步代碼幾乎一樣,使得異步編程變得更加直觀和易于管理,本文介紹20個(gè)關(guān)于async/await的實(shí)用技巧,將大大提升編程效率和代碼的清晰度,需要的朋友可以參考下2023-12-12
原生JS實(shí)現(xiàn)匯率轉(zhuǎn)換功能代碼實(shí)例
這篇文章主要介紹了原生JS實(shí)現(xiàn)匯率轉(zhuǎn)換功能代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
關(guān)于js拖拽上傳 [一個(gè)拖拽上傳修改頭像的流程]
拖拽是操作系統(tǒng)用戶體驗(yàn)最偉大的改進(jìn)之一。它讓人隨心所欲的操作,更符合人們的直觀感受。2011-07-07
JS組件Bootstrap實(shí)現(xiàn)圖片輪播效果
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap實(shí)現(xiàn)圖片輪播效果的具體代碼,對(duì)圖片輪播效果感興趣的小伙伴們可以參考一下2016-05-05
js實(shí)現(xiàn)的定時(shí)關(guān)閉頁(yè)面或定時(shí)提醒效果代碼
比較有創(chuàng)意的定時(shí)關(guān)閉頁(yè)面或定時(shí)提醒效果代碼2008-02-02
JS中自定義定時(shí)器讓它在某一時(shí)刻執(zhí)行
寫(xiě)一個(gè)方法,讓它在某一時(shí)刻執(zhí)行,即需要在JS中寫(xiě)一個(gè)定時(shí)器,當(dāng)時(shí)間達(dá)到要求時(shí)間時(shí),需要執(zhí)行的方法自動(dòng)執(zhí)行,下面的示例大家可以參考下2014-09-09
JavaScript屏蔽指定區(qū)域內(nèi)右鍵菜單
有時(shí)候需要屏蔽部分區(qū)域內(nèi)的右鍵菜單,下面的代碼大家可以測(cè)試下。2010-03-03
JavaScript深度復(fù)制(deep clone)的實(shí)現(xiàn)方法
本文給大家介紹JavaScript深度復(fù)制(deep clone)的實(shí)現(xiàn)方法,涉及到j(luò)s深度復(fù)制相關(guān)知識(shí),本文介紹的非常詳細(xì),特此分享腳本之家平臺(tái)供大家參考2016-02-02

