?一、防止ie瀏覽器按backspace回退頁面

//防止后退返回頁面,如果非文本框、密碼框、文本域控件，或控件非可用裝填，則禁用后退按鍵 var ua=navigator.userAgent.toLowerCase(); var isIE=ua.indexOf("msie")>-1; window.document.onkeydown =function(e){var e = e;var obj; //事件源var t; //控件類型var keyCode; //按鍵ascii碼if(isIE){e = event || window.event;keyCode = e.keyCode;}else{keyCode = e.keyCode || e.which;if(keyCode==undefined||keyCode==null||keyCode==''){keyCode=String.fromCharCode(e.charCode);}}obj = e.target || e.srcElement; //獲取事件源 t = obj.type || obj.getAttribute('type'); if (e.keyCode==8 && (obj.readOnly || obj.disabled || (t != "password" && t != "text" && t != "textarea" && obj.tagName!=='INPUT'))) {return false;} };

?

二、獲取頁面傳參?

// 獲取參數
var name = window.location.search; //獲取？后面的字符串
function getUrlParam(name) {var urlArr = [],urlObj={};name = decodeURI(name);urlArr=name.substring(1).split('&');for(var i =0;i<urlArr.length;i++){var valueArr=urlArr[i].split('=');urlObj[valueArr[0]]=valueArr[1];}return urlObj; }

?

三、加載動畫（避免重復點擊機制），初始化ajax（以jquery為例）

1 jQuery.bootstrapLoading = { 2 start: function (options) { 3 var defaults = { 4 opacity: 1, 5 //loading頁面透明度 6 backgroundColor: "rgba(0,0,0,0.3)", 7 //loading頁面背景色 8 borderColor: "#bbb", 9 //提示邊框顏色 10 borderWidth: 0, 11 //提示邊框寬度 12 borderStyle: "solid", 13 //提示邊框樣式 14 loadingTips: "", 15 //提示文本 16 TipsColor: "#666", 17 //提示顏色 18 delayTime: 1000, 19 //頁面加載完成后，加載頁面漸出速度 20 zindex: 99999999, 21 //loading頁面層次 22 sleep: 0, 23 //設置掛起,等于0時則無需掛起 24 width: '150px', 25 height: '165px', 26 } 27 var options = $.extend(defaults, options); 28 29 //獲取頁面寬高 30 var _PageHeight = document.documentElement.clientHeight, 31 _PageWidth = document.documentElement.clientWidth; 32 //獲取頁面路徑 33 var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/"; 34 var shortenedUrl = window.document.location.href.replace(baseUrl, "").replace(/\/\//g, "/").replace("//", "/"); 35 if(shortenedUrl.startsWith("/")){ 36 shortenedUrl = shortenedUrl.substring(1); 37 } 38 if(shortenedUrl.indexOf("web/")==0){ 39 baseUrl = baseUrl + shortenedUrl.substring(0, shortenedUrl.indexOf("/")); 40 } 41 //在頁面未加載完畢之前顯示的loading Html自定義內容 42 var _LoadingHtml = '<div id="loadingPage" style="position:fixed;left:0;top:0;_position: absolute;width:100%;height:' + _PageHeight + 'px;background:' + options.backgroundColor + ';opacity:' + options.opacity + ';filter:alpha(opacity=' + options.opacity * 100 + ');z-index:' + options.zindex + 43 ';"><div id="loadingTips" class="loadingTips" style="position: absolute; cursor1: wait; border-color:' + options.borderColor + 44 ';background-position:50%; width: '+options.width+';height:'+options.height+';border-style:' + options.borderStyle + ';border-width:' + options.borderWidth + 'px; line-height:80px; padding: 15px;border-radius:10px; background: url('+baseUrl+'/images/loading.gif) no-repeat center; color:' + options.TipsColor + ';font-size:20px;">' 45 + options.loadingTips + '</div></div>'; 46 47 //呈現loading效果 48 $("body").append(_LoadingHtml); 49 //獲取loading提示框寬高 50 var _LoadingTipsH = document.getElementById("loadingTips").clientHeight, 51 _LoadingTipsW = document.getElementById("loadingTips").clientWidth; 52 53 //計算距離，讓loading提示框保持在屏幕上下左右居中 54 var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0, 55 _LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0; 56 57 $(".loadingTips").css({ 58 "left": _LoadingLeft + "px", 59 "top": _LoadingTop + "px" 60 }); 61 62 //監聽頁面加載狀態 63 // document.onreadystatechange = PageLoaded; 64 65 //當頁面加載完成后執行 66 // function PageLoaded() { 67 // if (document.readyState == "complete") { 68 // var loadingMask = $('#loadingPage'); 69 70 // setTimeout(function () { 71 // loadingMask.animate({ 72 // "opacity": 0 73 // }, 74 // options.delayTime, 75 // function () { 76 // $(this).hide(); 77 78 // }); 79 80 // }, 81 // options.sleep); 82 83 // } 84 // } 85 }, 86 end: function () { 87 $("#loadingPage").remove(); 88 } 89 } 90 //初始化ajax 91 $.ajaxSetup({ 92 beforeSend:function(xhr){ 93 $.bootstrapLoading.start(); 94 }, 95 complete: function () { 96 $.bootstrapLoading.end(); 97 } 98 });

4、時間格式化

Date.prototype.format=function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小時 "H+" : this.getHours(), //小時 "m+" : this.getMinutes(), //分 "s+" : this.getSeconds(), //秒 "q+" : Math.floor((this.getMonth()+3)/3), //季度 "S" : this.getMilliseconds() //毫秒 }; var week = { "0" : "/u65e5", "1" : "/u4e00", "2" : "/u4e8c", "3" : "/u4e09", "4" : "/u56db", "5" : "/u4e94", "6" : "/u516d" }; if(/(y+)/.test(fmt)){ fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); } if(/(E+)/.test(fmt)){ fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]); } for(var k in o){ if(new RegExp("("+ k +")").test(fmt)){ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); } } return fmt; } function getDate(strDate){if(strDate && strDate!=""){var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');return date;}return undefined; }function formatDate(date, fmt){var format = fmt || "yyyy-MM-dd hh:mm:ss";if(date instanceof Date){return date.format(format);}else if(typeof date == 'string'){var d = getDate(date);if(d){return d.format(format);}return '';}else{return date;} }

?5、格式化數據（樹狀結構）

1 TreeDataFormat = { 2 format : function(conf) { 3 var idField, textField, parentField, iconClsField; 4 idField = conf.idField || 'id'; 5 textField = conf.textField || 'text'; 6 parentField = conf.parentField || 'pid'; 7 iconClsField = conf.iconClsField || 'iconCls'; 8 data = conf.data 9 var i, l, treeData = [], tmpMap = []; 10 for (i = 0, l = data.length; i < l; i++) { 11 data[i]['id'] = data[i][idField]; 12 data[i]['text'] = data[i][textField]; 13 data[i]['pid'] = data[i][parentField]; 14 data[i]['iconCls'] = data[i][iconClsField] || 'anticon icon-nav'; 15 data[i]['children'] = []; 16 tmpMap[data[i][idField]] = data[i]; 17 } 18 for (i = 0, l = data.length; i < l; i++) { 19 if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) { 20 if (!tmpMap[data[i][parentField]]['children']) 21 tmpMap[data[i][parentField]]['children'] = []; 22 data[i][parentField] 23 data[i]['text'] = data[i][textField]; 24 tmpMap[data[i][parentField]]['children'].push(data[i]); 25 } else { 26 data[i]['text'] = data[i][textField]; 27 treeData.push(data[i]); 28 } 29 } 30 return treeData; 31 }, 32 getChildrenByPid:function(treeData, pidField, pid, result){ 33 result = result || []; 34 for (var i = 0; i < treeData.length; i++) { 35 if (treeData[i][pidField] === pid) 36 result.push(treeData[i]); 37 else { 38 if (treeData[i].hasOwnProperty("children")) { 39 result = this.getChildrenByPid(treeData[i].children, pidField, pid, result); 40 } 41 } 42 } 43 return result; 44 } 45 }

?

轉載于:https://www.cnblogs.com/cutone/p/7125507.html

總結

以上是生活随笔為你收集整理的一个前端框架应该有的一些公共函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。