javascript設(shè)計(jì)模式之享元模式
一. 認(rèn)識(shí)享元模式
享元模式:是一種用于性能優(yōu)化的模式,其核心是運(yùn)用共享技術(shù)來(lái)有效支持大量細(xì)粒度的對(duì)象。
通俗點(diǎn)來(lái)講就是找出事物很多屬性種屬性分類(lèi)最少的一種,利用屬性值的個(gè)數(shù)來(lái)分類(lèi)。比如說(shuō)有這么一個(gè)例子,假如一個(gè)工廠需要 20 個(gè)男性模特和 20 個(gè)女性模特需要穿上 40 件新款衣服拍照做宣傳,如果我們不使用享元模式,則需要聘請(qǐng) 40 位模特,這會(huì)造成巨大的經(jīng)濟(jì)損失,也沒(méi)有必要,如果使用享元模式通過(guò)性別來(lái)區(qū)分,則只需要一男一女兩個(gè)模特。下面我們來(lái)看代碼實(shí)現(xiàn)。
二. 代碼具體實(shí)現(xiàn)
1. 不使用享元模式實(shí)現(xiàn)上述案例
分析:這是正常的代碼實(shí)現(xiàn),我們一共創(chuàng)建了 40 個(gè)對(duì)象,我們?nèi)粘>帉?xiě)代碼可能不會(huì)注意這種情況,但是在實(shí)際開(kāi)發(fā)中如果遇到創(chuàng)建幾萬(wàn)個(gè)甚至幾十萬(wàn)個(gè)對(duì)象,就會(huì)造成嚴(yán)重的性能損耗,浪費(fèi)內(nèi)存。
let Model = function(sex, underwear) { this.sex = sex; this.underwear = underwear; } Model.prototype.takePhoto = function () { console.log('sex=' + this.sex + 'underwear = ' + this.underwear); } for(let i = 0; i < 20 ; i++){ new Model('男', 'underwear' + i).takePhoto(); } for(let i = 0; i < 20 ; i++){ new Model('女', 'underwear' + i).takePhoto(); }
2. 使用享元模式重構(gòu)上述代碼
分析:代碼重構(gòu)后,我們只創(chuàng)建了兩個(gè)對(duì)象便完成了同樣的任務(wù),無(wú)論需要多少對(duì)象,但是我們只需要?jiǎng)?chuàng)建兩個(gè)對(duì)象,大大提高了性能。
let ModelR = function( sex ) { this.sex = sex; } let ModelF = new ModelR( '女' ); let ModelM = new ModelR('男'); ModelR.prototype.takePhoto = function () { console.log('sex=' + this.sex + 'underwear = ' + this.underwear); } for(let i = 0; i < 20 ; i++) { ModelF.underwear = 'underwear' + i; ModelF.takePhoto(); } for(let i = 0; i < 20 ; i++) { ModelM.underwear = 'underwear' + i; ModelM.takePhoto(); }
總體分析:
現(xiàn)在我們對(duì)享元模式有了一個(gè)大致的了解,思想其實(shí)很簡(jiǎn)單,利用所有對(duì)象相同的屬性來(lái)初始化創(chuàng)建對(duì)象,上述例子中利用人的性別這個(gè)屬性來(lái)創(chuàng)建對(duì)象,而性別這個(gè)屬性只有男女這兩種,因此我們只需要?jiǎng)?chuàng)建兩個(gè)對(duì)象,將衣服作為其他不同的屬性添加到對(duì)象中便完成了對(duì)象的替換,相當(dāng)于擁有 40 個(gè)不同的對(duì)象,但是實(shí)際只創(chuàng)建了兩個(gè)。
因此,我們就引出了一個(gè)新的概念,內(nèi)部狀態(tài)與外部狀態(tài)。
3. 享元模式的狀態(tài)
- 內(nèi)部狀態(tài):也就是我們上文提到的屬性分類(lèi)最少的一種,也就是性別,只有兩種,可以被對(duì)象共享。
- 外部狀態(tài):其他屬性,不能被共享。
結(jié)論:剝離了外部狀態(tài)的對(duì)象成為了共享對(duì)象,外部對(duì)象在必要時(shí)被傳入共享對(duì)象來(lái)組裝成一個(gè)完整的對(duì)象,組裝外部對(duì)象需要花費(fèi)一定的時(shí)間,但節(jié)省了大量?jī)?nèi)存損耗,因此,享元模式是一種時(shí)間換空間的優(yōu)化模式。
三. 享元模式實(shí)際應(yīng)用
假如我們需用對(duì)文件上傳,現(xiàn)在假設(shè)有兩種上傳方式 flash 和 plugin,每一次上傳都對(duì)應(yīng)一次 js 對(duì)象的創(chuàng)建,如果我們按部就班,當(dāng)大量文件上傳時(shí)就會(huì)造成瀏覽器假死狀態(tài),因此我們用享元模式來(lái)設(shè)計(jì)代碼,首先我們來(lái)確定文件的內(nèi)部狀態(tài)和外部狀態(tài),我們思考下文件有什么屬性,文件大小,文件類(lèi)型,文件上傳方式,文件大小和文件類(lèi)型都是不可控屬性,文件上傳方式只有兩種,因此將文件上傳方式作為外部狀態(tài),現(xiàn)在我們來(lái)編寫(xiě)代碼。
let Upload = function(uploadType) { this.uploadType = uploadType; } Upload.prototype.delFile = function( id ) { uploadManager.setExternalState(id, this); if(this.fileSize < 3000) { return this.dom.parentNode.removeChild(this.dom); } } // 使用工廠模式來(lái)創(chuàng)建對(duì)象 let UploadFactory = function() { let cache = {}; return { create(uploadType) { if(cache[uploadType]){ return cache[uploadType]; } return cache[uploadType] = new Upload( uploadType ); } } }() // 創(chuàng)建一個(gè)管理器封裝外部狀態(tài) let uploadManager = function() { uploadDatabase = {}; return { add(id, uploadType, fileName, fileSize){ let uploadObj = UploadFactory.create( uploadType ); let dom = document.createElement('div'); dom.innerHTML = `<span>文件名稱(chēng): ${ fileName },文件大?。?{fileSize}</span> <button id="del">刪除</button>`; dom.querySelector('#del').onclick = function() { uploadObj.delFile( id ); } document.body.appendChild( dom ); uploadDatabase[ id ] = { fileName, fileSize, dom } return uploadObj; }, setExternalState(id, uploadObj){ let uploadData = uploadDatabase[id]; for(let i in uploadData) { uploadObj[i] = uploadData[i]; } } } }(); let id = 0; window.startUpload = function(uploadType, files) { for(let i = 0,file; file = files[i++];){ let uploadObj = uploadManager.add(++id, uploadType, file.fileName, file.fileSize); // 進(jìn)行上傳 } }; startUpload('plugin', [ { fileName: '1.txt', fileSize: 1000 }, { fileName: '2.txt', fileSize: 1000 }, { fileName: '3.txt', fileSize: 3000 } ]) startUpload('flash', [ { fileName: '4.txt', fileSize: 1000 }, { fileName: '5.txt', fileSize: 1000 }, { fileName: '6.txt', fileSize: 3000 } ])
擴(kuò)展:再談內(nèi)部狀態(tài)和外部狀態(tài)
現(xiàn)在我們思考下,如果沒(méi)有內(nèi)部狀態(tài)或者沒(méi)有外部狀態(tài)那有該怎么辦。
- 沒(méi)有內(nèi)部狀態(tài)享元:此時(shí),所有屬性作為外部享元,相當(dāng)于內(nèi)部享元只有一種空,因此我們只需要?jiǎng)?chuàng)建一個(gè)對(duì)象,此時(shí)便相當(dāng)于之前所提單的單例模式。
- 沒(méi)有外部狀態(tài)享元:這時(shí)引入一個(gè)新的概念,對(duì)象池。
四. 對(duì)象池
對(duì)象池的應(yīng)用十分廣泛,數(shù)據(jù)庫(kù)的連接池就是其重要用武之地。對(duì)象池的大多數(shù)使用場(chǎng)景就是 DOM 操作,因?yàn)?nbsp;DOM 的創(chuàng)建和刪除是 js 種最消耗性能的操作。
理解對(duì)象池非常簡(jiǎn)單,比如說(shuō)我們想做一個(gè)圓形的月餅,只需要制造一個(gè)圓形的模具便可以做無(wú)數(shù)的圓形月餅,當(dāng)我們想做方形月餅時(shí),只需要制造一個(gè)方形模具,同時(shí)將圓形模具保留下來(lái),等再次使用時(shí)拿出來(lái)直接用便可。對(duì)象池就是這樣的原理,我們看一下其通用實(shí)現(xiàn)代碼。
let objectPoolFactory = function( fn ) { let pool = []; return { create(...args){ let obj = (pool.length === 0)? fn.apply(this, args) : pool.shift(); return obj; }, recover(obj) { pool.push(obj); } } }
實(shí)際應(yīng)用
我們?cè)诘貓D上搜索幾個(gè)不同的位置,第一次搜索顯示北京的兩個(gè)景區(qū)位置,第二次搜索北京三個(gè)飯店的位置。
分析:第一次需要兩個(gè) DOM 節(jié)點(diǎn),因此創(chuàng)建兩個(gè)節(jié)點(diǎn),之后將其回收,第二次需要三個(gè)DOM節(jié)點(diǎn),使用之前的兩個(gè),只需要再創(chuàng)建一個(gè)新的節(jié)點(diǎn)便可,大大提高了代碼性能。
// 創(chuàng)建 dom 節(jié)點(diǎn) let createDomFactory = objectPoolFactory(()=>{ let div = document.createElement('div'); document.body.appendChild(div); return div; }); let ary = []; // 用于回收 let name = ['天安門(mén)', "長(zhǎng)城"]; for(let i = 0, l= name.length; i < l ;i++){ let dom = createDomFactory.create(); dom.innerHTML = name[i]; ary.push(dom); } for(let i = 0, l = ary.length; i < l ; i ++ ){ createDomFactory.recover(ary[i]); } let name1 = ["飯店1", "飯店2", "飯店3"]; for(let i = 0, l = name1.length; i < l; i++) { let dom = createDomFactory.create(); dom.innerHTML = name1[i]; }
五. 總結(jié)
享元模式是一種很好的性能優(yōu)化方案,但也會(huì)帶來(lái)一些復(fù)雜性問(wèn)題,因此需要選擇合適的時(shí)機(jī)使用享元模式,比如:
一個(gè)程序種使用了大量相似對(duì)象使用大量對(duì)象造成很大內(nèi)存開(kāi)銷(xiāo)對(duì)象大多數(shù)狀態(tài)都可以變?yōu)橥獠繝顟B(tài)剝離出外部對(duì)象之后,可以用相對(duì)較少的共享對(duì)象取代大量的對(duì)象
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
- javascript設(shè)計(jì)模式 – 享元模式原理與用法實(shí)例分析
- javascript 設(shè)計(jì)模式之享元模式原理與應(yīng)用詳解
- JavaScript享元模式原理與用法實(shí)例詳解
- JavaScript設(shè)計(jì)模式之享元模式實(shí)例詳解
- JavaScript使用享元模式實(shí)現(xiàn)文件上傳優(yōu)化操作示例
- js設(shè)計(jì)模式之結(jié)構(gòu)型享元模式詳解
- 輕松掌握J(rèn)avaScript享元模式
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式之享元模式
- JS實(shí)現(xiàn)簡(jiǎn)單的圖書(shū)館享元模式實(shí)例
- JavaScript設(shè)計(jì)模式之性能優(yōu)化模式享元模式
相關(guān)文章
Javascript學(xué)習(xí)筆記之?dāng)?shù)組的遍歷和 length 屬性
我們一般用循環(huán)來(lái)遍歷數(shù)組,而循環(huán)一直是 JavaScript 性能問(wèn)題的常見(jiàn)來(lái)源,有時(shí)循環(huán)用得不好會(huì)嚴(yán)重降低代碼的運(yùn)行速度。數(shù)組的屬性可以分為三種:length屬性,索引屬性,其他屬性.和普通對(duì)象相比,數(shù)組對(duì)象特殊的地方就是它的length屬性和索引屬性。2014-11-11淺談JavaScript的內(nèi)置對(duì)象和瀏覽器對(duì)象
下面小編就為大家?guī)?lái)一篇淺談JavaScript的內(nèi)置對(duì)象和瀏覽器對(duì)象。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06你必須知道的JavaScript 變量命名規(guī)則詳解
在編寫(xiě)代碼的時(shí)候難免涉及到變量的命名問(wèn)題,不能只要求變量名的語(yǔ)法正確,而忽略了變量命名對(duì)代碼可讀性的影響2013-05-05ES6基礎(chǔ)語(yǔ)法之?dāng)?shù)組拓展
這篇文章介紹了ES6基礎(chǔ)語(yǔ)法之?dāng)?shù)組拓展,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05JS中構(gòu)造函數(shù)的基本特性與優(yōu)缺點(diǎn)
這篇文章介紹了JS中構(gòu)造函數(shù)的基本特性與優(yōu)缺點(diǎn),文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06簡(jiǎn)略說(shuō)明Javascript中的= =(等于)與= = =(全等于)區(qū)別
本篇文章簡(jiǎn)略說(shuō)明了Javascript中的= =(等于)與= = =(全等于)區(qū)別,有需要的朋友可以參考一下2013-04-04