快捷導(dǎo)航

javascript設(shè)計模式 – 享元模式原理與用法實例分析

更新時間：2020年04月15日 08:39:05 作者：李小強

這篇文章主要介紹了javascript設(shè)計模式 – 享元模式,結(jié)合實例形式分析了javascript享元模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下

本文實例講述了javascript設(shè)計模式 – 享元模式原理與用法。分享給大家供大家參考，具體如下：

介紹：在我們?nèi)粘ｉ_發(fā)中需要創(chuàng)建很多對象，雖然垃圾回收機制能幫我們進行回收，但是在一些需要重復(fù)創(chuàng)建對象的場景下，就需要有一種機制來進行優(yōu)化，提高系統(tǒng)資源的利用率。

享元模式就是解決這類問題，主要目的是減少創(chuàng)建對象的數(shù)量。享元模式提倡重用現(xiàn)有同類對象，如未找到匹配的對象則創(chuàng)建新對象

定義：運用共享技術(shù)有效的支持大量細(xì)粒度對象的復(fù)用。系統(tǒng)只適用少量的對象，而這些對象都很相似，狀態(tài)變化很小，可以實現(xiàn)對象的多次復(fù)用。由于享元模式要求能夠共享的對象必須是細(xì)粒度的對象，因此他又稱為輕量級模式，是一種對象結(jié)構(gòu)型模式。

場景：我們以創(chuàng)建圓形對象為例，通過兩個例子來對比享元模式的效果。

示例：

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();
// 創(chuàng)建了一個對象
// 畫圓： 顏色：red x:10 y:10 radius:10
// 創(chuàng)建了一個對象
// 畫圓： 顏色：red x:1 y:1 radius:100
// 創(chuàng)建了一個對象
// 畫圓： 顏色：red x:5 y:5 radius:50
// 創(chuàng)建了一個對象
// 畫圓： 顏色：blue x:1 y:1 radius:50
// 創(chuàng)建了一個對象
// 畫圓： 顏色：blue x:12 y:12 radius:50
// 創(chuàng)建了一個對象
// 畫圓： 顏色：blue x:2 y:12 radius:20

這種情況下每次使用都需要實例化一次Circle對象，對系統(tǒng)資源來說是一種浪費。

觀察下不難發(fā)現(xiàn)，除了第一次需要實例化，其余的可以基于實例繼續(xù)修改。

我們修改下：

var Circle = function(color){
  console.log('創(chuàng)建了一個對象');
  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();
 
// 創(chuàng)建了一個對象
// 畫圓： 顏色：red x:10 y:10 radius:10
// 畫圓： 顏色：red x:1 y:1 radius:100
// 畫圓： 顏色：red x:5 y:5 radius:50
// 創(chuàng)建了一個對象
// 畫圓： 顏色：blue x:1 y:1 radius:50
// 畫圓： 顏色：blue x:12 y:12 radius:50
// 畫圓： 顏色：blue x:2 y:12 radius:20

我們通過一個工廠來動態(tài)創(chuàng)建Circle對象，將實例進行保存，保存的位置稱之為享元池。第二次創(chuàng)建時，直接使用已有的結(jié)果。節(jié)約了系統(tǒng)資源

享元模式總結(jié)：

優(yōu)點：
* 大大減少對象的創(chuàng)建，降低系統(tǒng)內(nèi)存使用，使效率提高。
* 享元模式外部狀態(tài)獨立，不會影響其內(nèi)部狀態(tài)，使得享元對象可以在不同環(huán)境被共享。

缺點：
* 提高了系統(tǒng)復(fù)雜度，且需要相同的屬性，否則會造成系統(tǒng)混亂

適用場景：
* 一個系統(tǒng)有大量相同或相似的對象，造成內(nèi)存大量耗費。
* 對象大部分狀態(tài)都可以外部化
* 在使用享元模式時需要維護一個存儲享元對象的享元池，而這需要耗費一定的系統(tǒng)資源。因此使用時要衡量。

感興趣的朋友可以使用在線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ù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: