artTemplate--模板使用自定義函式(2)
阿新 • • 發佈:2018-12-30
<!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>