http://lray.pw/works | lray | Glue | GitHub | Mail
##简介
一个基于jQuery的简单前端框架。
主要实现了如下功能:
- 集成jQuery
- 自动加载js文件和css文件
- 发送请求和解析json
- js模版引擎
PS: Glue.iml 文件是 Intellij IDEA 的项目配置文件,可忽略。
##更新历史 2014-12-24: 1. 增强Importer的功能,能够引进配置远程依赖 2. 将模版引擎的便签更改为<@@>,解决和JSP页面标签的冲突 3. 为简单化,去掉Sender的getData方法,使用send方法来替代,同时强制将发送请求改为同步方式(暂时) 4. 更新例子
##项目结构 根目录--| |---js | |---base | | |---import.js | | |---jquery.js | | |---send.js | | |---template.js | | | |---config | | |---cspath.json | | |---jspath.json | | | |---page | |---index | |---fun.js | |---tpl.js | |---index.html
相关说明:
PS:项目结构和文件名不一定需要像我提供的这种格式来编写,本人只是提供一个构建的样例。
##开始
pathConfig: function (type) {
if(type === "js"){
return Importer.getSiteRoot(true) + "js/config/jspath.json";
}
return Importer.getSiteRoot(true) + "js/config/cspath.json";
}
{
"init": [
"http://libs.baidu.com/jquery/1.9.0/jquery.js",
"js/base/send.js",
"js/base/template.js"
],
"index": [
"js/page/index/tpl.js",
"js/page/index/fun.js"
]
}
<script type="text/javascript" src="./js/base/import.js"></script>
<script type="text/javascript">Importer.init(["init","index"],["test"]);</script>
PS:jquery.js必须要在其它组件之前引入,因为其它组件依赖于它来实现功能。 框架已引入完毕,下面讲解核心组件的用法。
##send.js
send.js里面的Sender封装了一个send方法[send: function (url, type, json)
]:
"rest/kong"
params
参数中传送过去true
则使用异步传输 [ 暂时去掉 ]send方法除了发送请求,还会把服务端返回的内容解析封装进一个json对象中,再返回这个json对象。 具体用法可以查看项目代码中的fun.js。
##template.js
<@
和@>
来括住,如下: <@ for (var index in this.keys) { @>
<li><@ this.keys[index] @></li>
<@ } @>
//$("body").html()内的是模版代码
//data是一个json对象
TemplateEngine.render($("body").html(), data)
具体用法可以查看项目代码中的fun.js和tpl.js。
##项目例子
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型