項目整改爲single page app總結

前言

以前項目是嵌入在微信公衆號中，頁面訪問很慢。想提高訪問速度，有更好的，相似原生的體驗最好的解決方法就是改成單頁app.
單頁app用到了mobilebone和iScroll插件。

mobilebone

mobilebone的結構是這樣的：

body
  #page1.page.out[data-title="page1"]
  #page1.page.out[data-title="page2"]
  #page1.page.out[data-title="page3"]

每一個page都要定義一個id,.page表示是個頁面, .out表示隱藏，data-title能夠定義好每一個頁面的title.在a標籤中定義 <a href="#page1"> 就能夠顯示該頁面。

更詳細的資料有：
張鑫旭博客描述
github地址
api

iScroll

用iScroll遇到的問題都是經過看demo解決的,主要是結構的問題。因此要看demo裏賣弄都很統一。wrapper的第一個子元素不能給定固定的高度。由於是單頁app,因此在一個頁面要建立多個iScroll對象。在每一個頁面初始化的時候要調用refresh方法。例如：

Mobilebone.callback = function(page_in, page_out) {
//            foot的active 狀態處理
            var id_in = page_in.id, id_out = "";
            if(!id_in) return;
            var ele_link_in = null, ele_link_out = null;
            if(ele_link_in = document.querySelector(".footer a[href$="+id_in+"]")) {
                $(ele_link_in).parents("li").addClass("active");
            };
            if(page_out) {
                id_out = page_out.id;
                ele_link_out = id_out && document.querySelector(".footer a[href$="+ id_out +"]");
                $(ele_link_out).parents("li").removeClass("active");
            };

            iscroll.refresh();
        };

Mobilebone.callback是每一個page顯示初始化函數。在api中能夠看到。
在tab切換的時候若是tab中的內容長度不同也要記得調用refresh()方法。
http://qbaty.iteye.com/blog/1354380這個解釋的api很詳細。
iscroll github地址