js设计模式之结构型享元模式详解

运用共享技术有效地支持大量的细粒度的对象，避免对象间拥有相同内容造成多余的开销。
享元模式主要是对其数据、方法共享分离，将数据和方法分成内部数据、内部方法和外部数据、外部方法。内部方法与内部数据指的是相似或共有的数据和方法，所以将其提取出来减少开销。

var Flyweight = function() {
 // 已创建的元素
 var created = [];
 // 创建一个新闻包装容器
 function create() {
  var dom = document.createElement('div');
  // 将容器插入新闻列表容器中
  document.getElementById('container').appendChild(dom);
  // 缓存新创建的元素
  created.push(dom);
  // 返回创建的新元素
  return dom;
 }
 return {
  // 获取创建新闻元素方法
  getDiv: function() {
   // 如果已创建的元素小于当前页元素总个数(5个)，则创建
   if(created.length < 5) {
    return created();
   } else {
    // 获取第一个元素，并插入去后面
    var div = created.shift();
    created.push(div);
    return div;
   }
  }
 }
}

上面创建一个享元类，由于每页只能显示5条新闻，所以创建5个元素，保存在享元类内部，可以通过getDiv方法来获取创建的元素。下面就要实现外部数据和外部方法，外部数据就是我们要显示的所有新闻内容，由于每个内容都不一样肯定不能共享。

var paper = 0,
  num = 5,
  len = article.length;
// 添加五条新闻
for(var i = 0; i < 5; i++) {
 if(article[i])
 // 通过享元类获取创建的元素并写入新闻内容
 Flyweight.getDiv().innerHTML = article[i];
}

// 下一页按钮绑定事件
document.getElementById('next_page').onclick = function() {
 // 如果新闻内容不足5条则返回
 if(article.length < 5) {
  return;
 }
 var n = ++paper * num % len, // 获取当前页的第一条新闻索引
   j = 0;
 // 插入5条新闻
 for(; j < 5; j++) {
  // 如果存在n+j条则插入
  if(article[n + j]) {
   Flyweight.getDiv().innerHTML = article[n + j];
  // 否则插入起始位置第n+j-len条
  } else if(article[n + j - len]) {
   Flyweight.getDiv().innerHTML = article[n + j - len];
  } else {
   Flyweight.getDiv().innerHTML = "";
  }
 }
}

这样用享元模式对页面重构之后每次操作只需要操作5个元素，这样性能可以提高很多。
享元模式的应用是为了提高程序的执行效率与系统性能，因此在大型系统开发中应用比较广泛，可以避免程序中的数据重复。应用时一定要找准内部状态与外部状态，这样才能更合理地提取分离。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 轻松掌握JavaScript享元模式

    在JavaScript中,浏览器特别是移动端的浏览器分配的内存很有限,如何节省内存就成了一件非常有意义的事情.节省内存的一个有效方法是减少对象的数量. 享元模式(Flyweight),运行共享技术有效地支持大量细粒度的对象,避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类(元类). 享元模式可以避免大量非常相似类的开销,在程序设计中,有时需要生产大量细粒度的类实例来表示数据,如果能发现这些实例除了几个参数以外,开销基本相同的话,就可以大幅度较少需要实例化的类的数量.如果能把那些参

  • 总结JavaScript设计模式编程中的享元模式使用

    享元模式不同于一般的设计模式,它主要用来优化程序的性能,它最适合解决大量类似的对象而产生的性能问题.享元模式通过分析应用程序的对象,将其解析为内在数据和外在数据,减少对象的数量,从而提高应用程序的性能. 基本知识 享元模式通过共享大量的细粒度的对象,减少对象的数量,从而减少对象的内存,提高应用程序的性能.其基本思想就是分解现有类似对象的组成,将其展开为可以共享的内在数据和不可共享的外在数据,我们称内在数据的对象为享元对象.通常还需要一个工厂类来维护内在数据. 在JS中,享元模式主要有下面几个角色

  • 学习JavaScript设计模式之享元模式

    一.定义 享元(flyweight)模式是一种用于性能优化的模式,核心是运用共享技术来有效支持大量细刻度的对象. 在JavaScript中,浏览器特别是移动端的浏览器分配的内存并不算多,如何节省内存就成了一个非常有意义的事情. 享元模式是一种用时间换空间的优化模式 内衣工厂有100种男士内衣.100中女士内衣,要求给每种内衣拍照.如果不使用享元模式则需要200个塑料模特:使用享元模式,只需要男女各1个模特. 二.什么场景下使用享元模式? (1)程序中使用大量的相似对象,造成很大的内存开销 (2)

  • JS实现简单的图书馆享元模式实例

    本文实例讲述了JS实现简单的图书馆享元模式.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <title>享员模式</title> </head> <body> <script> /* *flyweight 享员模式 */ //例子是一个图书馆存书借书 ->_-> var Book = function(id, title, author, genre,

  • 深入理解JavaScript系列（37）：设计模式之享元模式详解

    介绍 享元模式(Flyweight),运行共享技术有效地支持大量细粒度的对象,避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类(元类). 享元模式可以避免大量非常相似类的开销,在程序设计中,有时需要生产大量细粒度的类实例来表示数据,如果能发现这些实例除了几个参数以外,开销基本相同的 话,就可以大幅度较少需要实例化的类的数量.如果能把那些参数移动到类实例的外面,在方法调用的时候将他们传递进来,就可以通过共享大幅度第减少单个实例 的数目. 那么如果在JavaScript中应用享元模式

  • js设计模式之结构型享元模式详解

    运用共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销. 享元模式主要是对其数据.方法共享分离,将数据和方法分成内部数据.内部方法和外部数据.外部方法.内部方法与内部数据指的是相似或共有的数据和方法,所以将其提取出来减少开销. var Flyweight = function() { // 已创建的元素 var created = []; // 创建一个新闻包装容器 function create() { var dom = document.createElement(

  • Python设计模式结构型享元模式

    Python设计模式结构型享元模式

    目录 一.享元模式 二.应用场景 三.代码示例 一.享元模式 享元,可理解为 Python 中的元类.最小粒度的类,系统中存在大量的相似对象时,可以选择享元模式提高资源利用率. 享元具有两种状态: 内蕴状态:存储在享元内部,不会随环境的改变而有所不同,是可以共享的.外蕴状态:是不可以共享的,它随环境的改变而改变的,因此外蕴状态是由客户端来保持(因为环境的变化是由客户端引起的). 二.应用场景 如果一个应用程序使用了大量的对象,而这些对象造成了很大的存储开销的时候就可以考虑是否可以使用享元模式.

  • C++享元模式详解

    C++享元模式详解

    目录 总结 #include <iostream> #include <list> #include <map> using namespace std; enum class EnumColor //棋子类型 { Black, //黑 White //白 }; struct Position //棋子位置 { int m_x; int m_y; Position(int tmpx, int tmpy) :m_x(tmpx), m_y(tmpy) {} //构造函数 }

  • 详解iOS App设计模式开发中对于享元模式的运用

    享元模式的概念 在面向对象软件设计中,利用公共对象不仅能节省资源还能提高性能.共享的对象只能提供某些内在的信息,而不能用来识别对象.专门用于设计可共享对象的一种设计模式叫做享元模式(Flyweight pattern). 实现享元模式需要两个关键组件,通常是可共享的享元对象和保存他们的池.某种中央对象维护这个池,并从它返回适当的实例. 运用共享技术有效地支持大量细粒度的对象. 公共交通(如公共汽车)已有一百多年的历史了.大量去往相同方向的乘客可以分担保有和经营车辆(如公共汽车)的费用.公共汽车有

  • C++设计模式编程之Flyweight享元模式结构详解

    C++设计模式编程之Flyweight享元模式结构详解

    由遇到的问题引出享元模式: 在面向对象系统的设计何实现中,创建对象是最为常见的操作.这里面就有一个问题:如果一个应用程序使用了太多的对象,就会造成很大的存储开销.特别是对于大量轻量级(细粒度)的对象,比如在文档编辑器的设计过程中,我们如果为没有字母创建一个对象的话,系统可能会因为大量的对象而造成存储开销的浪费.例如一个字母"a"在文档中出现了100000 次,而实际上我们可以让这一万个字母"a"共享一个对象,当然因为在不同的位置可能字母"a"有不

  • JavaScript设计模式之观察者模式与发布订阅模式详解

    本文实例讲述了JavaScript设计模式之观察者模式与发布订阅模式.分享给大家供大家参考,具体如下: 学习了一段时间设计模式,当学到观察者模式和发布订阅模式的时候遇到了很大的问题,这两个模式有点类似,有点傻傻分不清楚,博客起因如此,开始对观察者和发布订阅开始了Google之旅.对整个学习过程做一个简单的记录. 观察者模式 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知它的依赖对象.观察者模式属于行为型模式.在观察模式中共存

  • 23种设计模式（21）java享元模式

    23种设计模式（21）java享元模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述享元(Flyweight)模式的: Flyweight在拳击比赛中指最轻量级,即"蝇量级"或"雨量级",这里选择使用"享元模式"的意译,是因为这样更能反映模式的用意.享元模式是对象的结构模式.享元模式以共享的方式高效地支持大量的细粒度对象. Java中的String类型 在JAVA语言中,String类型就是使用了享元模式.String对象是final类型,对象一旦创建就不可改变.在J

随机推荐