js设计模式之结构型享元模式详解
时间:2019-04-01
本文章向大家介绍js设计模式之结构型享元模式详解,主要包括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个元素,这样性能可以提高很多。
享元模式的应用是为了提高程序的执行效率与系统性能,因此在大型系统开发中应用比较广泛,可以避免程序中的数据重复。应用时一定要找准内部状态与外部状态,这样才能更合理地提取分离。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 设计模式专题(二十) ——职责链模式
- 设计模式专题(二十一) ——中介者模式
- 设计模式专题(二十二) ——享元模式
- 设计模式专题(二十三) ——解释器模式
- Thinking in SQL系列之数据挖掘C4.5决策树算法
- 设计模式专题(二十四) ——访问者模式
- PHP实用功能——modern PHP读书笔记(一)
- ModernPHP读书笔记(二) ——PHP开发标准
- iBatis.Net(6):Data Map(深入)
- iBatis.Net(5):Data Map(了解)
- ModernPHP读书笔记(三)——PHP的良好实践
- PHP开发过程的那些坑(一) ——对象拷贝
- PHP开发过程的那些坑(二) ——PHP empty函数
- Thinking in SQL系列之数据挖掘Apriori关联分析再现啤酒尿布神话
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法