用javascript实现的单页应用骨架模型

/*
 * Swipe 2.0
 * @author bjtqti
 * @description 基于javascript的单页应用
 * Copyright 2014, MIT License
 *
*/

function Swipe(container, options) {

  "use strict";

  // quit if no root element
  if (!container) return;
  options = options || {};
  this.container = container;
  //页面数据
  this.pages = options.pages||[];
  this.pointer = {};
  //设备屏宽
  this.screenWidth = 640;
  this.init();
}

Swipe.prototype = {

    //初始化
    init : function(){
      var maxLen = this.pages.length;
      var index =  Number(localStorage.getItem(‘index‘))||0;
      var next,prev;
      if(!maxLen) return;
      //创建页面基础元素
      this.createLeftButton();
      this.createSwipeWrap();
      this.createRightButton();
      //缓存页码索引信息
      this.curIndex = index;
      this.maxLen = maxLen;
      this.pointer.cur = this.createPage(index);

      if(maxLen ==1) return;

      switch(index){
        case 0:
          next = this.createPage(index+1);
          break;
        case maxLen -1:
          prev = this.createPage(index-1);
          break;
        default:
          prev = this.createPage(index-1);
          next = this.createPage(index+1);
      }
      this.pointer.next = next;
      this.pointer.prev = prev;
      next && this.move(next,this.screenWidth);
      prev && this.move(prev,-this.screenWidth);
    },

    //创建翻页容器
    createSwipeWrap : function(){
      var ele = document.createElement(‘ul‘);
      ele.className = "xut-container";
      this.container.appendChild(ele);
      this.box = ele;
    },

    //创建左翻页按钮
    createLeftButton : function(){
      var that = this;
      this.createBtn({
        name : "xut-left",
        text : "<",
        fn   : function(){
          that.prev();
        }
      })
    },

    //创建右翻页按钮
    createRightButton : function(){
      var that = this;
      this.createBtn({
        name : "xut-right",
        text : ">",
        fn   : function(){
          that.next();
        }
      })
    },

    //创建按钮
    createBtn : function(options){
      var ele = document.createElement(‘div‘);
      ele.className = options.name;
      ele.innerHTML = options.text;
      this.container.appendChild(ele);
      ele.addEventListener(‘click‘,options.fn,false);
      return ele;
    },

    //创建页面
    createPage : function(index){
      var li = document.createElement(‘li‘);
      li.setAttribute(‘class‘,‘xut-flip‘);
      li.innerHTML = index;
      //这里可以进行自由扩展,数据从this.pages添加
      this.box.appendChild(li);
      return li;
    },

    //上一页
    prev : function(){
      if(this.curIndex > 0){
        var prev = this.pointer.prev;
        var cur  = this.pointer.cur;
        this.curIndex--;
        //当前页移到右边
        this.slide(cur,this.screenWidth);
        //上一页移到中间
        this.slide(prev,0);
        //清除下下一页
        this.destory(this.pointer.next);
        //更新标记
        this.pointer.next = cur;
        this.pointer.cur = prev;
        //预创建上一页
        if(this.curIndex -1 > -1){
          this.pointer.prev = this.createPage(this.curIndex-1);
          this.move(this.pointer.prev,-this.screenWidth);
        }else{
          this.pointer.prev = null;
        }
        localStorage.setItem(‘index‘,this.curIndex)
      }
    },

    //下一页
    next : function(){
      if(this.curIndex < this.maxLen-1){
        var next = this.pointer.next;
        var cur  = this.pointer.cur;
         this.curIndex++;
         //当前页移到左边
         this.slide(cur,-this.screenWidth);
         //下一页移到中间
         this.slide(next,0);
         //清除上上一页
         this.destory(this.pointer.prev);
         //更新标记
         this.pointer.prev = cur;
         this.pointer.cur = next;

         //预创建下一页
         if(this.curIndex+1 < this.maxLen){
            this.pointer.next = this.createPage(this.curIndex+1);
            this.move(this.pointer.next,this.screenWidth);
         }else{
            this.pointer.next = null;
         }
         localStorage.setItem(‘index‘,this.curIndex)
      }
    },

    //滑动
    slide : function(ele,distance){
      var time = 300;
      ele.style[‘webkitTransitionDuration‘] = time+‘ms‘;
      this.move(ele,distance);
    },

    //移位
    move : function(ele,distance){
      ele.style[‘-webkit-transform‘] = ‘translate3d(‘+distance+‘px, 0, 0)‘;
    },

    //销毁
    destory : function(ele){
      if(!ele) return;
      this.box.removeChild(ele);
    }
}