javascript - 享元模式

享元模式笔记
  运用共享技术有效的支持大量的细粒度对象，避免对象间拥有相同内容造成多余的开销
  享元模式主要还是对其数据、方法共享分离，它将数据和方法分成内部数据、内部方法和外部数据、外部方法。
  内部方法与内部数据指的是相似或者共有的数据和方法，所以将这部分提取出来减少开销，以提高性能。
  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条）