javascript设计模式——亨元模式

亨元模式：：运用共享技术有效地支持大量的细颗粒的对象，避免对象拥有相同内容造成多余的开销。

实现翻页功能

  <div id="container">
    <div class="" id="next_page">下一页</div>
  </div>
  <script>
    // 通过该方法实现元素的复用，防止创建过多页面元素
      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]
        }
      }

      document.getElementById('next_page').onclick = function() {
        if (article.length < 5) return;
        var n = ++pager * num % len,
            j = 0
        for(; 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 = ''
          }
        }
      }
      </script>