這里介紹一個基于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的殼子；

?

轉載于:https://www.cnblogs.com/pangys/p/8648485.html

總結

以上是生活随笔為你收集整理的基于jQuery/zepto的单页应用(SPA)搭建方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。