基于jQuery/zepto的单页应用(SPA)搭建方案

这里介绍一个基于jquery或zepto的单页面应用方案，遵循尽量简单的原则，使你们一目了然，只需配置一个路由，以后彻底按照jq平常写法便可完成。可作学习使用，也可修改后用于一些业务逻辑简单的spa项目中;下面是个dome，先看下效果(放在github page下，可能访问比较慢,若没法查看刷新几下既能够了)：

项目地址：https://github.com/pangyongsheng/spa

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

1、目录结构

　　目录结构简洁明了，全部文件放在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启服务，不打包    

2、路由

　　路由方法（src/js/libs/route.js）是我基于网上找到的一个vipspa（https://github.com/wikieswan/vipspa）的基础上编写的，基本逻辑就是监听url哈希值变化（window.onhashchange），而后根据路由配置（src/router.js）加载不一样页面的html、css、js文件，并根据配置或调用参数加载不一样的页面切换动画；

一、路由配置

固然这里咱们须要作的就是配置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页面，默认无动画效果；

二、切换页面方式

•  经过a标签 < a href='#路由参数>
•  经过js切换 window.location.hash =router.stringify('home');

三、切换动画设置：

按照以上方式切换页面则，动画按照router.js中的配置切换，可是在大多数状况，一个页面从每每会用于不一样状况有不一样的切入动画，因此能够在切换时候配置参数，加载不一样切换动画；

• < 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的壳子；