本篇文章帶給大家的內容是關於js設計模式:什麼是享元模式? js享元模式的介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
定義:享元模式是一種最佳化程式效能的模式,本質為減少物件所建立的數量。
主要解決:在有大量物件時,有可能會造成記憶體溢出,我們把其中共同的部分抽像出來,如果有相同的業務請求,直接返回在記憶體中已有的對象,避免重新創建。
何時使用: 1、系統中有大量物件。 2、這些物件消耗大量記憶體。 3.這些物件的狀態大部分可以外部化。 4.這些物件可以依照內蘊狀態分為許多群組,當把外蘊物件從物件中剔除時,每一組物件都可以用一個物件來取代。 5.系統不依賴這些物件身份,這些物件是不可分辨的。
如何解決:用唯一識別碼判斷,如果在記憶體中有,則傳回這個唯一識別碼所標識的物件。
關鍵程式碼:用 hash物件儲存這些物件。
js享元模式應用程式實例: 1、例如string,如果有則返回,如果沒有則建立一個字串保存在字串快取池裡面。 2、資料庫的資料池。
js享元模式優點:大幅減少物件的創建,降低系統的內存,使效率提高。
js享元模式缺點:提高了系統的複雜度,需要分離出外部狀態和內部狀態,而且外部狀態具有固有化的性質,不應該隨著內部狀態的變化而變化,否則會造成系統的混亂。
js享元模式使用場景: 1、系統有大量相似物件。 2、需要緩衝池的場景。
某商家有50 種男款內衣和50 種款女款內衣,要展示它們
方案一:造50 個塑料男模與50 個塑膠女模,讓她們穿上展示,代碼如下:
const Model = function(gender, underwear) { this.gender = gender this.underwear = underwear } Model.prototype.takephoto = function() { console.log(`${this.gender}穿着${this.underwear}`) } for (let i = 1; i < 51; i++) { const maleModel = new Model('male', `第${i}款衣服`) maleModel.takephoto() } for (let i = 1; i < 51; i++) { const female = new Model('female', `第${i}款衣服`) female.takephoto() }
方案二:造1 個塑膠男模特兒1 個塑膠女模特,分別試穿50 款內衣
const Model = function(gender) { this.gender = gender } Model.prototype.takephoto = function() { console.log(`${this.gender}穿着${this.underwear}`) } const maleModel = new Model('male') const femaleModel = new Model('female') for (let i = 1; i < 51; i++) { maleModel.underwear = `第${i}款衣服` maleModel.takephoto() } for (let i = 1; i < 51; i++) { femaleModel.underwear = `第${i}款衣服` femaleModel.takephoto() }
對比發現:方案一創造了100 個對象,方案二隻創建了2 個對象,在該demo 中,gender(性別) 是內部對象,underwear(穿著) 是外部對象。
當然在方案二的demo 中,還可以進一步改善:
#一開始就透過建構函式顯示地建立實例,可用工場模式將其升級成可控產生
在實例上手動新增underwear 不是很優雅,可以在外部單獨在寫個manager 函數
const Model = function(gender) { this.gender = gender } Model.prototype.takephoto = function() { console.log(`${this.gender}穿着${this.underwear}`) } const modelFactory = (function() { // 优化第一点 const modelGender = {} return { createModel: function(gender) { if (modelGender[gender]) { return modelGender[gender] } return modelGender[gender] = new Model(gender) } } }()) const modelManager = (function() { const modelObj = {} return { add: function(gender, i) { modelObj[i] = { underwear: `第${i}款衣服` } return modelFactory.createModel(gender) }, copy: function(model, i) { // 优化第二点 model.underwear = modelObj[i].underwear } } }()) for (let i = 1; i < 51; i++) { const maleModel = modelManager.add('male', i) modelManager.copy(maleModel, i) maleModel.takephoto() } for (let i = 1; i < 51; i++) { const femaleModel = modelManager.add('female', i) modelManager.copy(femaleModel, i) femaleModel.takephoto() }
相關推薦:
以上是js設計模式:什麼是享元模式? js享元模式的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!