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条）