基于jQuery/zepto的单页应用(SPA)搭建方案
这里介绍一个基于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)搭建方案相关推荐
- 基于jQuery的表单验证插件:jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
- 【Linux】快速搭建一个基于Vue的大型单页应用
文章目录 一.npm的安装 二.cnpm的安装 四.Vue的安装 五.快速搭建大型单页应用 六.运行截图 开发环境:Ubuntu 20.0.4 一.npm的安装 sudo apt install np ...
- 单页应用 (SPA)
1.什么是单页应用? 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的W ...
- 基于jQuery的表单验证插件Validation Engine
Validation Engine是一款基于Jquery的js表单验证插件.相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合. 附件提供了该插件,解压密码为:im48 ...
- 单页应用SPA的优缺点
单页应用的优缺点 1.优点 而单页应用则是一次性把web应用的所有代码(HTML,JavaScript和CSS)全部请求过来,有时候考虑到首屏加载太慢会按需加载.这样一来,以后用户的每一个动作都不会重 ...
- Vue单页应用(SPA)及其优缺点
一.什么是单页面应用和多页应用? 单页应用:只有一个主页面的应用,一开始只需要加载一次js.css等相关资源.单页应用跳转,就是使用路由跳转切换相关组件,仅刷新局部资源. 多页应用:多个独立的页面的应 ...
- mysql的单页应用框架搭建_单页应用(SPA)的特征
单页应用的优点: >快速.不需要发送请求.重新加载html/js/css.只有页面的数据需要重新拉取.另外,vue支持替换组件时保存旧组件的状态. >更好的使用体验.用户不需要等待加载时空 ...
- mysql的单页应用框架搭建_采用vue+webpack构建的单页应用——私人博客MintloG诞生记...
介绍 项目地址:https://github.com/jrainlau/MintloG (特别乱,参考就好-_-|||) MintloG是我在五天之内完全由自己开发的私人博客,前端技术方案采用了vue ...
- 基于jQuery实现表单提交验证
html表单代码: 用户名: 邮箱: 个人资料: jQuery代码: $(function(){ $("form :input.required").each(function() ...
最新文章
- iOS开发 关于启动页和停留时间的设置
- WPF-009:WPF窗体的拖动
- java编程器答疑z湖南岚鸿,吐血整理
- aspose.words 操作word插入空白页_让 “空白页”无处可逃,消除你的烦恼
- 软件性能测试过程详解与案例剖析_推荐软件测试书籍
- DLL和COM的发展过程
- Android Studio 如何导入第三方jar包(整理)
- CSS3动画@keyframes中translate和scale混用出错问题
- Windows 文件同步方案讨论
- WebService学习总结——调用第三方提供的webService服务
- 与太多男人一起工作有害健康
- win10任务栏透明_5 款 Windows 任务栏增强工具推荐
- matlab质心定位算法,一种改进的质心定位算法
- 如何让木马克星能在win2003上免费使用
- Stadia云游戏平台
- 在c语言中 char型数据在内存中的存储形式是,在c语言中char型数据在内存中的存储形式是什么?...
- 《电脑报》:两个天价网站背后迷雾
- RX5600XT与RTX2060对比哪个好,哪款显卡性能更强?
- JAVA一些实例实战
- AddressBook 地址簿 (电话簿) 访问与修改-IOS开发
热门文章
- mysql order by 索引名字_MySQL如何利用索引优化ORDER BY排序语句
- centos查看网络速率_CentOS 7查看网络带宽使用情况
- [AssertionError: nput tensor input format are different]
- ub c语言,操作系统之LRU算法 C语言链表实现
- LeetCode LCP 28. 采购方案(排序 + 二分查找)
- LeetCode 583. 两个字符串的删除操作(动态规划)
- LeetCode 1392. 最长快乐前缀(KMP)
- .net pdf转图片_pdf2image类库实现批量pdf转图片
- j2ee和mysql怎么连接_J2EE数据库连接不再烦恼
- python环境变量的运用_Windows下python环境变量配置