JavaScript 享元模式详解：原理、代码示例与优化技巧

享元模式概述

本文详细解析 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 代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码的运行效果。

更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题：《javascript 面向对象入门教程》、《JavaScript 错误与调试技巧总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》及《JavaScript 数学运算用法总结》。

希望本文所述的关于 JavaScript 程序设计的分析对大家有所帮助。

JavaScript 设计模式：享元模式原理与实现

享元模式概述

场景示例与对比

模式总结与适用场景

实用工具推荐