首页 >> js开发 >> js代码javascript设计模式 – 享元模式原理与用法实例分析
js代码javascript设计模式 – 享元模式原理与用法实例分析
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了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
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
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./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结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
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
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./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
相关文章:
- js解决vue的touchStart事件及click事件冲突问题js大全
- jsvue项目中使用多选框的实例代码js大全
- js解决Echarts2竖直datazoom滑动后显示数据不全的问题js大全
- js解决echarts 一条柱状图显示两个值,类似进度条的问题js大全
- js解决echarts中横坐标值显示不全(自动隐藏)问题js大全
- js详解微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）js大全
- js解决Vue中的生命周期beforeDestory不触发的问题js大全
- jsvue中解决拖拽改变存在iframe的div大小时卡顿问题js大全
- jsvue中destroyed方法的使用说明js大全
- js在vue中created、mounted等方法使用小结js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
