javascript 設計模式之享元模式原理與應用詳解
本文實例講述了javascript 設計模式之享元模式。分享給大家供大家參考，具體如下：
享元模式說明
定義：用于解決一個系統(tǒng)大量細粒度對象的共享問題:
關(guān)健詞：分離跟共享；
說明: 享元模式分單純（共享）享元模式，以及組合（不共享）享元模式，有共享跟不共享之分；單純享元模式，只包含共享的狀態(tài)，可共享狀態(tài)是不可變，不可修改的，這是享元的內(nèi)部狀態(tài)；當然有外部狀態(tài)就有外部狀態(tài)，外部狀態(tài)是可變的，不被共享，這個外部狀態(tài)由客戶端來管理，是可變化的；外部狀態(tài)與內(nèi)部狀態(tài)是獨立分開的，外部狀態(tài)一般作為參數(shù)傳入享元對象內(nèi)，但不會影響內(nèi)部狀態(tài)的值；外部狀態(tài)，一用用于獲取共享的享元對象，或多或少與內(nèi)部狀態(tài)有點關(guān)聯(lián)；比如從用戶數(shù)據(jù)表中獲取數(shù)據(jù)，傳入一個外部變量用戶名，再根據(jù)這個用戶名，獲取該用戶所有對象狀態(tài)信息；
組合享元模式，配置組合模式來使用，共享部分只做個葉子節(jié)點，而組合部分是不必共享的，因為共組部分的子葉節(jié)點元素已經(jīng)被緩存，組合部分相當一個分組分類的作用;
享元模式一般會與工廠模式相結(jié)合使用，用于管理緩存的創(chuàng)建跟維護，享元共享元素的創(chuàng)建一般在工廠類里創(chuàng)建；
享元模式主要用于對象的共享，使具有相似對象，或?qū)ο箝g具有太多相似細粒度的狀態(tài)，能共享已經(jīng)創(chuàng)建的對象，減少對象的創(chuàng)建，減少對內(nèi)存的占用，提升優(yōu)化性能；
一種場景:
享元模式結(jié)構(gòu)圖:
像第一張的情況，就可以使用享元模式，因為后兩排的狀態(tài)組合，可能在實體對應中，多次存在，這時就可以使用享元的共享特性，來減少對象的創(chuàng)建，如有相同的狀態(tài)或組合，就可以獲取緩存的狀態(tài)，減少對象重復創(chuàng)建，減少內(nèi)存占用；
實例場景：
1>. 系統(tǒng)各種角色權(quán)限分配;
2>. 系統(tǒng)出現(xiàn)很多種狀態(tài)，或組合狀態(tài)需要對應的，而且這種對應，可以發(fā)生很多種其他類型對象上面的，就可以使用享元模式；
實例源碼: 單純(共享)享元
1. 自定義的 JavaScript Hashtable:
function Hashtable() {
this.values = [];
}
Hashtable.prototype.getJson = function() {
return this.values;
}
Hashtable.prototype.add = function(key, value) {
if (!this.contain(key)) {
this.values.push({key:key, value:value});
}
}
Hashtable.prototype.contain = function(key) {
for (idx in this.values) {
var json = this.values[idx];
if (json.key == key) {
return true;
}
}
return false;
}
Hashtable.prototype.get = function(key) {
var result;
for (idx in this.values) {
var json = this.values[idx];
if (json.key == key) {
result = json;
break;
}
}
return result;
}
Hashtable.prototype.delete = function(key) {
for (idx in this.values) {
var json = this.values[idx];
if (json.key == key) {
delete this.values[idx];
break;
}
}
}
Hashtable.prototype.set = function(key, value) {
if (this.contain(key)) {
this.delete(key);
this.values.push({key:key,value:value});
}
}
2. 享元方法:
function Flyweight(one) {
this.stateOne = one;
}
Flyweight.prototype.operate = function(){
var date = new Date();
console.log(this.stateOne + '-' + Math.random());
};
這里可以處理傳進來的參數(shù)的一些邏輯，也可以初始化從數(shù)據(jù)庫里提取數(shù)據(jù)緩存保存；
3. 享元工廠:
function FlyweightFactory(){
var hash = new Hashtable();
}
FlyweightFactory.prototype.getFlyweight = function(state) {
var flyweight;
if (hash.contain(state)) {
flyweight = hash.get(state);
} else {
flyweight = new Flyweight(state);
hash.add(state, flyweight);
}
return flyweight;
}
4. Client 使用:
//Client
var factory = new FlyweightFactory();
var fly1, fly2, fly3;
fly1 = factory.getFlyweight('AABB');
fly2 = factory.getFlyweight('CCDD');
fly3 = factory.getFlyweight('CCDD');
fly1.operate();
fly2.operate();
fly3.operate();
輸出:
AABB-0.8621504916809499
CCDD-0.7498800195753574
CCDD-0.7498800195753574
復合享元模式
1. 復合享元
function UnShareFlyweight() {
this.state = '';
this.hash = new Hashtable();
}
UnShareFlyweight.prototype.add = function(key, flyweight) {
this.hash.add(key, flyweight);
}
UnShareFlyweight.prototype.operate = function(state) {
var flag = false;
/*
for (idx in this.hash) {
var fly = this.list[idx];
if (fly.stateOne == state) {
flag = true;
break;
}
}
*/
flag = this.hash.contain(state);
flag ? console.log('Exists') : console.log('Not Exists');
}
2. 在修改添加在享元工廠的組合方法:
function FlyweightFactory(){
var hash = new Hashtable();
}
FlyweightFactory.prototype.getFlyweight = function(state) {
var flyweight;
if (hash.contain(state)) {
flyweight = hash.get(state);
} else {
flyweight = new Flyweight(state);
hash.add(state, flyweight);
}
return flyweight;
}
FlyweightFactory.prototype.getComposite = function(list) {
var unFly = new UnShareFlyweight();
var flyweight, state;
for (idx in list) {
state = list[idx];
flyweight = this.getFlyweight(state);
unFly.add(state, flyweight);
}
}
FlyweightFactory.prototype.print = function() {
var jsons = this.hash.getJson();
for (json in jsons) {
json.value.operate();
}
}
3. Client 使用:
var states = ['AABB', 'CDCD', 'AABB', 'CCDD']; var factory = new FlyweightFactory(); factory.getComposite(states); factory.print();
輸出:
AABB-0.8749617566354573
CDCD-0.6991151459515095
CCDD-0.9891050879377872
享元模式其他說明
總體來說，享元模式用于減少對象的重復創(chuàng)建，用于減少內(nèi)存使用，提升性能的結(jié)構(gòu)型模式:
它涉及三個模式：享元模式，工廠模式，組合模式;
對于處理多對多對應而產(chǎn)生的一些數(shù)據(jù)緩存存儲，是一個不錯的選擇!
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關(guān)文章
JS函數(shù)驗證總結(jié)(方便js客戶端輸入驗證)
JS函數(shù)驗證總結(jié)，都是一些基礎的東西，現(xiàn)在比較流行jquery了，不過這些東西仍然需要大家會。2010-10-10
這篇文章主要介紹了JavaScript數(shù)組去重的3種方法和代碼實例,本文直接給出實例代碼,需要的朋友可以參考下2015-07-07
微信小程序?qū)崿F(xiàn)頂部普通選項卡效果(非swiper)
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)頂部普通選項卡效果，非swiper，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)鼠標移入隨機變換顏色的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要介紹了Js數(shù)組扁平化實現(xiàn)方法代碼總匯,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
數(shù)組中是否有重復值的判斷方法有很多，本文為大家推薦下比較實用的3種方法，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要介紹了JavaScript檢測原始值、引用值、屬性的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
js使用visibilitychange處理頁面關(guān)閉事件
本文主要介紹了js使用visibilitychange處理頁面關(guān)閉事件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
在Twitter上的一些有趣的討論中, 我發(fā)現(xiàn)人們對于Web應用和站點對javascript的依賴普遍存在一種疑惑. 這種疑惑一直都存在, 而對我而言, 這個問題隨著瀏覽技術(shù)的飛躍發(fā)展而集中爆發(fā)了2013-10-10
這篇文章主要為大家介紹了JavaScipt驗證URL新方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12