移動前端開發-單頁應用(spa)模型

一門新的技術誕生總會引來一番爭議，單頁Web應用程序也不例外，其最大的優點在於用戶體驗，對於內容的改動不須要加載整個頁面；對服務器壓力很小，消耗更少的帶寬，與面向服務的架構更好地結合。使用HTML+CSS+JavaScript編寫應用程序，能使更多的開發者都加入到程序開發的行列。

單頁面應用是指用戶經過瀏覽器加載獨立的HTML頁面而且無需離開此導航頁面，這也是其獨特的優點所在。對用戶操做來講，一旦加載和執行單個頁面應用程序一般會有更多的響應，這就須要返回到後端Web服務器，而單頁面應用爲用戶提供了更接近一個本地移動或桌面應用程序的體驗。

單頁Web應用程序的優勢：

1. 首先，最大的好處是用戶體驗，對於內容的改動不須要加載整個頁面。這樣作好處頗多，由於數據層和UI的分離，能夠從新編寫一個原生的移動設備應用程序而不用（對原有數據服務部分）大動干戈。
2. 單頁面Web應用層程序最根本的優勢是高效。它對服務器壓力很小，消耗更少的帶寬，可以與面向服務的架構更好地結合。 

在艾倫項帶領的項目組工做也有一年多了，他實現了一套很是完整的單頁應用框架。很是複雜，到今天我也尚未理清裏邊的全部實現。

下面請容許我展現一下這個應用的結果

 看起來和原生應用程序沒有什麼兩樣吧。因而呢，我就作了一個簡單的模型，和往常同樣，只是用來演示原理。

下面發一下個人模型圖：

雖然樣子是醜陋了一點，可是用來學習剛恰好，下面看一下具體的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);
    }
}

這段代碼沒有作滑動翻頁的模擬，爲的儘可能簡化。若是你們有興趣，能夠下載下來演示一下。

https://github.com/bjtqti/xxt/tree/master/spa