用Jquery和JTemplates来处理JSON数据

    收到我将被调往新公司专职开发B2C系统的内幕消息,在这个公司做了两年多时间,我开发的行情也改了几个版本。但一直面临大流量和被盗两大困惑。在即将调离之前,我想再做最后一次综合性的修改吧。
    要想减小流量,首先就改变数据传输方式,以前是带格式的HTML文件,HTML带有头文件,还有数据表示格式的代码,这些数据加大了不必要的流量,于是我想到了JSON数据格式,这是一种非常轻巧的数据格式,能直接被JS处理,当然还有一个主要的是它不能被Ethereal抓取软件以明文的方式显示,从而表面满足了Superior想要的加密效果。于是我就用C#写一个控制台的应用程序专门生成JSON数据文件。JSON.ASP格式如下:

     后台的数据格式没问题了,现在是前台,如果前台用AJAX,再写一个处理JSON数据的JS函数,但JS频繁操作DOM,代码稍有疏忽,IE浏览器很容易内存泄露,给客户的电脑造成IE假死。正好前段时间在研究Jquery的时候发现一个Jtemplates的外挂,所谓Jtemplates就是基于 Jquery框架,把JSON数据按指定的模块生成TABLE。这样我只要用AJAX获取JSON,然后把JSON数据传给Jtemplates就行了,这样一来可以省去我手写大量JS,二来可以防止内存泄露。输入网址:www.jquery.com
下载一个的jquery.1.3.2.js,再进入http://jtemplates.tpython.com 下载了Jtemplates.js。
  OK,开始手写页面了,新建一个HTML页面,仿照jtemplates.tpython.com中的例子在head中加入代码:
 
Body中新建Jtemplates模块:


     因为行情数据要刷新,所以我用城市温度来模仿的时候,在$(document).ready(function(){}中加入了 window.setInterval(function(…),10000),这是我想要它每十秒钟刷新一次。保存文件运行…OK,没问题,数据出来了。现在开始修改优化,先从$('#result').setTemplateElement('template');这一句开始,这一句是加载模板,在jtemplates.tpython.com网站的文档中还有两个方法 :
一个是:setTemplate(Template template),这一句是把模板直接放在setTemplate()函数中,这样省去读Element的步骤,似乎快一点,但当模块很复杂的时候,像我前面那样,可读性就差了。这个方法还有一个带三个参数重载的:setTemplate(String template, Array includes, Object settings)
还有一个方法是:setTemplateURL(String url, [Array includes], [Object settings]);这个是从URL指定的文件中读取模板,如果用这个那得要新建一文件,这样更不方便。
看来setTemplateElement这个方法是比较合适的了。不过,这个方法好像也还有一个带三个参数重载的。第一个是模板,第二个参数按照官方文档的说法是Array of included templates.具体怎么用,我也没找到更详细的例子,既然这样我就有NULL来代替吧。第二个参数是一组object设置,文档中只有九个设置的简单描述,没有找到具体例子,不过这一组的第二个设置filter_data对我很有用,是设置是否过滤HTML代码,也就是说,JSON数据中的遇到 HTML代码是把它转义原样显示出来还是让它以HMTL标识不显示。默认是TRUE,也就是如果json数据中有html代码将转义显示出来。
   我接着继续查看jtemplates.tpython.com中的文档,突然发现一个方法:processTemplateStart(String url, Array param, Integer interval, [Array args], [Object options]),这个方法可以定时从指定的文件中读取JSON数据并生成,这样我上面的JS代码就可以修改为:

      上面一行可以替代前面的的十几行代码。真的太简单了。
      保存页面运行了一下,我又发现了一个问题,行情交易数据不同气温,温度变得慢,而行情时时在变,有涨有跌。一般的股市涨了就用红色表示,跌了就有绿色表示。于是我在服务器读取数据的时候判断,如果涨了我就在数字前加上一个”z”,跌了就加一个”d”。这样,输出的数据就可能是:{data: [{city:’深圳’, temperature:’z30’},{city:’东莞’, temperature:’d32’}]}
这样,我如果用processTemplateStart()似乎不能满足我变颜色的要求,于是我只好又用回以前的,并把函数:ApplyTemplate进行修改:


      这样一来,我把setTemplateElement函数的filter_data设为假,我的<font>就不会被原样显示出来了。
    “阿里,阿里巴巴,阿里巴巴是个快乐的青年”,哈哈,终于被我搞出来了吧。
       当然,我这个例子也只是测试用的,真的上线运行,AJAX的代码我不会用Jquery的,因为Jquery.js压缩后还有五十多K,太大了,必须分流到另一台服务器,但AJAX又不能夸站访问的,所以我会自己手写一个AJAX读取文件然后把数据交给Jtemplates处理。而Jquery.js和 Jtemplates.js可以放在另一台服务器包函进来,这样既可以用AJAX取得数据,又可以数据分流。
       关于Jtemplates这个外挂,真的还有很多的属性,比如让表格隔行变颜色,还可以判断数据等等等。改完这个行情,再做一些加密处理放上公网运行,调动通知下来了,我调到了另一个部门,也就是即将成立的新公司去开发了。行情以后的修改优化就交给那些后生们了。

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 2
    评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

moodboy1982

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值