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 相关文章推荐
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
js倒计时抢购实例
Dec 20 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
javscript 数组扁平化的实现
Feb 03 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 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
python相似模块用例
2016/03/04 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python 函数基础知识汇总
2018/03/09 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
公司人力资源的自我评价
2014/01/02 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
创业计划书之冷饮店
2019/09/27 职场文书