javascript 设计模式之享元模式原理与应用详解


Posted in Javascript onApril 08, 2020

本文实例讲述了javascript 设计模式之享元模式。分享给大家供大家参考,具体如下:

享元模式说明

定义:用于解决一个系统大量细粒度对象的共享问题:

关健词:分离跟共享;

说明: 享元模式分单纯(共享)享元模式,以及组合(不共享)享元模式,有共享跟不共享之分;单纯享元模式,只包含共享的状态,可共享状态是不可变,不可修改的,这是享元的内部状态;当然有外部状态就有外部状态,外部状态是可变的,不被共享,这个外部状态由客户端来管理,是可变化的;外部状态与内部状态是独立分开的,外部状态一般作为参数传入享元对象内,但不会影响内部状态的值;外部状态,一用用于获取共享的享元对象,或多或少与内部状态有点关联;比如从用户数据表中获取数据,传入一个外部变量用户名,再根据这个用户名,获取该用户所有对象状态信息;

组合享元模式,配置组合模式来使用,共享部分只做个叶子节点,而组合部分是不必共享的,因为共组部分的子叶节点元素已经被缓存,组合部分相当一个分组分类的作用;

享元模式一般会与工厂模式相结合使用,用于管理缓存的创建跟维护,享元共享元素的创建一般在工厂类里创建;

享元模式主要用于对象的共享,使具有相似对象,或对象间具有太多相似细粒度的状态,能共享已经创建的对象,减少对象的创建,减少对内存的占用,提升优化性能;

一种场景:

javascript 设计模式之享元模式原理与应用详解

享元模式结构图:

javascript 设计模式之享元模式原理与应用详解

像第一张的情况,就可以使用享元模式,因为后两排的状态组合,可能在实体对应中,多次存在,这时就可以使用享元的共享特性,来减少对象的创建,如有相同的状态或组合,就可以获取缓存的状态,减少对象重复创建,减少内存占用;

实例场景:

1>. 系统各种角色权限分配;

2>. 系统出现很多种状态,或组合状态需要对应的,而且这种对应,可以发生很多种其他类型对象上面的,就可以使用享元模式;

实例源码: 单纯(共享)享元

1. 自定义的 JavaScript Hashtable:

function Hashtable() {
  this.values = [];
}

Hashtable.prototype.getJson = function() {
return this.values;
}

Hashtable.prototype.add = function(key, value) {
  if (!this.contain(key)) {
    this.values.push({key:key, value:value});
  }
}

Hashtable.prototype.contain = function(key) {
  for (idx in this.values) {
    var json = this.values[idx];
    if (json.key == key) {
      return true;
    }
  }
  return false;
}

Hashtable.prototype.get = function(key) {
  var result;
  for (idx in this.values) {
    var json = this.values[idx];
    if (json.key == key) {
      result = json;
      break;
    }
  }
  return result;
}

Hashtable.prototype.delete = function(key) {
  for (idx in this.values) {
    var json = this.values[idx];
    if (json.key == key) {
      delete this.values[idx];
      break;
    }
  }
}

Hashtable.prototype.set = function(key, value) {
  if (this.contain(key)) {
    this.delete(key);
    this.values.push({key:key,value:value});
  }
}

2. 享元方法:

function Flyweight(one) {
  this.stateOne = one;
}

Flyweight.prototype.operate = function(){
 var date = new Date();
  console.log(this.stateOne + '-' + Math.random());
};

这里可以处理传进来的参数的一些逻辑,也可以初始化从数据库里提取数据缓存保存;

3. 享元工厂:

function FlyweightFactory(){
  var hash = new Hashtable();
}

FlyweightFactory.prototype.getFlyweight = function(state) {
  var flyweight;
  if (hash.contain(state)) {
    flyweight = hash.get(state);
  } else {
    flyweight = new Flyweight(state);
    hash.add(state, flyweight);
  }
  return flyweight;
}

4. Client 使用:

//Client

var factory = new FlyweightFactory();
var fly1, fly2, fly3;

fly1 = factory.getFlyweight('AABB');
fly2 = factory.getFlyweight('CCDD');
fly3 = factory.getFlyweight('CCDD');

fly1.operate();
fly2.operate();
fly3.operate();

输出:

AABB-0.8621504916809499

CCDD-0.7498800195753574

CCDD-0.7498800195753574

复合享元模式

1. 复合享元

function UnShareFlyweight() {
  this.state = '';
  this.hash = new Hashtable();
}

UnShareFlyweight.prototype.add = function(key, flyweight) {
  this.hash.add(key, flyweight);
}

UnShareFlyweight.prototype.operate = function(state) {
  var flag = false;
 /*
  for (idx in this.hash) {
    var fly = this.list[idx];
    if (fly.stateOne == state) {
      flag = true;



 break;
    }
  }
 
*/



 flag = this.hash.contain(state);
  flag ? console.log('Exists') : console.log('Not Exists');
}

2. 在修改添加在享元工厂的组合方法:

function FlyweightFactory(){
  var hash = new Hashtable();
}

FlyweightFactory.prototype.getFlyweight = function(state) {
  var flyweight;
  if (hash.contain(state)) {
    flyweight = hash.get(state);
  } else {
    flyweight = new Flyweight(state);
    hash.add(state, flyweight);
  }
  return flyweight;
}

FlyweightFactory.prototype.getComposite = function(list) {
  var unFly = new UnShareFlyweight();
  var flyweight, state;
  for (idx in list) {
    state = list[idx];
    flyweight = this.getFlyweight(state);
    unFly.add(state, flyweight);
  }
}

FlyweightFactory.prototype.print = function() {
  var jsons = this.hash.getJson();
  for (json in jsons) {
    json.value.operate();
  }
}

3. Client 使用:

var states = ['AABB', 'CDCD', 'AABB', 'CCDD'];

var factory = new FlyweightFactory();
factory.getComposite(states);

factory.print();

输出:

AABB-0.8749617566354573

CDCD-0.6991151459515095

CCDD-0.9891050879377872

享元模式其他说明

总体来说,享元模式用于减少对象的重复创建,用于减少内存使用,提升性能的结构型模式:

它涉及三个模式:享元模式,工厂模式,组合模式;

对于处理多对多对应而产生的一些数据缓存存储,是一个不错的选择!

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
JScript中的"this"关键字使用方式补充材料
Mar 08 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
JS图片预加载插件详解
Jun 21 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 #Javascript
JS async 函数的含义和用法实例总结
Apr 08 #Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 #Javascript
JS co 函数库的含义和用法实例总结
Apr 08 #Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 #Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 #Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 #Javascript
You might like
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
es6学习之解构时应该注意的点
2017/08/29 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python中List.index()方法的使用教程
2015/05/20 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
python3将变量输入的简单实例
2020/08/19 Python
软件测试英文面试题
2012/10/14 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
会计实训报告范文
2014/11/04 职场文书
发布会邀请函
2015/01/31 职场文书
总经理岗位职责
2015/02/04 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
导游词之西递宏村
2019/12/10 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python