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


Posted in Javascript onApril 15, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 左右悬浮对联广告代码示例
Dec 12 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
JavaScript实现一键复制内容剪贴板
Jul 23 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 #Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 #Javascript
vue-cli设置publicPath小记
Apr 14 #Javascript
vue 实现用户登录方式的切换功能
Apr 14 #Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 #Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 #Javascript
编写一个javascript元循环求值器的方法
Apr 14 #Javascript
You might like
教你php如何实现验证码
2016/01/20 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
python字典快速保存于读取的方法
2018/03/23 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
Python二元赋值实用技巧解析
2019/10/25 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
竞争上岗实施方案
2014/03/21 职场文书
护理见习报告范文
2014/11/03 职场文书
525心理健康活动总结
2015/05/08 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Python装饰器的练习题
2021/11/23 Python
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers