享元模式主要用来减少程序所需的对象个数. 有一个例子, 我们这边的前端同学几乎人手一本《JavaScript权威指南》. 从省钱的角度讲, 大约三本就够了. 放在部门的书柜里, 谁需要看的时候就去拿, 看完了还回去. 如果同时有4个同学需要看, 此时再去多买一本.

在webqq里面, 打开QQ好友列表往下拉的时候,会为每个好友创建一个div( 如果算上div中的子节点, 还远不只1个元素 ).

如果有1000个QQ好友, 意味着如果从头拉到尾, 会创建1000个div, 这时候有些浏览器也许已经假死了. 这还只是一个随便翻翻好友列表的操作.

所以我们想到了一种解决办法, 当滚动条滚动的时候, 把已经消失在视线外的div都删除掉. 这样页面可以保持只有一定数量的节点. 问题是这样频繁的添加与删除节点, 也会造成很大的性能开销, 而且这种感觉很不对味.

现在享元模式可以登场了. 顾名思义, 享元模式可以提供一些共享的对象以便重复利用. 仔细看下上图, 其实我们一共只需要10个div来显示好友信息,也就是出现在用户视线中的10个div.这10个div就可以写成享元.

伪代码如下.

var getDiv = (function(){
var created = [];
var create = function(){
return document.body.appendChild( document.createElement( 'div' ) );
}
var get = function(){
if ( created.length ){
return created.shift();
}else{
return create();
}
}
/* 一个假设的事件,用来监听刚消失在视线外的div,实际上可以通过监听滚 动条位置来实现 */
userInfoContainer.disappear(function( div ){
created.push( div );
})
})()
var div = getDiv();
div.innerHTML = "${userinfo}";

原理其实很简单, 把刚隐藏起来的div放到一个数组中, 当需要div的时候, 先从该数组中取, 如果数组中已经没有了, 再重新创建一个. 这个数组里的div就是享元, 它们每一个都可以当作任何用户信息的载体.

当然这只是个示例,实际的情况要复杂一些, 比如快速拖动的时候, 我们可能还得为节点设置一个缓冲区.

JS常用的设计模式(16)—— 享元模式的更多相关文章

  1. 再起航,我的学习笔记之JavaScript设计模式16(享元模式)

    ### 享元模式 **享元模式(Flyweight):** 运用共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销. 上回我们在组合模式中创建了文章列表类,这次我们要向不同的文 ...

  2. python设计模式之享元模式

    python设计模式之享元模式 由于对象创建的开销,面向对象的系统可能会面临性能问题.性能问题通常在资源受限的嵌入式系统中出现,比如智能手机和平板电脑.大型复杂系统中也可能会出现同样的问题,因为要在其 ...

  3. 设计模式:享元模式(Flyweight)

    定   义:运用共享技术有效地支持大量细粒度的对象. 结构图: 内部状态:在享元对象内部并且不会随环境而改变的共享部分. 外部状态:随环境改变而改变的.不可共享的状态. Flyweight类,具体享元 ...

  4. 乐在其中设计模式(C#) - 享元模式(Flyweight Pattern)

    原文:乐在其中设计模式(C#) - 享元模式(Flyweight Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 享元模式(Flyweight Pattern) 作者:weba ...

  5. Java设计模式15:常用设计模式之享元模式(结构型模式)

    1. Java之享元模式(Flyweight Pattern) (1)概述:       享元模式是对象池的一种实现,英文名为"Flyweight",代表轻量级的意思.享元模式用来 ...

  6. 设计模式之享元模式(Flyweight)摘录

    23种GOF设计模式一般分为三大类:创建型模式.结构型模式.行为模式. 创建型模式抽象了实例化过程,它们帮助一个系统独立于怎样创建.组合和表示它的那些对象.一个类创建型模式使用继承改变被实例化的类,而 ...

  7. Java进阶篇设计模式之七 ----- 享元模式和代理模式

    前言 在上一篇中我们学习了结构型模式的组合模式和过滤器模式.本篇则来学习下结构型模式最后的两个模式, 享元模式和代理模式. 享元模式 简介 享元模式主要用于减少创建对象的数量,以减少内存占用和提高性能 ...

  8. Java设计模式之七 ----- 享元模式和代理模式

    前言 在上一篇中我们学习了结构型模式的组合模式和过滤器模式.本篇则来学习下结构型模式最后的两个模式, 享元模式和代理模式. 享元模式 简介 享元模式主要用于减少创建对象的数量,以减少内存占用和提高性能 ...

  9. 【设计模式】享元模式(Flyweight)

    摘要: 1.本文将详细介绍享元模式的原理和实际代码中特别是Android系统代码中的应用. 纲要: 1. 引入享元模式 2. 享元模式的概念及优缺点介绍 3. 享元模式在Android源码中的应用 1 ...

随机推荐

  1. Form_Form Builder编译fmb/library/menu方式总结(汇总)

    2014-12-27 Created By BaoXinjian

  2. SPOJ 694. Distinct Substrings (后缀数组不相同的子串的个数)转

    694. Distinct Substrings Problem code: DISUBSTR   Given a string, we need to find the total number o ...

  3. CF 15/09/23

    CF580A 给出一个数列,求最长不下降子序列(连续) 直接DP,O(n) CF580B 主人公有n个朋友,每一个朋友有2个属性:m,sat 现在他想邀请部分朋友,邀请的人满足MAX_M-MIN_M& ...

  4. ubuntu 修该rm命令使删除文件到回收站

    ubuntu下删除文件到回收站 相信有不少同学和我一样,有因习惯了rm命令,好几次一不小心冲动就删除重要文件的惨痛经历! 目标:将删除成功的文件会放入系统回收站中,位置:~/.local/share/ ...

  5. oracle客户端精简绿色版-环境变量配置

    大型项目开发中,常用的数据库,当属Oracle.但Oracle 客户端安装就要一张光盘,体积很大.而且安装后,基本上就用2个功能:TNS配置服务名,SqlPlus.在开发过程中,大量使用Toad和PL ...

  6. SQLite打开提示database disk image is malformed

    SQLite打开提示database disk image is malformed 网上说产生这种错误的原因有很多种,磁盘空间不足,还有就是写入数据过程中突然掉电等. 这种情况,如果数据还可以导出, ...

  7. JavaFX Application应用实例

    下面代码演示的是JavaFX进程命令行参数的实例.大家可以参阅一下. /*原文地址:http://www.manongjc.com/article/134.html */ import java.ut ...

  8. iOS UIButton 设置图片文字垂直排列

    后面经过测试,如果button的文字长度变更,会导致图片位置变化,经过多次修改UIEdgeInsets的值也没有达到期望效果,最终采用集成UIButton类,重写layoutSubviews函数实现, ...

  9. c/c++笔记

    string 若要根据字典序比较string类型的大小,只需要用><=就可以啦 例如: string s1="abcz"; string s2="abcd&q ...

  10. 剑指Offer:面试题4——替换空格(java实现)

    问题描述:请实现一个函数,把字符串中的每个空格替换成"%20". 例如: 输入:"We are happy." 输出:"We%20are%20happ ...