js 面向对象设计--享元模式

最新推荐文章于 2024-08-06 11:16:38 发布

weixin_42975115

最新推荐文章于 2024-08-06 11:16:38 发布

阅读量164

点赞数

分类专栏： js 面向对象设计模式

本文链接：https://blog.csdn.net/weixin_42975115/article/details/90671570

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

面向对象

24 篇文章 0 订阅

订阅专栏

设计模式

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>享元模式</title>
</head>
<body>
<div id="container">

</div>
<p id="next_page">下一页</p>
<!--享元模式-->
<script>
    let Flyweight = function () {
        //已创建元素
        let created =[];
        let create = function () {
            //创建新闻包装模式
            let dom = document.createElement('div');
            //将容器插入到新闻列表中
            document.getElementById('container').appendChild(dom);
            //缓存新创建的元素
            created.push(dom);
            return dom;
        }
        return {
            //构造函数
            getDiv:function () {
                if (created.length<5){
                    return create();
                } else {
                    //获取创建素组的第一个
                    let div = created.shift();
                    created.push(div);
                    return div;
                }
            }
        }
    }();
    let ariticle = [1,2,3,4,5,6,7,8,9];
    let page = 0,num=5,len =ariticle.length;
    for (let i=0;i<5;i++){
        if(ariticle[i]){
            Flyweight.getDiv().innerHTML = ariticle[i];
        }
    }
    document.getElementById('next_page').onclick=function () {
        if (ariticle.length<5)
            return;
        let n = ++page * num % len,//第一条信息
        j = 0;
        console.log(n);
        for(;j<5;j++){
            if(ariticle[n+j]){
                Flyweight.getDiv().innerHTML = ariticle[n+j];
            }else if(ariticle[n+j-len]){
                Flyweight.getDiv().innerHTML = ariticle[n+j-len];
            }else{
                Flyweight.getDiv().innerHTML ="";
            }
        }
    }

</script>
</body>
</html>