您好,登錄后才能下訂單哦!
這篇文章主要介紹“javascript設計模式的享元模式怎么實現”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“javascript設計模式的享元模式怎么實現”文章能幫助大家解決問題。
享元模式:是一種用于性能優化的模式,其核心是運用共享技術來有效支持大量細粒度的對象。
通俗點來講就是找出事物很多屬性種屬性分類最少的一種,利用屬性值的個數來分類。比如說有這么一個例子,假如一個工廠需要 20 個男性模特和 20 個女性模特需要穿上 40 件新款衣服拍照做宣傳,如果我們不使用享元模式,則需要聘請 40 位模特,這會造成巨大的經濟損失,也沒有必要,如果使用享元模式通過性別來區分,則只需要一男一女兩個模特。下面我們來看代碼實現。
分析:這是正常的代碼實現,我們一共創建了 40 個對象,我們日常編寫代碼可能不會注意這種情況,但是在實際開發中如果遇到創建幾萬個甚至幾十萬個對象,就會造成嚴重的性能損耗,浪費內存。
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(); }
分析:代碼重構后,我們只創建了兩個對象便完成了同樣的任務,無論需要多少對象,但是我們只需要創建兩個對象,大大提高了性能。
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(); }
總體分析:
現在我們對享元模式有了一個大致的了解,思想其實很簡單,利用所有對象相同的屬性來初始化創建對象,上述例子中利用人的性別這個屬性來創建對象,而性別這個屬性只有男女這兩種,因此我們只需要創建兩個對象,將衣服作為其他不同的屬性添加到對象中便完成了對象的替換,相當于擁有 40 個不同的對象,但是實際只創建了兩個。
因此,我們就引出了一個新的概念,內部狀態與外部狀態。
內部狀態:也就是我們上文提到的屬性分類最少的一種,也就是性別,只有兩種,可以被對象共享。
外部狀態:其他屬性,不能被共享。
結論:剝離了外部狀態的對象成為了共享對象,外部對象在必要時被傳入共享對象來組裝成一個完整的對象,組裝外部對象需要花費一定的時間,但節省了大量內存損耗,因此,享元模式是一種時間換空間的優化模式。
假如我們需用對文件上傳,現在假設有兩種上傳方式 flash 和 plugin,每一次上傳都對應一次 js 對象的創建,如果我們按部就班,當大量文件上傳時就會造成瀏覽器假死狀態,因此我們用享元模式來設計代碼,首先我們來確定文件的內部狀態和外部狀態,我們思考下文件有什么屬性,文件大小,文件類型,文件上傳方式,文件大小和文件類型都是不可控屬性,文件上傳方式只有兩種,因此將文件上傳方式作為外部狀態,現在我們來編寫代碼。
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); } } // 使用工廠模式來創建對象 let UploadFactory = function() { let cache = {}; return { create(uploadType) { if(cache[uploadType]){ return cache[uploadType]; } return cache[uploadType] = new Upload( uploadType ); } } }() // 創建一個管理器封裝外部狀態 let uploadManager = function() { uploadDatabase = {}; return { add(id, uploadType, fileName, fileSize){ let uploadObj = UploadFactory.create( uploadType ); let dom = document.createElement('div'); dom.innerHTML = `<span>文件名稱: ${ 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); // 進行上傳 } }; 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 } ])
現在我們思考下,如果沒有內部狀態或者沒有外部狀態那有該怎么辦。
沒有內部狀態享元:此時,所有屬性作為外部享元,相當于內部享元只有一種空,因此我們只需要創建一個對象,此時便相當于之前所提單的單例模式。
沒有外部狀態享元:這時引入一個新的概念,對象池。
對象池的應用十分廣泛,數據庫的連接池就是其重要用武之地。對象池的大多數使用場景就是 DOM 操作,因為 DOM 的創建和刪除是 js 種最消耗性能的操作。
理解對象池非常簡單,比如說我們想做一個圓形的月餅,只需要制造一個圓形的模具便可以做無數的圓形月餅,當我們想做方形月餅時,只需要制造一個方形模具,同時將圓形模具保留下來,等再次使用時拿出來直接用便可。對象池就是這樣的原理,我們看一下其通用實現代碼。
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); } } }
實際應用
我們在地圖上搜索幾個不同的位置,第一次搜索顯示北京的兩個景區位置,第二次搜索北京三個飯店的位置。
分析:第一次需要兩個 DOM 節點,因此創建兩個節點,之后將其回收,第二次需要三個DOM節點,使用之前的兩個,只需要再創建一個新的節點便可,大大提高了代碼性能。
// 創建 dom 節點 let createDomFactory = objectPoolFactory(()=>{ let div = document.createElement('div'); document.body.appendChild(div); return div; }); let ary = []; // 用于回收 let name = ['天安門', "長城"]; 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]; }
關于“javascript設計模式的享元模式怎么實現”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注億速云行業資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。