因为项目需要和自己的兴趣,几个月前结合模板解析神速的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的介绍就到这里,欢迎批评和指导~~

  

JData 整合ArtTemplate的前端框架的更多相关文章

  1. 整合X-Admin前端框架改造ABP

    “站在巨人的肩膀上”,这样一来,不要万事亲恭,在值得的方向上节约时间,毕竟人生就这么一次.在接触ABP以来,一直想花点时间整合LayUI前端框架到ABP中,进而能够逐渐打磨出一套适合自己的框架,开发习 ...

  2. Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改

    Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...

  3. 10大H5前端框架

    作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这 ...

  4. 10大html5前端框架

    Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者 ...

  5. b2c项目基础架构分析(二)前端框架 以及补漏的第一篇名词解释

    继续上篇,上篇里忘记了也很重要的前端部分,今天的网站基本上是以一个启示页,然后少量的整页切换,大量的浏览器后台调用web服务局部.动态更新页面显示状态这种方式在运作的,从若干年前简单的ajax流行起来 ...

  6. H5前端框架推荐合集

    Ionic ionic 吧开发流程都帮你做好了,已经不再是单纯的UI框架,而是开发框架了,非常适合快速开发.基于angular2,丰富的UI组件,大大改进的编程模型, Semantic UI 中文官网 ...

  7. 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

    ↓— Vue.js框架魅力 —↓ 前言       Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...

  8. 10大H5前端框架,让你开发不愁

    ![](http://upload-images.jianshu.io/upload_images/8373224-7903a1466f7b9722?imageMogr2/auto-orient/st ...

  9. vue 前端框架

    什么是vue.js 1.vue是目前最火的一个前端框架,react 是最流行的前端框架(react除了开发网站,还可以开发手机APP,vue语法也是可以进行手机app开发的,需要借助于weex) 2. ...

随机推荐

  1. aspx后台引用不到服务器控件

    从其他地方拷贝的页面到自己的项目,后台CS代码引用hidden时,提示找不到,百度,发现可能是网站项目和Web应用程序的区别,右键aspx转化为Web应用程序即可.

  2. 2016-2017 ACM-ICPC Southwestern European Regional Programming Contest (SWERC 2016) D.Dinner Bet 概率DP+排列组合

    题目链接:点这里 题意: 1~N标号的球 现在A有C个,B有C个 每次可以随机得到D个不同的球(1~N);问你A或B中的C个球都出现一次的 期望次数 题解: dp[i][j][k]表示 随机出现了i个 ...

  3. Spring简单实现数据源的动态切换

    Spring简单实现数据源的动态切换: 1. 创建一个数据源切换类: 2. 继承AbstractRoutingDataSource,创建多数据源路由类,并注入到spring的配置文件中: 3. AOP ...

  4. Entity FramWork Code first 使用心得

    1 最有用的命令 update-database -force -verbose 2 主键如果不是默认的int或者 bigint而是guid 或者 string类型,创建记录的时候要给主键赋值 3 在 ...

  5. extends && implements

     final声明的类不能被继承 方法的重写(@Override):  两同两小一大原则: 方法名相同,参数类型相同 子类返回类型小于等于父类方法返回类型(java里无论怎样都对) 子类抛出异常小于等于 ...

  6. The android gradle plugin version 2.3.0-beta2 is too old, please update to the latest version.

    编译项目的时候,报如下错误: Error:(, ) A problem occurred evaluating project ':app'. > Failed to apply plugin ...

  7. c语言和oc对比

    1)源文件对比 思考&实现1: 1)在C语言中,我们遇到不同后缀的文件有哪些? .c .o .out .h 2.基本语法对比 1)数据类型对比学习 2)变量的定义对比 3)流程控制语句对比 1 ...

  8. gcc编译系统

    一. C语言编译过程 C语言的编译过程可分为四个阶段: 1.预处理(Preprocessing) 对源程序中的伪指令(即以#开头的指令)和特殊符号进行处理的过程. 伪指令包括:1)宏定义指令: 2)条 ...

  9. Bootstrap中的各种下拉菜单

    @*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...

  10. EA使用记录

    1.Del键只能删除桌面上的图形,不能删除项目树中的图形:要同时从项目树中删除需要ctrl + del: 2.要找到桌面上的图形对应的项目树中的图 alt + g: 3.要设置默认的LINK样式,在菜 ...