溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何使用javascript中的享元模式，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
介紹：在我們日常開發中需要創建很多對象，雖然垃圾回收機制能幫我們進行回收，但是在一些需要重復創建對象的場景下，就需要有一種機制來進行優化，提高系統資源的利用率。
享元模式就是解決這類問題，主要目的是減少創建對象的數量。享元模式提倡重用現有同類對象，如未找到匹配的對象則創建新對象
定義：運用共享技術有效的支持大量細粒度對象的復用。系統只適用少量的對象，而這些對象都很相似，狀態變化很小，可以實現對象的多次復用。由于享元模式要求能夠共享的對象必須是細粒度的對象，因此他又稱為輕量級模式，是一種對象結構型模式。
場景：我們以創建圓形對象為例，通過兩個例子來對比享元模式的效果。
示例：
var redCricle = new Circle('red');
redCricle.setAttr(10,10,10);
redCricle.draw();
var redCricle1 = new Circle('red');
redCricle1.setAttr(1,1,100);
redCricle1.draw();
var redCricle2 = new Circle('red');
redCricle2.setAttr(5,5,50);
redCricle2.draw();
var blueCricle = new Circle('blue');
blueCricle.setAttr(1,1,50);
blueCricle.draw();
var blueCricle1 = new Circle('blue');
blueCricle1.setAttr(12,12,50);
blueCricle1.draw();
var blueCricle2 = new Circle('blue');
blueCricle2.setAttr(2,12,20);
blueCricle2.draw();
// 創建了一個對象
// 畫圓： 顏色：red x:10 y:10 radius:10
// 創建了一個對象
// 畫圓： 顏色：red x:1 y:1 radius:100
// 創建了一個對象
// 畫圓： 顏色：red x:5 y:5 radius:50
// 創建了一個對象
// 畫圓： 顏色：blue x:1 y:1 radius:50
// 創建了一個對象
// 畫圓： 顏色：blue x:12 y:12 radius:50
// 創建了一個對象
// 畫圓： 顏色：blue x:2 y:12 radius:20這種情況下每次使用都需要實例化一次Circle對象，對系統資源來說是一種浪費。
觀察下不難發現，除了第一次需要實例化，其余的可以基于實例繼續修改。
我們修改下：
var Circle = function(color){
console.log('創建了一個對象');
this.color = color;
this.x;
this.y;
this.radius;
this.setAttr = function(x, y, radius){
this.x = x;
this.y = y;
this.radius = radius;
}
this.draw = function(){
console.log('畫圓： 顏色：' + this.color + ' x:' + this.x + ' y:' + this.y + ' radius:' + this.radius)
}
}
var ShapeFactory = function(){
this.circleMap = {};
this.getCircle = function(color){
var circle = this.circleMap[color];
if(!circle){
circle = new Circle(color);
this.circleMap[color] = circle;
}
return circle;
}
}
var factory = new ShapeFactory();
var redCricle = factory.getCircle('red');
redCricle.setAttr(10,10,10);
redCricle.draw();
var redCricle1 = factory.getCircle('red');
redCricle1.setAttr(1,1,100);
redCricle1.draw();
var redCricle2 = factory.getCircle('red');
redCricle2.setAttr(5,5,50);
redCricle2.draw();
var blueCricle = factory.getCircle('blue');
blueCricle.setAttr(1,1,50);
blueCricle.draw();
var blueCricle1 = factory.getCircle('blue');
blueCricle1.setAttr(12,12,50);
blueCricle1.draw();
var blueCricle2 = factory.getCircle('blue');
blueCricle2.setAttr(2,12,20);
blueCricle2.draw();
// 創建了一個對象
// 畫圓： 顏色：red x:10 y:10 radius:10
// 畫圓： 顏色：red x:1 y:1 radius:100
// 畫圓： 顏色：red x:5 y:5 radius:50
// 創建了一個對象
// 畫圓： 顏色：blue x:1 y:1 radius:50
// 畫圓： 顏色：blue x:12 y:12 radius:50
// 畫圓： 顏色：blue x:2 y:12 radius:20我們通過一個工廠來動態創建Circle對象，將實例進行保存，保存的位置稱之為享元池。第二次創建時，直接使用已有的結果。節約了系統資源
享元模式總結：
優點：
* 大大減少對象的創建，降低系統內存使用，使效率提高。
* 享元模式外部狀態獨立，不會影響其內部狀態，使得享元對象可以在不同環境被共享。
缺點：
* 提高了系統復雜度，且需要相同的屬性，否則會造成系統混亂
適用場景：
* 一個系統有大量相同或相似的對象，造成內存大量耗費。
* 對象大部分狀態都可以外部化
* 在使用享元模式時需要維護一個存儲享元對象的享元池，而這需要耗費一定的系統資源。因此使用時要衡量。
看完上述內容，是不是對如何使用javascript中的享元模式有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
