案例


因为公司业务需要频繁调用接口，后端返回的都是json树对象，需要有些特殊的方法做大量判断和数据处理，显然目前简单语法已经不能满足业务需要了，需要自己定制一些
方法来处理业务逻辑。

例如后台返回的的json对象结构如下：

//数据

var data = {

<span style="white-space:pre">	</span>time: 1408536771253,

       queryRecord:{

       queryHistory:{

            overdue:[],

            query:{time:'100'},

            name:'fdsafdsa'

       }

    }

};

我想在页面显示的效果有数据时如下:

查询结果：逾期日期为 N ，预期次数为 N 次，查询次数为 N 次， 名字为：xxx

没有数据时，显示如下：

查询结果：查询成功，无记录

使用目前现有artTemplate的简单语法，如下:

{{if queryHistory==null || queryHistory.length==0|| queryHistory.overdue==null || queryHistory.overdue.length.length==0||queryHistory.query==null || queryHistory.query.length==0||queryHistory.name ==null || queryHistory.name.length==0}}

查询结果：查询成功，无记录

{{else}}

查询结果为：逾期时间为{{queryHistory.ovedue.date}}，逾期次数为{{queryHistory.ovedue.time}},查询次数为{{queryHistory.query.time}},名字为:{{queryHistory.name}}{{/if}}

因为我不确定接口返回的数据是否有空值，我期望的结果应该是queryHistory下只要有属性是空的，我就希望显示最后查询结果为：“查询成功，无记录”，这样如果我使用原生的语法，我不得不做大量的判断，去判断我需要的属性是否会有空值，不然调用的时候会有异常



解决方案


我通过自定义一个函数去根据我业务需要去做判断，那样我就不需要在页面写大量代码了，只要我输入一个Json对象，它就给我返回是否有属性为空即可

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>helper-demo</title>

<script src="../dist/template.js"></script>

    <script src="../dist/jquery-2.1.4.js"></script>

</head>

<body>

<h1>辅助方法</h1>

<div id="content"></div>

<script id="test" type="text/html">

    {{if hasEmptyProperties(testData)}}

     查询成功，无该用户

    {{else}}

      查询该成功：xxx

    {{/if}}

</script>

<script>

    //递归需要用到的变量

    var exit = false;

    var isExist = false;

/**

 *对指定Json对象遍历其属性判断是否存在空值，只要存在空属性就代表无效对象,返回false

 * <pre>

 *  Json对象1: testData:{

 *      queryHistory:{

 *          array:[],

 *          query:{},

 *          name:'fdsafdsa'

 *      }

 * Json对象2: testData:{

 *   queryHistory:{

 *       overtime:[],

 *       query:{time:'100'},

 *       name:'fdsafdsa'

 *   }

 * Json对象3: testData:{

 *  queryHistory:{}

 *  }

 *  在模板输入： {{if isValidObject(testData)}}

 *  返回： true;

 *

 *

 * </pre>

 *@Param data 要进行校验的Json对象

 *@Param args Json对象中的属性参数

 *@author liangyh

*/

template.helper("hasEmptyProperties",function(data){

    var isInvalid = false;

    isInvalid = isExistEmptyProperties(data);

    //维护全局变量

    exit = false;

    isExist = false;

    return isInvalid;

});

function isExistEmptyProperties(data) {

    //中止执行当前递归

    if(exit==true){

        return isExist;

    }

    if (typeof data == "object") {

        if ($.isEmptyObject(data)) {

            isExist = true;

            exit=true;//满足条件，退出递归

        } else {

            $.each(data, function (k, v) {

                // k is either an array index or object key

                isExist=isExistEmptyProperties(v);

            });

        }

    }

    else {

        // jsonOb is a number or string

        if($.isEmptyObject(data)){

            isExist=true;

            exit=true;//满足条件，退出递归

        }

    }

    return isExist;

}

//数据

var data = {

	time: 1408536771253,

    testData:{

       queryHistory:{

            overtime:[],

            query:{time:'100'},

            name:'fdsafdsa'

       }

    }

};

var html = template('test', data);//渲染模板

document.getElementById('content').innerHTML = html;

</script>

</body>

</html>

注意：上面方法之所以用到全局变量，是因为我需要跳出递归，如果不使用全局变量去控制，那么递归时会导致每一个递归都会去执行，最后结果会有问题，因次我用到了一个exist变量作为退出递归的标志


页面输出结果如下：





artTemplate--模板使用自定义函数(1)的更多相关文章

  1. 在ecshop模板使用自定义函数

    https://blog.csdn.net/shaolinld/article/details/46400485 在ecshop模板使用自定义函数 可以增加自定义函数,在模板直接调用,例如: {$us ...

  2. 四、smarty模板的自定义函数

    smarty模板的自定义函数(这里介绍的是常用) 分为三个种类: 1.  变量调节器 2.  函数 3.  块函数 三个种类插件的用法: 1.  变量调解器的用法, <{$var|myfun:a ...

  3. 模板语言 自定义函数simple_tag

    模板语言自带的一些处理函数:通过管道符来处理 帮助方法:{{ item.event_start|date:"Y-m-d H:i:s"}}  转换成日期时间型{{ bio|trunc ...

  4. art-template自定义函数

    自定义函数 // 百分比计算 template.defaults.imports.percentage = function (num1, num2) { var res; if(!num1 & ...

  5. Thinkphp模板怎么使用自定义函数

    内置模板引擎支持对模板变量使用函数,并支持多个函数同时使用. 注意:自定义函数要放在项目应用目录/common/common.php中. 这里是关键. 模板变量的函数调用格式:{$varname|fu ...

  6. Thinkphp模板中使用自定义函数的方法

    注意:自定义函数要放在项目应用目录/common/common.php中. 这里是关键. 模板变量的函数调用格式:{$varname|function1|function2=arg1,arg2,### ...

  7. thinkphp模板中使用自定义函数

    注意:自定义函数要放在项目应用目录/common/common.php中. 这里是关键. 模板变量的函数调用格式:{$varname|function1|function2=arg1,arg2,### ...

  8. 模板自定义函数 template function

    sqlite3中的日期默认是UTC,当日期字段的默认值是CURRENT_TIMESTAMP时,这个日期和北京时间CST少了8小时. 网上建议说数据库里用UTC,读取数据时再转换为当地时间. web页面 ...

  9. django 笔记8 url模板 自定义函数 simple_tag

    感谢alex老师~ 知识点: URL - 两个没见 url>路由系统> 函数或类 > 返回字符串 Form表单提交: 提交 >url>函数或类中的方法 -.. HttpR ...

  10. 五，Smarty模板技术/引擎——自定义函数机制

    自建函数是smarty提供的函数,不允许修改,只能被调用: 自定义函数是自己编写函数,注册成为smarty的函数,之后可以被调用: 示例:使用smarty自定义函数的机制,编写一个函数myfun1,通 ...

随机推荐

  1. Netty堆外内存泄漏排查，这一篇全讲清楚了

    上篇文章介绍了Netty内存模型原理,由于Netty在使用不当会导致堆外内存泄漏,网上关于这方面的资料比较少,所以写下这篇文章,专门介绍排查Netty堆外内存相关的知识点,诊断工具,以及排查思路提供参 ...

  2. 【题解】LOJ2759. 「JOI 2014 Final」飞天鼠(最短路)

    [题解]LOJ2759. 「JOI 2014 Final」飞天鼠(最短路) 考虑最终答案的构成,一定是由很多飞行+一些上升+一些下降构成. 由于在任何一个点上升或者下降代价是一样的,所以: 对于上升操 ...

  3. 「洛谷P1306」斐波那契公约数 解题报告

    P1306 斐波那契公约数 题目描述 对于Fibonacci数列:1,1,2,3,5,8,13......大家应该很熟悉吧~~~但是现在有一个很"简单"问题:第n项和第m项的最大公 ...

  4. 机器学习实战笔记（一）- 使用SciKit-Learn做回归分析

    一.简介 这次学习的书籍主要是Hands-on Machine Learning with Scikit-Learn and TensorFlow(豆瓣:https://book.douban.com ...

  5. 14.python案例：爬取电影天堂中所有电视剧信息

    1.python案例:爬取电影天堂中所有电视剧信息 #!/usr/bin/env python3 # -*- coding: UTF-8 -*- '''======================== ...

  6. Java集合概述（上）

    Java集合概述(上) 前言 先说说,为什么要写这么一篇博客(我总是喜欢写原因).因为最近到年底了,正好又要准备面试,所以在做各方面的技术总结.而Java集合是Java非常重要的一部分,自己前前后后也 ...

  7. 在nginx服务器里面搭建好node.js本地服务器后，利用Node.js的FS模块，实现简单数据的写入和读取

    先在server.js里面引入: var fs = require('fs');   然后写入  // 往writeme.txt文件 写入一些内容     fs.writeFile('./writem ...

  8. 二分查找LintcodeNo14

    14First Position of Target 二分查找的基础题 STL lower_bound实现 class Solution { public: /** * @param nums: Th ...

  9. echarts更改坐标轴文字颜色及大小

    xAxis: { data: anameArr, axisLabel: { show: true, textStyle: { color: '#c3dbff', //更改坐标轴文字颜色 fontSiz ...

  10. H5录音音频可视化-实时波形频谱绘制、频率直方图

    这段时间给GitHub Recorder开源库添加了两个新的音频可视化功能,比以前单一的动态波形显示丰富了好多(下图后两行是不是比第一行看起来丰满些):趁热打铁写了一个音频可视化相关扩展测试代码,下面 ...