jQuery-SPA
描述
- 基于jQuery的单页应用开发骨架。
产生原因
- 之前在很多前端群里面发现非北上广深小伙伴在实际工作中，很多还都以jQuery作为主要技术选型，而基于jQuery的单页应用也比较少见，因此抽空将两年前我们前端用jQuery做单页应用的一些想法整理起来，一来记录一下当初我的成长经历，二来起一个抛砖引玉的作用（其实就是炒冷饭
😁 ）。
依赖说明
依赖的库版本
| Version | jQuery | artTemplate |
|---|---|---|
| 3.x | ||
| 2.x | ||
| 1.x |
什么是artTemplate
- 框架内部使用artTemplate作为默认模板引擎，关于它的更多信息都在这里。
快速开始
安装
//先引入依赖
<script src="jquery.js">
<script src="arttemplate.js"></script>//artTemplate不是必要的，你也可以替换成你喜欢的其他模板引擎
//再引入jQuery-SPA
<script src="jQuery-SPA.min.js"></script>初始化
$(function(){
//实例化一个单页应用
window.app = new App(config);
//启动单页应用
app.start();
});- 关于config的更多信息都在这里。
关于路由
- 单页应用的核心就是路由，本路由来自backbone,也是参考了@拂晓风起的博文进行了改造
- 当地址栏hash值发生变化时，路由内部会默认到/template/page根据路由对应的值去加载模板，同时到js/page加载相应的js文件，因此jQuery-SPA对于目录结构是有依赖的。
- 详细的目录结构可以参考demo的目录结构。
- 定义路由:
//config/config.js
window.config = {
routes: {
"table/table": "table/table",
"detail/detail/:id": "detail/detail",//路由传参
"404":"404/404",
"*": function(){ //未匹配到时的回调
console.log("404 not found");
window.location.hash="#404"
}
}
}其他功能
全局可访问的utils
操作cookie
/**
* @param name 名称
* @param value 值
* @param day 过期时间
*/
//设置
utils.setCookie(name, value, day);
//获取
utils.getCookie(name);
//删除
utils.delCookie(name);文件上传
/**
* @description 以Blob方式发送post请求
* @param data 上传时要额外附带的参数，会以a=1&b=2的形式拼接到请求的url后面
* @param url 上传的地址
* @param file 要上传的文件
* @return Deferred
*/
utils.fileUpload({
data:{
id:1,
name:'李四'
}
url:"",
file:file
}).done(function(data){
alert('上传成功')
}).fail(function(err){
alert('上传失败')
});内置的jQuery插件
jQuery-getData
- jQuery-getData可以获取任何一个元素中所有写有name属性的子节点的值,你可以这样方便的使用:
$.ajax({
url:'xxx.com/insert.do',
data:$("#id").getData()
}).done(function(){
});jQuery-loadSelect
-可以获取任何一个元素中所有写有url属性的select，并按照url所描述的接口进行渲染:
<div id="selects">
<select textField="name" valueField="id" url="xxx1/query.do" defalutText="默认选项" defaultValue="默认值"></select>
<select textField="description" valueField="type" url="xxx2/query.do" defalutText="默认选项" defaultValue="默认值"></select>
</div> $(function(){
$("#selects").loadSelect();
});在线体验
- 请访问http://jquery-spa.demos.party
- 你可以在这里查看demo源码
提问交流
请到jQuery-SPA issues异步交流。
License
MIT