《JavaScript设计模式》笔记 之 享元模式

享元模式

享元模式：运用共享的技术有效地支持大量的细颗粒度的对象，避免对象间拥有多余的开销。

翻页需求

有个按钮点击显示下一页内容。一页有五条数据。

version 1.0

 var dom = null,
   pager = 0,
   num = 5,
   len = articles.length;
 for (var i = 0; i < len; i++) {
   dom = document.createElement('div')
   dom.innerHTML = articles[i];
   if (i >= num) {
     dom.style.display = 'none'
   }
   document.getElementsById('container').appendChild(dom)
 }
 // 下一页绑定事件
 document.getElementsById('next_page').onclick = function () {
   var div = document.getElementsByTagName('div');
   var j = k = n = 0;
   n = ++pager % Math.ceil(len / num) * num;
   for (var j = 0; j < len; j++) {
     div[j].style.display = 'none'
   };
   for (var k = 0; k < 5; k++) {
     if (div[n + k]) {
       div[n + k].style.display = 'block'
     }
   }
 }

总的来说，就是先把页面所有数据先渲染出来，追加到容器里，再全部隐藏。点击下一页按钮，指定的五条信息显示。

缺点

如果数目太多，几百条，同时都要插入页面还要做显示隐藏操作，会影响浏览器性能，而且其实新闻结构都差不都只是内容不一样。享元模式主要对数据、方法共享分离。

享元模式

version 2.0

 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 pager = 0,
   num = 5,
   len = articles.length;
 for (var i = 0; i < 5; i++) {
   if (article[i]) {
     Flyweight.getDiv().innerHTML = articles[i];
   }
 }


 // 下一页绑定事件
 document.getElementsById('next_page').onclick = function () {
   if (article.length < 5)
     return;
   var n = ++pager * num % len;// 下一页之后起始下标
   for (var j = 0; j < 5; 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 = ""
     }
   };
 }

将新建div子元素追加容器里封装一个方法。而且每次操作只操作当前页的五条数据。再加上相对之前操作dom少，性能也就提升了。