JData 整合ArtTemplate的前端框架

2022-08-26 16:46:23

　　因为项目需要和自己的兴趣，几个月前结合模板解析神速的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服务器数据请求，数据的局部刷新，数据的全局刷新，页面图片预加载（包括自定义过渡效果）等功能。

　　快速向导

一.使用框架

二.模板的编写

使用一个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

好，现在把数据加到模板中去然后解析，步骤很简单。

<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的介绍就到这里，欢迎批评和指导～～

码农公寓

相关文章