這里介紹一個基於jquery或zepto的單頁面應用方案，遵循盡可能簡單的原則，使大家一目了然，只需配置一個路由，之后完全按照jq日常寫法即可完成。可做學習使用，也可修改后用於一些業務邏輯簡單的spa項目中;下面是個dome，先看下效果(放在github page下，可能訪問比較慢,若無法查看刷新幾下既可以了)：
項目地址：https://github.com/pangyongsheng/spa
dome鏈接：http://pangyongsheng.github.io/spa/#home
一、目錄結構
目錄結構簡潔明了，所有文件放在src下，無需打包，執行npm run dev 命令，進入開發模式（因為路由是基於ajax的，所以查看效果需啟個http服務，這里使用了webpack-server啟服務）一邊編碼一邊查看效果；index.html為入口文件，router.js為路由配置，css、js下放置公共類庫文件，pages下放置各個頁面的文件
* |-- src * | |--index.html 首頁（空頁面，通過路由加載其他頁面） * | |--router.js 路由 * | |--css 公共css文件 * | | |--libs 第三方ui庫 * | | |--public 公共樣式 * | |--js 公共js文件 * | | |--libs 第三方js庫、插件 * | | |--public 公共方法 * | |--pages 頁面 * | |--home home頁文件 * | | |--home.html html * | | |--home.js js * | | |--home.css css * | | * | |--list list頁文件 * | | |-- * | | |-- * | | |-- * | |... 其他頁面 * | * |--packjson * |--webpack.config.js 開發模式配置文件：僅使用webpack-server啟服務，不打包
二、路由
路由方法（src/js/libs/route.js）是我基於網上找到的一個vipspa（https://github.com/wikieswan/vipspa）的基礎上編寫的，基本邏輯就是監聽url哈希值變化（window.onhashchange），然后根據路由配置（src/router.js）加載不同頁面的html、css、js文件，並根據配置或調用參數加載不同的頁面切換動畫；
1、路由配置
當然這里我們需要做的就是配置router.js,下圖是上面dome的路由文件：
基本參數config
| 參數 | 說明 |
|---|---|
| view | index.html中展示view視圖的div（jquery DOM）。 |
| errorTemplateId | 可選的錯誤模板，用來處理加載html模塊異常時展示錯誤內容, |
| router | router里面配置所有的路由信息 |
| defaults | 用來設置默認路由，即不在路由規則里面的路由將展示 'defaults' 的view |
config.router的參數說明
'路由哈希值': {
templateUrl: html路徑,
controller: js路徑,
styles: css文件路徑,
animate: 默認動畫方式（為空則無動畫，left為左邊切入，right為右邊切入）
},
以home為例，表示url為http:xxx#home時加載home.html頁及其home.css、home.js頁面，默認無動畫效果；
2、切換頁面方式
- 通過a標簽 < a href='#路由參數>
- 通過js切換 window.location.hash =router.stringify('home');
3、切換動畫設置：
按照以上方式切換頁面則，動畫按照router.js中的配置切換，但是在大多數情況，一個頁面從往往會用於不同情況有不同的切入動畫，所以可以在切換時候配置參數，加載不同切換動畫；
- < a href='#路由參數?animate=left'>
- window.location.hash = router.stringify('home',{animate:'left'});
我這里只編寫了left和right的動畫，src/css/libs/route.css ，可以自己添加
4、不同頁面間路由傳參：
（1）url 顯示傳參
發送參數 location.hash = router.stringify('home',{name:'Jack'});
獲取參數 var obj = router.parse();
（2）隱式傳參
傳送參數：
var msg = { 'id': 'home_msg', 'content': { name: "Jack", age:"18" } }; router.setMessage(msg);
獲取參數：
var param = router.getMessage('home_msg'); console.log(param);
三、index.html
所有公共文件需在index中引入，下圖橙色區域為公共文件
< div id='ui-view'>為放置加載的頁面區域
< script type="text/html" id="error" >中是放置錯誤信息的（可選）
這里我從網上找了個ydui（http://www.ydui.org/docs），最為ui庫使用大家可根據不同需求加入自己所需的第三方類庫；
zepto(或jquery)是必須的，還有route.js，route.css其他都不是必須的；
這里我們index.html是沒有實際內容的，默認加載了home.html到ui-view中，也可自己編寫內容放在ui-view外作為所有頁面的公共html
四、page頁面
以home頁為例，page下的html不需引入css及js文件，直接編寫html即可，在對應的home.js中寫邏輯，home.css寫樣式即可，一下分別是home.html,home.css,home.js:
五、其他
文件可以自己配置打包壓縮，可以參考我項目中的webpack.bulid.config.js配置，如果想做app外面套個cordova的殼子；