artTemplate--模板使用自定义函数(2)

我的常用自定义函数

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>helper-demo</title>
    <script src="../dist/template.js"></script>
    <script src="../dist/jquery-1.11.3.js"></script>
</head>

<body>
<h1>辅助方法</h1>

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

    {{if hasEmptyProperties(testData)}}
    查询成功,无该用户
    {{else}}
    查询该成功:xxx
    {{/if}}


    {{if isBlank(testData.queryHistory,'overtime')}}
    是空的
    {{else}}
    不是空的
    {{/if}}


    {{if isBlank(testData.queryHistory)}}
    是空的
    {{else}}
    不是空的
    {{/if}}


    {{if isEmptyProperty(testData.queryHistory,"time")}}
    是空的
    {{else}}
    不是空的
    {{/if}}

</script>

<script>
  //递归需要用到的变量
var gExit = false;
var gIsExist = false;
var gIsValid = false;


function initGobalVariables(){
	
	 gExit = false;
	 gIsExist = false;
	 gIsValid = false;
}


/**
 * 判断传入的json对象或者json对象指定的属性是否为空
 * @param data json对象
 * @param key 属性
 * @return boolean
 */
template.helper("isBlank", function (data,key) {
    debugger
    var isBlank = false;
    if(typeof (key) =="undefined"||key.length==0){

        if (typeof (data) == "object") {
            if ($.isEmptyObject(data)) {
                isBlank= true;
            }
        } else  if((typeof (data) =="undefined")){
            isBlank = true;
        }

    }else{

        if (typeof (data) == "object") {
            if(typeof (data[key]) == "object"|| typeof (data[key]) == "undefined"){

                if ($.isEmptyObject(data[key])) {
                    isBlank = true;
                }
            }

        } else {

            if((typeof (data) =="undefined")){
                isBlank = true;
            }
        }

    }

    return isBlank;


});

/**
 * 判断当前对象中指定属性是否为空(不推荐使用)
 * 
 * <pre>
 * 适用于几个属性判断或运算
 * 
 * 如:{{testData.queryHistory.overtime==null || testData.queryHistory.name ==null}}
 * 
 * 用法:
 * {{if isEmptyProperties(testData.queryHistory,"['overtime','name']")}}
 * 空的
 * {else}}
 * 是空的
 * {/if}}
 * </pre>
 * 
 * @Param data
 *            传入的js或者json对象 return {boolean}
 * 
 */
template.helper("isEmptyProperty", function(data, keys) {
	
	var keys = [ keys ];
	var flag = false;
	if ($.isEmptyObject(data)) {
		flag = true;
	} else {
		$.each(keys, function(i, key) {
			
			if (flag == true) {
				return false;
			}
			flag = isEmpty(data, key);

		});
	}
	// 维护全局变量
	initGobalVariables();
	return flag;
});

/**
 * 递归判断当前被指定的属性在当前对象中是否为空
 * 
 * @param data
 *            Json对象
 * @returns {boolean}
 */
function isEmpty(data, key) {
	
	// 中止执行当前递归
	if (gExit == true) {
		return gIsExist;
	}
	if (typeof data == "object") {
		if ($.isEmptyObject(data)) {
			gIsExist = true;
			gExit = true;// 满足条件,退出递归
		} else {
			$.each(data, function(k, v) {
				
				// 当前属性为传入的指定属性时
				if (k == key) {
					if ($.isEmptyObject(data[k])) {
						gIsExist = true;
						gExit = true;// 满足条件,退出递归
					} else {
						gIsExist = false;
						gExit = true;// 满足条件,退出递归

					}
					gIsValid = true;// 当前指定属性有效
					return false;// 退出当前迭代
				} else {
					if ($.isEmptyObject(data[k])) {
						return true;
					}
					gIsExist = isEmpty(v, key);
				}
			});
		}
	} else {
		// jsonOb is a number or string or undefined
		if((typeof (data) =="undefined")){
			gIsExist = true;
			gExit = true;// 满足条件,退出递归
		}
	}

	if (!gIsValid) {
		gIsExist = true;
	}
	return gIsExist;
}

/**
 * 对指定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);
	// 维护全局变量
	gExit = false;
	gIsExist = false;
	return isInvalid;
});
/**
 * 递归判断当前对象是否存在空属性
 * 
 * @param data
 *            Json对象
 * @returns {boolean}
 */
function isExistEmptyProperties(data) {
	// 中止执行当前递归
	if (gExit == true) {
		return gIsExist;
	}
	if (typeof data == "object") {
		if ($.isEmptyObject(data)) {
			gIsExist = true;
			gExit = true;// 满足条件,退出递归
		} else {
			$.each(data, function(k, v) {
				// k is either an array index or object key
				gIsExist = isExistEmptyProperties(v);
			});
		}
	} else{
		if((typeof (data) =="undefined")){
			gIsExist = true;
			gExit = true;// 满足条件,退出递归
		}

    }
	return gIsExist;
}


    /**
     * 对日期进行格式化,
     *
     * @param date
     *            要格式化的日期
     * @param format
     *            进行格式化的模式字符串 支持的模式字母有: y:年, M:年中的月份(1-12), d:月份中的天(1-31),
     *            h:小时(0-23), m:分(0-59), s:秒(0-59), S:毫秒(0-999), q:季度(1-4)
     * @return String
     * @author yanis.wang
     * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
     */
    template.helper('dateFormat', function (date, format) {

        if (typeof date === "string") {
            var mts = date.match(/(/Date((d+))/)/);
            if (mts && mts.length >= 3) {
                date = parseInt(mts[2]);
            }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
            return "";
        }

        var map = {
            "M": date.getMonth() + 1, // 月份
            "d": date.getDate(), // 日
            "h": date.getHours(), // 小时
            "m": date.getMinutes(), // 分
            "s": date.getSeconds(), // 秒
            "q": Math.floor((date.getMonth() + 3) / 3), // 季度
            "S": date.getMilliseconds()
            // 毫秒
        };

        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
            var v = map[t];
            if (v !== undefined) {
                if (all.length > 1) {
                    v = '0' + v;
                    v = v.substr(v.length - 2);
                }
                return v;
            } else if (t === 'y') {
                return (date.getFullYear() + '').substr(4 - all.length);
            }
            return all;
        });
        return format;
    });


    //数据
    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>



原文地址:https://www.cnblogs.com/evan-liang/p/12233956.html