zoukankan      html  css  js  c++  java
  • 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>
    
    


  • 相关阅读:
    工具推荐-css3渐变生成工具
    IE6bug-overflow不能隐藏的bug
    cs3属性操作js
    多级联动下拉菜单(原生js)
    js表单验证大全
    js-运动框架(时间版)
    LeetCode 677. 键值映射
    LeetCode 28. Implement strStr()
    计网学习笔记(5)
    计网学习笔记(4)
  • 原文地址:https://www.cnblogs.com/evan-liang/p/12233956.html
Copyright © 2011-2022 走看看