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

所属分类: 网络编程 / JavaScript 阅读数: 146
收藏 0 赞 0 分享

本文实例讲述了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程序设计有所帮助。

更多精彩内容其他人还在看

详解js 创建对象的几种方法

这篇文章主要介绍了js 创建对象的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解小程序循环require之坑

这篇文章主要介绍了详解小程序循环require之坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

利用angular自动编译andriod APK的绕坑经历分享

这篇文章主要给大家介绍了关于如何利用angular自动编译andriod APK的绕坑经历,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

详解JavaScript函数callee、call、apply的区别

这篇文章主要介绍了JavaScript函数callee、call、apply的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

小程序测试后台服务的方法(ngrok)

这篇文章主要介绍了小程序测试后台服务的方法(ngrok),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Angular使用ControlValueAccessor创建自定义表单控件

这篇文章主要介绍了Angular使用ControlValueAccessor创建自定义表单控件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解JavaScript 的变量

这篇文章主要JavaScript 的变量,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

JavaScript实现预览本地上传图片功能完整示例

这篇文章主要介绍了JavaScript实现预览本地上传图片功能,结合完整实例形式分析了javascript图片预览相关的格式正则验证、浏览器判断、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

JS事件绑定的常用方式实例总结

这篇文章主要介绍了JS事件绑定的常用方式,结合实例形式总结分析了javascript三种常见的事件绑定原理与操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

NodeJS实现同步的方法

今天小编就为大家分享一篇关于NodeJS实现同步的方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
收藏 0 赞 0 分享
查看更多