這里介紹一個(gè)基于jquery或zepto的單頁(yè)面應(yīng)用方案，遵循盡可能簡(jiǎn)單的原則，使大家一目了然，只需配置一個(gè)路由，之后完全按照jq日常寫法即可完成。可做學(xué)習(xí)使用，也可修改后用于一些業(yè)務(wù)邏輯簡(jiǎn)單的spa項(xiàng)目中;下面是個(gè)dome，先看下效果(放在github page下，可能訪問(wèn)比較慢,若無(wú)法查看刷新幾下既可以了)：

項(xiàng)目地址：https://github.com/pangyongsheng/spa

dome鏈接：http://pangyongsheng.github.io/spa/#home

一、目錄結(jié)構(gòu)

　　目錄結(jié)構(gòu)簡(jiǎn)潔明了，所有文件放在src下，無(wú)需打包，執(zhí)行npm run dev 命令，進(jìn)入開發(fā)模式（因?yàn)槁酚墒腔赼jax的，所以查看效果需啟個(gè)http服務(wù)，這里使用了webpack-server啟服務(wù)）一邊編碼一邊查看效果；index.html為入口文件，router.js為路由配置，css、js下放置公共類庫(kù)文件，pages下放置各個(gè)頁(yè)面的文件

* |-- src * | |--index.html 首頁(yè)（空頁(yè)面，通過(guò)路由加載其他頁(yè)面） * | |--router.js 路由 * | |--css 公共css文件 * | | |--libs 第三方ui庫(kù) * | | |--public 公共樣式 * | |--js 公共js文件 * | | |--libs 第三方j(luò)s庫(kù)、插件 * | | |--public 公共方法 * | |--pages 頁(yè)面 * | |--home home頁(yè)文件 * | | |--home.html html * | | |--home.js js * | | |--home.css css * | | * | |--list list頁(yè)文件 * | | |-- * | | |-- * | | |-- * | |... 其他頁(yè)面 * | * |--packjson * |--webpack.config.js 開發(fā)模式配置文件：僅使用webpack-server啟服務(wù)，不打包

二、路由

　　路由方法（src/js/libs/route.js）是我基于網(wǎng)上找到的一個(gè)vipspa（https://github.com/wikieswan/vipspa）的基礎(chǔ)上編寫的，基本邏輯就是監(jiān)聽url哈希值變化（window.onhashchange），然后根據(jù)路由配置（src/router.js）加載不同頁(yè)面的html、css、js文件，并根據(jù)配置或調(diào)用參數(shù)加載不同的頁(yè)面切換動(dòng)畫；

1、路由配置

當(dāng)然這里我們需要做的就是配置router.js,下圖是上面dome的路由文件：

基本參數(shù)config

參數(shù)說(shuō)明

view	index.html中展示view視圖的div（jquery DOM）。
errorTemplateId	可選的錯(cuò)誤模板，用來(lái)處理加載html模塊異常時(shí)展示錯(cuò)誤內(nèi)容,
router	router里面配置所有的路由信息
defaults	用來(lái)設(shè)置默認(rèn)路由，即不在路由規(guī)則里面的路由將展示 'defaults' 的view

config.router的參數(shù)說(shuō)明

'路由哈希值': {
templateUrl: html路徑,
controller: js路徑,
styles: css文件路徑,
animate: 默認(rèn)動(dòng)畫方式（為空則無(wú)動(dòng)畫，left為左邊切入，right為右邊切入）
},

以home為例，表示url為http:xxx#home時(shí)加載home.html頁(yè)及其home.css、home.js頁(yè)面，默認(rèn)無(wú)動(dòng)畫效果；

2、切換頁(yè)面方式

• ?通過(guò)a標(biāo)簽 < a href='#路由參數(shù)>
• ?通過(guò)js切換 window.location.hash =router.stringify('home');

3、切換動(dòng)畫設(shè)置：

按照以上方式切換頁(yè)面則，動(dòng)畫按照router.js中的配置切換，但是在大多數(shù)情況，一個(gè)頁(yè)面從往往會(huì)用于不同情況有不同的切入動(dòng)畫，所以可以在切換時(shí)候配置參數(shù)，加載不同切換動(dòng)畫；

• < a href='#路由參數(shù)?animate=left'>
• window.location.hash = router.stringify('home',{animate:'left'});

我這里只編寫了left和right的動(dòng)畫，src/css/libs/route.css ，可以自己添加

4、不同頁(yè)面間路由傳參：

（1）url?顯示傳參　　

　　發(fā)送參數(shù)　　　　location.hash = router.stringify('home',{name:'Jack'});

　　獲取參數(shù)?　　　??var obj = router.parse();

（2）隱式傳參

　　傳送參數(shù)：

var msg = {'id': 'home_msg','content': {name: "Jack",age:"18"} }; router.setMessage(msg);

　　獲取參數(shù)：

var param = router.getMessage('home_msg'); console.log(param);

三、index.html

所有公共文件需在index中引入，下圖橙色區(qū)域?yàn)楣参募?/p>

< div id='ui-view'>為放置加載的頁(yè)面區(qū)域
< script type="text/html" id="error" >中是放置錯(cuò)誤信息的（可選）

這里我從網(wǎng)上找了個(gè)ydui（http://www.ydui.org/docs），最為ui庫(kù)使用大家可根據(jù)不同需求加入自己所需的第三方類庫(kù)；
zepto(或jquery)是必須的，還有route.js，route.css其他都不是必須的；

這里我們index.html是沒(méi)有實(shí)際內(nèi)容的，默認(rèn)加載了home.html到ui-view中，也可自己編寫內(nèi)容放在ui-view外作為所有頁(yè)面的公共html

四、page頁(yè)面

以home頁(yè)為例，page下的html不需引入css及js文件，直接編寫html即可，在對(duì)應(yīng)的home.js中寫邏輯，home.css寫樣式即可，一下分別是home.html,home.css,home.js:

?

五、其他

文件可以自己配置打包壓縮，可以參考我項(xiàng)目中的webpack.bulid.config.js配置，如果想做app外面套個(gè)cordova的殼子；

?

轉(zhuǎn)載于:https://www.cnblogs.com/pangys/p/8648485.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。