JData 整合ArtTemplate的前端框架
因为项目需要和自己的兴趣,几个月前结合模板解析神速的ArtTemplate,自己写了个框架取名JData,多多指教啊~~~因为一直没时间写文档,为了能够更方便地使用和避免我把代码忘了,今天抽空把文档写了。
项目已经在github上了,地址为https://github.com/Hi-Rube/taskOops/blob/master/Public/Static/js/public/jdata.js 请多多指教。
ArtTemplate模板的用法参见https://github.com/aui/artTemplate
JData
高效的前端数据处理框架
版本号 v1.0.3
JData是一个高效的前端数据处理框架,通过结合ArtTemplate模板引擎,提供了模板解析,模板数据加载,Ajax数据加载(支持数据格式现只有JSON),三种方式的ajax服务器数据请求,数据的局部刷新,数据的全局刷新,页面图片预加载(包括自定义过渡效果)等功能。
快速向导
一.使用框架
<script src="jdata.js"></script>
二.模板的编写
使用一个type="text/html"
的script
标签存放模板:
<script id="test" type="text/html"><%JD for (i=1; i<=1; i++){%><a ad=<%JD=love.url%>><%JD= dong%></a> </br><%JD }%>
</script>
模板逻辑语法开始与结束的界定符号为<%JD
与%>
,若<%JD
后面紧跟=
号则输出变量内容。每个模板有一个ID,用来标识模板。
三.数据的加载
数据的加载默认为加载<jd>标签里的数据,当然<jd>标签里面的数据需要是JSON格式的才能被解析加载
eg:php
<jd><?php echo $this->Data; ?></jd>
<jd>{"dong":123}</jd>
好,现在把数据加到模板中去然后解析,步骤很简单。
<script src="jdata.js"></script> <script type="text/javascript">JData();//如果加载的不是默认jd标签里面的数据,如果是Rube标签里面的数据则//JData("Rube"); 这样就可以了 </script>
四.模板的渲染
模板的渲染分为两种方式,一种为全局渲染,一种为指定模板ID的局部渲染。
a. 全局渲染,第三部分数据加载中JData() 这样默认是全局渲染的,即<jd></jd>中的数据将运用到每个模板中。JData提供了独立的方法来进行全局渲染。
JData.refreshAll(method,data,callback);
参数说明:
method:全局渲染的方式,默认为在原来模板的数据后面添加数据,method=0 or method='replace' 为替换当前模板中的数据 , method=-1 or method='before' 为在原来模板的数据前面添加数据。method!=-1 or 0 即为采用默认的数据替换方式。
data:为要向模板内添加的数据,如果data=null or data=undefined 那么 模板内添加的数据默认为JData.data中的数据。JData.data中的数据最开始就为<jd></jd>中的数据,当然你可以进行修改,修改了之后加载的就是你修改后的数据了,不再是最开始的<jd></jd>中的数据。
当然你可以将data不设为null,将它改为自己想要载入的数据,那么你可以带入两种数据类型,第一种为JSON格式的字符串,第二种为一个对象,注意如果你用全局刷新的方式且data参数不为null 那么当前JData.data中的数据就会变成data。
if (typeof Tag==='object'){//带入参数,修改JData.data的数据刷新var data=Tag;if (part==0)global.JData.data=data;}
callback:执行完后的回调函数
b.局部渲染,将对指定ID的模板进行数据载入和模板刷新。
JData.refreshPart(ID,method,data,callback);
参数说明:
ID:指定模板的ID。
method:这个与全局渲染的method一样。
data:这个与全局渲染的data一样。但是他如果data不为null那么JData.data的数据不会改变。
c.指定多个模板的渲染,这个是接下来要改进的,现在还没有实现这个功能,指定多个模板渲染指原来的局部渲染我们是使用ID 就是只刷新一个模板,指定多个模板渲染呢就是多个指定的模板使用同一个数据进行刷新。
JData.getData();
这个方法可以获取JData.data的一个深拷贝(摆脱了引用关系)。
使用方法举例:
<script type="text/javascript">var data=JData.getData();data.dong=123; //局部改变当前的全局数据JData.refreshAll(1,data,function(){alert("successful!");}); //JData.data的dong属性将被改变
</script>
五.页面的预加载
JData.TF();
定义了页面预加载到页面跳转之间执行的语句和效果。
JData初始化时将对所有有ad属性的<a>标签 进行点击监听,ad属性的属性值为跳转的地址。当<a>标签被点击后,将预加载ad的地址内容,并且调用TF方法,加载完后将自动跳转到指定地址。
对于前端用户体验的优化还需大家多提供提供意见,我在JData接下来的几个版本里我将会陆续增加一些功能。
六.Ajax数据加载
JData.getAjaxData(options,beforeFun,afterFun);
参数说明:
options: options是一个对象,他的属性配置如下
options.async : 进行ajax请求的方式,async=false 为同步 async=true为异步
options.type : 进行请求的方式 参数类型为字符串,现支持四种方式text,json,jsonp,script 默认使用json方式。json方式即为普通的Ajax请求JSON数据,以对象形式返回。jsonp方式详见百度,script方式为创建一个script标签进行加载。text方式也为普通的Ajax请求,请求数据为文本格式,以文本形式返回。
options.url : 请求地址。
options.method : 请求的方式GET or POST
options.parse : 请求的参数 eg: a=1&b=2&w=sss
beforeFun:ajax请求发送前执行的内容;
afterFun(error,content):ajax请求返回数据后执行的内容,其中error为错误信息,content为返回的内容,注意的是在jsonp方式请求中,afterFun为一个字符串,即为回调函数的名称
JData的介绍就到这里,欢迎批评和指导~~
转载于:https://www.cnblogs.com/hirube/p/3680354.html
JData 整合ArtTemplate的前端框架相关推荐
- Vue应用框架整合与实战--前端开发生态圈
向着阳光,我们意念坚定不移,相信未来属于我们! Javascript Article Article Javascript深浅拷贝 Javascript中的apply和call继承 Javascrip ...
- SSM框架+layui前端框架整合
在上篇博文中,博主使用bootstrap+SSM实现了商品列表展示效果,从页面上看,其虽然可以加入分页等功能,但不太方便,博主的分页使用的是mybatis的分页插件,今天,博主为大家分享一款功能强大的 ...
- H5前端框架推荐合集 (转)
Ionic ionic 吧开发流程都帮你做好了,已经不再是单纯的UI框架,而是开发框架了,非常适合快速开发.基于angular2,丰富的UI组件,大大改进的编程模型, Semantic UI 中文官网 ...
- 使用前端框架Foundation 4来帮助简化响应式设计开发
日期:2013-3-12 来源:GBin1.com Foundation是一套使用广泛的前端开发套件,可以帮助你快速的网站.最近ZURB发布了一个新版本的Foundation 4前端框架,能够有效的 ...
- 10大html5前端框架
Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者 ...
- Bifrost微前端框架及其在美团闪购中的实践
Bifrost(英 ['bi:frɔst])原意彩虹桥,北欧神话中是连通天地的一条通道.而在漫威电影<雷神>中,Bifrost是神域--阿斯加德(Asgard)的出入口,神域的人通过它自由 ...
- 目前IT行业最流行的九大前端框架
1. React React – A JavaScript library for building user interfaces React 是一个用于构建用户界面的 JavaScript 库.R ...
- 目前得前端框架都有哪些?
1.AngularJS Angular JS 是一个有Google维护的开源前端web应用程序框架.它最初由Brat Tech LLC的Misko Hevery于2009年开发出来.Angular J ...
- 现流行的九大前端框架
目前流行的9大前端框架 1. React 2. Vue 3. Angular 4. Svelte 5. Alpine 6. Preact 7. LitElement 8. Stimulus 9. Em ...
最新文章
- Android Studio – Cannot resolve symbol ‘R’
- PCL点云配准(3)
- Web安全实践(2)基于http的web架构剖析
- 大数的相加 乘 余 幂
- android 加载条封装,Android基于JsBridge封装的高效带加载进度的WebView
- 使用复合设计模式扩展持久化的CURD,Select能力
- 10个Bug环环相扣,你能解开几个?
- 查看华为应用商店APPID
- phpstorm如何同时打开两个文件夹_iPhone如何同时添加两个不同的面容ID?
- 使用EqualsBuilder和HashCodeBuilder生成hashcode和equal方法
- 论文笔记-深度估计(1)Depth Map Prediction from a Single Image using a Multi-Scale Deep Network
- python爬虫入门实例
- 码农辞职一年后:独立工程师太难了
- 用C#通过sql语句操作Sqlserver数据库教程
- 鬼谷八荒先天气运修改器
- Rimworld Mod制作教程12 集群AI机制介绍
- android adb 屏幕分辨率,利用 adb 来修改 Android 安卓的分辨率(另类安卓省电方法)...
- shell脚本文本三剑客之awk
- 破解android 九宫格锁
- 灰度(金丝雀)发布、蓝绿部署、滚动发布
热门文章
- 使用uni-app开发app时,使用uni.getLocation API的时候真机调试定位没问题,云打包后API不执行的问题
- windows下值得使用的软件整理——效率类
- 使用echarts实现简单的疾病知识图谱
- 【5G核心网】5GC核心网之网元NRF
- 虚拟现实中的非接触式触摸
- win10蓝屏终止代码CRITICAL_PROCESS_DIED解决方法
- 卸载office产品密钥_如何在出售PC之前卸载Windows产品密钥
- html添加字体图标font icon
- 2018百度前端技术学院 第五六课 编码作业
- 登录邮箱怎么填,企业个人邮箱登录注册