设计模式知识连载（25）---享元模式:

来源：互联网发布：java textarea 滚动条编辑：程序博客网时间：2024/06/05 00:08
<body><h3>设计模式知识连载（25）---享元模式:</h3><p>    运用共享技术有效地支持大量的细粒度的对象，避免对象间拥有相同内容造成多余的开销【优化用的】</p><hr> <div id = 'container'></div><div>    <span id = 'next_page'>下一页</span></div><script type="text/javascript">    /****    *   模拟数据    ****/    article = [        '01、中央经济工作会议举行 习近平李克强讲话',         '02、华春莹记者会上把熊猫"香香"误听为"杉山"',         '03、又一名朝鲜军人归顺韩国',         '04、美参众两院通过税改法案',         '05、普京2018总统竞选纲领:恢复世界主导地位',         '06、陈世峰这20年将怎么坐牢?',         '07、南昌大学"性侵门"副院长:她还深爱着我',         '08、法庭将为莫焕晶另行指定辩护人 嫌犯崩溃',         '09、保姆纵火案因管辖权异议中止审理',         '10、案件将延期审理 死者家属:不服',         '11、普通员工年终奖100万!这个炫耀帖是真的',         '12、哈尔滨居民楼藏"绝命毒师"',         '13、女子开车被撞后报警 却把自己送进监狱',         '14、富商在家被枪杀家产"失踪"',         '15、维和官兵南苏丹生死救援:子弹就在头顶嗖嗖乱飞',         '16、12759份受贿案裁判文书披露:过半受贿发生于工程',         '17、2017年39名“大老虎”获刑 创十八大以来之最',         '18、男子听说女老板月入巨款 趁着修POS机＂顺＂走百万',        '19、实拍寒冷冬夜席地而睡的农民工',         '20、墨西哥发生交通事故致20多人死伤 多名美国人遇难',         '21、太烧钱！摩拜、ofo被＂催婚＂ 双方均给出这个答复',         '22、土耳其呼吁联大认定美国耶路撒冷决定“无效”',         '23、土耳其呼吁联大认定美国耶路撒冷决定“无效”',         '24、沙特国王与特朗普通电话 探讨也门及伊朗问题',         '25、伊朗发生里氏5.2级地震 震中距离首都仅39公里',         '26、女子夜晚散步失联1周无消息 造谣其遭奸杀者被拘',         '27、男子伪装成功人士网聊大龄女性 一年诈骗上千万'    ] ;    /**    *   案例一：翻页需求，方式一：初始    */    // // 缓存创建的新闻标题元素    // var dom = null ;    // // 当前页数    // var paper = 0 ;    // // 每页显示新闻数目    // num = 5 ;    // // 创建新闻元素时保存变量    // var i = 0 ;    // // 新闻数据长度    // var len = article.length ;    // for(; i < len; i++) {    //  // 创建包装新闻标题元素    //  dom = document.createElement('div') ;    //  // 向元素中添加新闻标题    //  dom.innerHTML = article[i] ;    //  // 默认显示第一页    //  if(i >= num) {    //      // 超出第一页新闻隐藏    //      dom.style.display = 'none' ;    //  }    //  // 添加到页面中    //  document.getElementById('container').appendChild(dom) ;    // } ;    // // 下一页绑定事件    // document.getElementById('next_page').onclick = function() {    //  // 获取所有新闻标题包装元素    //  var div = document.getElementById('container').getElementsByTagName('div');    //  // j, k循环变量，n当前页显示的第一个新闻序号    //  var j = k = n = 0 ;    //  // 获取当前页显示的第一个新闻序号    //  n = ++paper % Math.ceil(len/num) * num ;    //  for(; j < len; j++) {    //      // 隐藏所有新闻    //      div[j].style.display = 'none' ;    //  }    //  for(; k < 5; k++){    //      if(div[n + k]) {    //          //显示当前页新闻    //          div[n + k].style.display = 'block' ;    //      }    //  }    // } ;    /**    *   案例一：翻页需求，方式二：享元模式    */    // 提供一个操作方法    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 paper = 0 ;    var num = 5 ;    len = article.length ;    // 添加5条新闻    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 ;        // 循环变量        var 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 = '' ;            }        }    } ;    /**    *   案例二：游戏人物动作，方式一：    */    // 享元类    var Flyweight2 = {        moveX : function(x) {            this.x = x ;        },        moveY : function(y) {            this.y = y ;        }    } ;    // 角色    var Player = function (x, y, c) {        this.x = x ;        this.y = y ;        this.color = c ;    } ;    Player.prototype = Flyweight2 ;    Player.prototype.changeColor = function(c) {        this.color = c ;    };    // 精灵    var Spirit = function(x, y, r) {        this.x = x ;        this.y = y ;        this.r = r ;    } ;    Spirit.prototype = Flyweight2 ;    Spirit.prototype.changeR = function(r) {        this.r = r ;    } ;    // 创建实例    var player1 = new Player(10, 10, 'red') ;    console.log(player1) ;    console.log('修改后的数据为：--------') ;    player1.moveX(5) ;    player1.moveY(5) ;    player1.changeColor('blue') ;    console.log(player1) ;    // 创建精灵实例    var spirit1 = new Spirit(10, 10, 10) ;    console.log(spirit1) ;    console.log('修改后的数据为：--------') ;    spirit1.moveX(30) ;    spirit1.moveX(30) ;    spirit1.changeR(30) ;    console.log(spirit1) ;</script>   </body>
阅读全文
0 0