這裏介紹一個基於jquery或zepto的單頁面應用方案，遵循儘量簡單的原則，使你們一目瞭然，只需配置一個路由，以後徹底按照jq平常寫法便可完成。可作學習使用，也可修改後用於一些業務邏輯簡單的spa項目中;下面是個dome，先看下效果(放在github page下，可能訪問比較慢,若沒法查看刷新幾下既能夠了)：css
項目地址：https://github.com/pangyongsheng/spahtml
dome連接：http://pangyongsheng.github.io/spa/#homejquery
1、目錄結構
目錄結構簡潔明瞭，全部文件放在src下，無需打包，執行npm run dev 命令，進入開發模式（由於路由是基於ajax的，因此查看效果需啓個http服務，這裏使用了webpack-server啓服務）一邊編碼一邊查看效果；index.html爲入口文件，router.js爲路由配置，css、js下放置公共類庫文件，pages下放置各個頁面的文件webpack
* |-- 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啓服務，不打包
2、路由
路由方法（src/js/libs/route.js）是我基於網上找到的一個vipspa（https://github.com/wikieswan/vipspa）的基礎上編寫的，基本邏輯就是監聽url哈希值變化（window.onhashchange），而後根據路由配置（src/router.js）加載不一樣頁面的html、css、js文件，並根據配置或調用參數加載不一樣的頁面切換動畫；git
一、路由配置
固然這裏咱們須要作的就是配置router.js,下圖是上面dome的路由文件：github
基本參數configweb
| 參數 | 說明 |
|---|---|
| view | index.html中展現view視圖的div（jquery DOM）。 |
| errorTemplateId | 可選的錯誤模板，用來處理加載html模塊異常時展現錯誤內容, |
| router | router裏面配置全部的路由信息 |
| defaults | 用來設置默認路由，即不在路由規則裏面的路由將展現 'defaults' 的view |
config.router的參數說明ajax
'路由哈希值': {
templateUrl: html路徑,
controller: js路徑,
styles: css文件路徑,
animate: 默認動畫方式（爲空則無動畫，left爲左邊切入，right爲右邊切入）
},
以home爲例，表示url爲http:xxx#home時加載home.html頁及其home.css、home.js頁面，默認無動畫效果；shell
二、切換頁面方式
- 經過a標籤 < a href='#路由參數>
- 經過js切換 window.location.hash =router.stringify('home');
三、切換動畫設置：
按照以上方式切換頁面則，動畫按照router.js中的配置切換，可是在大多數狀況，一個頁面從每每會用於不一樣狀況有不一樣的切入動畫，因此能夠在切換時候配置參數，加載不一樣切換動畫；npm
- < a href='#路由參數?animate=left'>
- window.location.hash = router.stringify('home',{animate:'left'});
我這裏只編寫了left和right的動畫，src/css/libs/route.css ，能夠本身添加
四、不一樣頁面間路由傳參：
（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);
3、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
4、page頁面
以home頁爲例，page下的html不需引入css及js文件，直接編寫html便可，在對應的home.js中寫邏輯，home.css寫樣式便可，一下分別是home.html,home.css,home.js:
5、其餘
文件能夠本身配置打包壓縮，能夠參考我項目中的webpack.bulid.config.js配置，若是想作app外面套個cordova的殼子；