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

来源：互联网发布：怀孕软件下载编辑：程序博客网时间：2024/06/07 05:40
我的常用自定义函数

<!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 undefinedif((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 keygIsExist = 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>
0 0