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

更新时间：2020年04月08日 10:59:19 作者：Weiseditor

这篇文章主要介绍了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

JS函数验证总结(方便js客户端输入验证)
JS函数验证总结，都是一些基础的东西，现在比较流行jquery了，不过这些东西仍然需要大家会。
2010-10-10
JavaScript数组去重的3种方法和代码实例
这篇文章主要介绍了JavaScript数组去重的3种方法和代码实例,本文直接给出实例代码,需要的朋友可以参考下
2015-07-07
微信小程序实现顶部普通选项卡效果(非swiper)
这篇文章主要为大家详细介绍了微信小程序实现顶部普通选项卡效果，非swiper，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
JavaScript实现鼠标移入随机变换颜色
这篇文章主要给大家介绍了关于JavaScript实现鼠标移入随机变换颜色的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
Js数组扁平化实现方法代码总汇
这篇文章主要介绍了Js数组扁平化实现方法代码总汇,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
JS判断数组中是否有重复值得三种实用方法
数组中是否有重复值的判断方法有很多，本文为大家推荐下比较实用的3种方法，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08
JavaScript检测原始值、引用值、属性
这篇文章主要介绍了JavaScript检测原始值、引用值、属性的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
js使用visibilitychange处理页面关闭事件
本文主要介绍了js使用visibilitychange处理页面关闭事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
javascript不可用的问题探究
在Twitter上的一些有趣的讨论中, 我发现人们对于Web应用和站点对javascript的依赖普遍存在一种疑惑. 这种疑惑一直都存在, 而对我而言, 这个问题随着浏览技术的飞跃发展而集中爆发了
2013-10-10
JavaScipt验证URL新方法详解(2023 年版)
这篇文章主要为大家介绍了JavaScipt验证URL新方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-12-12