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

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个元素，这样性能可以提高很多。
享元模式的应用是为了提高程序的执行效率与系统性能，因此在大型系统开发中应用比较广泛，可以避免程序中的数据重复。应用时一定要找准内部状态与外部状态，这样才能更合理地提取分离。

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

# js  # 设计模式  # 结构型享元模式  # 结合ES6 编写 JavaScript 设计模式中的结构型模式  # 创建一个  # 都不  # 第一个  # 下一页  # 当前页  # 将其  # 每页  # 对其  # 可以通过  # 有效地  # 只需要  # 第一条  # 指的是  # 方法来  # 绑定  # 大家多多  # 找准  # 五条  # 重构  # 主要是 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  微信推文制作网站有哪些,怎么做微信推文，急？  如何在Tomcat中配置并部署网站项目？  如何快速上传建站程序避免常见错误？  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  详解MySQL数据库的安装与密码配置  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  Android GridView 滑动条设置一直显示状态(推荐)  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  手机软键盘弹出时影响布局的解决方法  php json中文编码为null的解决办法  如何在景安服务器上快速搭建个人网站？  如何快速完成中国万网建站详细流程？  Thinkphp 中 distinct 的用法解析  佛山网站制作系统,佛山企业变更地址网上办理步骤？  如何用wdcp快速搭建高效网站？  Laravel如何配置中间件Middleware_Laravel自定义中间件拦截请求与权限校验【步骤】  夸克浏览器网页跳转延迟怎么办 夸克浏览器跳转优化  微信小程序 闭包写法详细介绍  高端建站三要素：定制模板、企业官网与响应式设计优化  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  iOS正则表达式验证手机号、邮箱、身份证号等  Python图片处理进阶教程_Pillow滤镜与图像增强  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  node.js报错：Cannot find module 'ejs'的解决办法  如何在阿里云虚拟服务器快速搭建网站？  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  Android滚轮选择时间控件使用详解  如何生成腾讯云建站专用兑换码？  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  教学论文网站制作软件有哪些,写论文用什么软件 ？  如何用花生壳三步快速搭建专属网站？  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  如何在万网自助建站中设置域名及备案？  如何打造高效商业网站？建站目的决定转化率  如何基于云服务器快速搭建网站及云盘系统？  浅析上传头像示例及其注意事项  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  深入理解Android中的xmlns:tools属性  Laravel如何使用Eloquent进行子查询  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  微信小程序 配置文件详细介绍  UC浏览器如何切换小说阅读源_UC浏览器阅读源切换【方法】  Python函数文档自动校验_规范解析【教程】  Linux虚拟化技术教程_KVMQEMU虚拟机安装与调优  如何在阿里云域名上完成建站全流程？