享元模式笔记
  运用共享技术有效的支持大量的细粒度对象,避免对象间拥有相同内容造成多余的开销
  享元模式主要还是对其数据、方法共享分离,它将数据和方法分成内部数据、内部方法和外部数据、外部方法。
  内部方法与内部数据指的是相似或者共有的数据和方法,所以将这部分提取出来减少开销,以提高性能。
  demo实例 实现翻页需求: 测试数据用一个数据数组。享元对象

//创建div元素的方法,只创建规定div元素对象,并对div元素对象共享

                 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(){
if(created.length < 5){
return create();
}else{
var div = created.shift();//数组第一个元素删除,并返回第一个元素的值
created.push(div);
return div;
}
}
} }

测试数据

             var article = ["这是第一条新闻","这是第二条新闻","这是第三条新闻","这是第四条新闻","这是第五条新闻","这是第六条新闻","这是第七条新闻",
"这是第八条新闻","这是第九条新闻","这是第十条新闻","这是第十一条新闻","这是第十二条新闻","这是第十三条新闻"];

初始化,首页展示数据

             var pager = 0,num = 5,len = article.length;
for(var i = 0;i < 5;i++){
if(article[i]){
FlyWeight().getDiv().innerHTML = article[i];
}
}

下一页点击绑定事件方法插入div元素和数据

           document.getElementById("next_page").onclick = function(){

                if(article.length < num) return;
var n=++pager*num%len,j=0;
for(;j<num;j++){
if(article[n+j]){
FlyWeight().getDiv().innerHTML = article[n+j];
}else if(article[n+j-len]){
FlyWeight().getDiv().innerHTML = article[n+j-len];
}else{
FlyWeight().getDiv().innerHTML = '';
}
} }

浏览器显示效果(前端样式自己编写)

点击下一页后(每点击一次插入5条)

javascript - 享元模式的更多相关文章

  1. 轻松掌握:JavaScript享元模式

    享元模式 在JavaScript中,浏览器特别是移动端的浏览器分配的内存很有限,如何节省内存就成了一件非常有意义的事情.节省内存的一个有效方法是减少对象的数量. 享元模式(Flyweight),运行共 ...

  2. JavaScript享元模式

    通过两个例子的对比来凸显享元模式的特点:享元模式是一个为了提高性能(空间复杂度)的设计模式,享元模式可以避免大量非常相似类的开销. 第一实例,没有使用享元模式,计算所花费的时间和空间使用程度. 要求为 ...

  3. javascript 享元模式 flyweight

    * 适应条件 ** 一个程序中使用了大量的相似对象 造成大的内存开销 ** 对象的大多数状态都可以变为外部状态 ** 剥离出对象的外部状态之后, 可以使用相对较少的共享对象取代大量对象 * 上传文件的 ...

  4. [设计模式] javascript 之 享元模式;

    享元模式说明 定义:用于解决一个系统大量细粒度对象的共享问题: 关健词:分离跟共享: 说明: 享元模式分单纯(共享)享元模式,以及组合(不共享)享元模式,有共享跟不共享之分:单纯享元模式,只包含共享的 ...

  5. javascript设计模式学习之十二——享元模式

    一.享元模式的定义及使用场景 享元模式是为了解决性能问题而诞生的设计模式,这和大部分设计模式为了提高程序复用性的原因不太一样,如果系统中因为创建了大量类似对象而导致内存占用过高,享元模式就非常有用了. ...

  6. 读书笔记之 - javascript 设计模式 - 享元模式

    本章探讨另一种优化模式-享元模式,它最适合于解决因创建大量类似对象而累及性能的问题.这种模式在javascript中尤其有用,因为复杂的javascript代码很快就会用光浏览器的所有可用内存,通过把 ...

  7. 《JavaScript设计模式与开发实践》读书笔记之享元模式

    1. 享元模式 享元模式是一种用于性能优化的模式,享元模式的核心是运用共享技术来有效支持大量细粒度的对象 1.1 传统的文件上传方法 以文件上传为例,文件上传功能可以选择依照队列,一个一个的排队上传, ...

  8. javascript设计模式——享元模式

    前面的话 享元(flyweight)模式是一种用于性能优化的模式,“fly”在这里是苍蝇的意思,意为蝇量级.享元模式的核心是运用共享技术来有效支持大量细粒度的对象.如果系统中因为创建了大量类似的对象而 ...

  9. JavaScript设计模式(9)-享元模式

    享元模式 1. 介绍 一种优化模式 适合解决因创建大量类似对象而累积性能问题 javaScript 代码可能很快就用光浏览器的内容,通过把大量独立对象转化为少量共享对象,可以降低运行 Web 应用所需 ...

随机推荐

  1. IE里面的一些BUG记录

    网上已经有很多类似的记录了,这里写这个是给自己在项目中碰到的问题做个简单的记录,以后将持续更新 1.IE67 border-bottom失效      一个a标签,想要使用移上去后会在下面显示一个横条 ...

  2. C语言 第二章 数据类型、变量和输入函数

    一.数据类型简介 在 C 语言中,数据类型指的是用于声明不同类型的变量或函数的一个广泛的系统.变量的类型决定了变量存储占用的空间,以及如何解释存储的位模式. 类型转换: 类型 存储大小 值范围 cha ...

  3. 算法:KMP算法

    算法:KMP排序 算法分析 KMP算法是一种快速的模式匹配算法.KMP是三位大师:D.E.Knuth.J.H.Morris和V.R.Pratt同时发现的,所以取首字母组成KMP. 少部分图片来自孤~影 ...

  4. 你想不到的!CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...

  5. GitHub托管BootStrap资源汇总(持续更新中…)

    Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...

  6. 《C#并发编程经典实例》笔记

    1.前言 2.开宗明义 3.开发原则和要点 (1)并发编程概述 (2)异步编程基础 (3)并行开发的基础 (4)测试技巧 (5)集合 (6)函数式OOP (7)同步 1.前言 最近趁着项目的一段平稳期 ...

  7. iOS的一些面试题分析总结(1)

    本篇主要说一下多线程的东西,因为东西比较多,所以直接拿出一整个篇幅来说它了. 3. 多线程的底层实现? 1.先说一下什么是进程,什么是线程.什么是多线程. 进程是资源分配的单位,线程是调度运行的基本单 ...

  8. 7.8 数据注解特性--Column

    Column特性可以用到类的属性中,Code-First默认的约定是使用属性名称作为列名.这个Column特性可以打破这个特性. 看下面的代码: using System; using System. ...

  9. DELPHI实现关闭指定进程,自身防杀

    偶然翻到很久以前用DELPHI写的一个小程序,实现功能是在后台默默关闭符合条件的进程,并隐藏自身.编写目的是为了防止办公电脑运行游戏. 实现原理是: 1.程序运行后将自身以不同的名称一式三份存到系统各 ...

  10. 让服务器iis支持.apk文件下载的设置方法

    随着智能手机的普及,越来越多的人使用手机上网,很多网站也应手机上网的需要推出了网站客户端,.apk文件就是安卓(Android)的应用程序后缀名,默认情况下,使用IIS作为Web服务器的无法下载此文件 ...