当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript设计模式 – 享元模式原理与用法实例分析

javascript设计模式 – 享元模式原理与用法实例分析

2020年05月12日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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对象，将实例进行保存，保存的位置称之为享元池。第二次创建时，直接使用已有的结果。节约了系统资源

享元模式总结：

优点：
* 大大减少对象的创建，降低系统内存使用，使效率提高。
* 享元模式外部状态独立，不会影响其内部状态，使得享元对象可以在不同环境被共享。

缺点：
* 提高了系统复杂度，且需要相同的属性，否则会造成系统混乱

适用场景：
* 一个系统有大量相同或相似的对象，造成内存大量耗费。
* 对象大部分状态都可以外部化
* 在使用享元模式时需要维护一个存储享元对象的享元池，而这需要耗费一定的系统资源。因此使用时要衡量。

感兴趣的朋友可以使用在线html/css/javascript代码运行工具：测试上述代码运行效果。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网