web前端开发javascript常用函数封装整理

by 前端开发者 · Published 2018年5月20日20:20:40 · Updated 2018年5月20日20:40:08

摘要：web前端开发javascript|前端开发者提问:怎么解决代码保存问题(换行,正负号)？我知道可以直接用“这个符号，但是有的浏览器不支持，我为了保持代码原格式，疯狂转义，求解决方案。如果是你，怎么items里的pr……

提问:怎么解决代码保存问题(换行,正负号)？我知道可以直接用“这个符号，但是有的浏览器不支持，我为了保持代码原格式，疯狂转义，求解决方案。

如果是你，怎么items里的pre怎么存储
html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a> lang=”en”> <head> <meta charset=”UTF-8″> <title>Document</title> <style type=”text/<a href="https://www.rokub.com/category/css" title="css">css</a>”> *{padding: 0;margin:0;} body,<a href="https://www.rokub.com/category/html" title="html">html</a>{height: 100%;width: 100%;overflow: hidden;} .box{height: 100%;} .left{position: relative;float: left;width: 250px;background: #f9f9f9;overflow-y: auto;} .right{box-sizing: border-box;padding: 20px;overflow: auto;min-width: 360px;} .sidebar li{list-style: none;width: 100%;box-sizing:border-box;padding:10px;text-indent: 10px;font:14px/1.2em ‘Microsoft YaHei’;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} .search{padding: 10px;border-bottom: 1px solid #999;} .search input{width:180px;padding: 6px;border-radius: 3px;border: 1px solid #ccc;color: #474747;} .sidebar li a{color: #474747;text-decoration: none;} .content_box{padding:20px 0;} .dir{text-indent: 20px; margin: 20px 0;} .pre{padding: 10px;border: 1px solid rgb(216,216,216) ;border-radius: 3px; background: rgb(250,250,250);font:14px/30px “-webkit-body”,’Microsoft YaHei’;overflow-x: auto;} *::-webkit-scrollbar { width:8px; height:8px; } *::-webkit-scrollbar-butto{ display: none; } *::-webkit-scrollbar-track { display: none; } *::-webkit-scrollbar-track-piece { background:#eee; } *::-webkit-scrollbar-thumb{ background:#aaa; border-radius:4px; } *::-webkit-scrollbar-corner { display: none; } *::-webkit-scrollbar-resizer { background:#FF0BEE; } </style> </head> <body> <div class=”left box” id=”sidebar_box”> <input type=”text” name=”” placeholder=”Search….” id=”search”> <ul class=”sidebar” id=”sidebar”> </ul> </div> <div class=”right box” id=”content_box”> <div id=”content”></div> </div> <script type=”text/javascript”> var side_template = “<li><a href=\”#${key}\” title=\”${title}\”>${title}</a></li>”, sidebar = document.getElementById(“sidebar”), content_template = “<div id=\”${key}\” class=\”content_box\”><h3>${title}</h3>${dir}<pre class=\”pre\”>${pre}</pre></div>”, content = document.getElementById(“content”), search = document.getElementById(“search”), items = [ { “title”:”添加事件”, “dir”:”添加事件方法函数,兼容IE浏览器以及其他浏览器 addEvent(对象,事件名称,函数,是否捕获时触发)”, “pre”:”\ function addEvent(obj,type,fn,capture){\ if(obj.addEventListener){\ obj.addEventListener(type,fn,capture);\ }else if(obj.attachEvent){\ obj.attachEvent(\”on\”+type,fn);\ }\ }” }, { “title”:”移除事件”, “dir”:”移除事件方法函数,兼容IE浏览器以及其他浏览器 removeEvent(对象,事件名称,函数,是否捕获时触发)”, “pre”:”\ function removeEvent(obj,type,fn,capture){\ if(obj.removeEventListener){\ obj.removeEventListener(type,fn,capture);\ }else if(obj.detachEvent){\ obj.detachEvent(\”on\”+type,fn);\ }\ } “ }, { “title”:”阻止默认行为”, “dir”:”阻止对象默认行为 preDef(Event对象)”, “pre”:”\ function preDef(ev){\ var ev = ev || window.event;\ if(ev.preventDefault){\ ev.preventDefault();\ }else {\ ev.returnValue = false;\ }\ }\ “}, { “title”:”获取触发事件目标”, “dir”:”获取触发事件的节点 getTarget(Event对象)”, “pre”:”\ function getTarget(ev){\ var ev = ev || window.event;\ if(ev.target){\ return ev.target;\ }else if(window.event.srcElement){\ return window.event.srcElement;\ }\ }\ “}, { “title”:”获取滚动条位置”, “dir”:”获取滚动条的位置，即滚动距离，返回的结果是一个对象 ”, “pre”:”\ function getSP(){\ return {\ top : document.documentElement.scrollTop || document.body.scrollTop,\ left : document.documentElement.scrollLeft || document.body.scrollLeft\ }\ }” }, { “title”:”获取可视化窗口大小”, “dir”:”获取可视化窗口大小”, “pre”:”\ function getWindow(){\ if(window.innerWidth !== void 0){\ return {\ width : window.innerWidth,\ height : window.innerHeight\ }\ }else{\ return {\ width : document.documentElement.clientWidth,\ height : document.documentElement.clientHeight\ }\ }\ } “ }, { “title”:”获取屏幕坐标”, “dir”:”获取鼠标的位置信息,该位置为鼠标在整个页面的位置，而不是可视化窗口的位置”, “pre”:”\ function getMouse(ev){\ if(ev.pageX !== void 0){\ return {x:ev.pageX,y:ev.pageY};\ }\ return {\ x:ev.clientX + document.body.scrollLeft – document.body.clientLeft,\ y:ev.clientY + document.body.scrollTop – document.body.clientTop\ }\ } “ }, { “title”:”<a href="https://www.rokub.com/category/javascript" title="js">js</a>拖拽效果(目标相对定位)”, “dir”:”实现<a href="https://www.rokub.com/category/javascript" title="js">js</a>的拖拽效果,利用相对定位实现 onDrop(dom节点)”, “pre”:”\ function onDrop(ele){\ if(ele.nodeType === 1){\ ele.style.position = \”relative\”;\ ele.onmousedown = function(ev){\ var ev = ev || window.event;\ var diffX = ev.clientX – parseInt(ele.style.left+\”0\”),\ diffY = ev.clientY – parseInt(ele.style.top+\”0\”);\ document.onmousemove = function(e){\ var e = e || window.event;\ ele.style.left = e.clientX – diffX + \”px\”;\ ele.style.top = e.clientY – diffY + \”px\”;\ };\ document.onmouseup = function(e){\ var e = e || window.event;\ this.onmousemove = null;\ this.onmouseup = null;\ };\ }\ }\ } “}, { “title”:”判断类型”, “dir”:”判断数据类型，返回首字母大写的字符串”, “pre”:”\ function getType(ob){\ return ({}).toString.call(ob).match(/(\\w+)\]$/)[1];\ }” }, { “title”:”数组去重”, “dir”:”返回没有重复值的新数组(多个NaN也视为重复) \ ES6最简 […new Set([1,2,3,1,2,1,4])] \ ES5最简 [1,2,3,1,4,1,2,1].filter(function(e,i,arr){return i===arr.indexOf(e)})”, “pre”:”\ function unique(arr){\ var a=[],hasNaN=false;\ for(var i=0;i<arr.length;i++){\ if(a.indexOf(arr[i])==-1) {\ if(arr[i]!==arr[i]){\ if(hasNaN){continue;}\ hasNaN = true;\ }\ a.push(arr[i]);\ }\ }\ return a;\ }” }, { “title”:”深度克隆”, “dir”:”实现深度克隆对象”, “pre”:”\ function clone(ob){\ if(typeof ob=== \”object\”){\ var newOb = ({}).toString.call(ob)===\”[object Array]\”?[]:{};\ for(var name in ob){\ newOb[name] = typeof ob[name]===\”object\”?clone(ob[name]):ob[name];\ }\ return newOb;\ }else{\ return ob;\ }\ }” }, { “title”:”获取时间”, “dir”:”\ 返回格式化后的时间,str为格式化样式,默认为(yyyy-MM-dd HH:mm:ss),date为时间对象，默认为当前时间\ “, “pre”:”\ function getTime(str,date){\ var str = str || \”yyyy-MM-dd HH:mm:ss\”;\ var date = date || new Date();\ var obj = {\ yyyy:date.getFullYear(),\ yy:(\”\”+ date.getFullYear()).slice(-2),\ M:date.getMonth()+1,\ MM:(\”0\”+ (date.getMonth()+1)).slice(-2),\ d:date.getDate(),\ dd:(\”0\” + date.getDate()).slice(-2),\ H:date.getHours(),\ HH:(\”0\” + date.getHours()).slice(-2),\ h:date.getHours() % 12,\ hh:(\”0\”+date.getHours() % 12).slice(-2),\ m:date.getMinutes(),\ mm:(\”0\” + date.getMinutes()).slice(-2),\ s:date.getSeconds(),\ ss:(\”0\” + date.getSeconds()).slice(-2),\ w:\”星期\”+[‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’][date.getDay()]\ };\ return str.replace(/([a-z]+)/ig,function($1){return obj[$1]});\ } “ }, { “title”:”随机产生颜色”, “dir”:”产生16进制的颜色值”, “pre”:”\ function getColor(){\ return \”#\”+Math.random().toString(16).substr(2,6);\ }\ “ }, { “title”:”天数跟秒转换”, “dir”:”天数跟秒之间的转换,适用于倒计时,秒杀.. 例如\”1天12小时12分32秒\”<==>130352之间相互转换”, “pre”:”\ function changeTime(t){\ if(typeof t === \”string\”){\ var num = 0;\ t.replace(/(\\d+)(天|小时|分|秒)/g,function(a,b,c){\ switch(c){\ case \”天\”: num+=(+b)*86400;break;\ case \”小时\”: num+=(+b)*3600;break;\ case \”分\”: num+=(+b)*60;break;\ case \”秒\”: num+=(+b);break;\ }\ });\ return num;\ }else if(typeof t === \”number\”){\ var time=\”\”,ob={\”天\”:86400,\”小时\”:3600,\”分\”:60,\”秒\”:1};\ if(t<0) return \”0秒\”;\ for(var name in ob){\ var num = ob[name];\ if(t>=num){\ time += (t/num|0)+name;\ t %= num;\ }\ }\ return time;\ }\ } “}, { “title”:”<a href="https://www.rokub.com/category/javascript" title="js">js</a>千分隔位”, “dir”:”每3位数加个逗号，保留两位小数 123456.454==>123,456.45″, “pre”:”\ function separator(str){\ if(!isNaN(+str)){\ str = (+str).toFixed(2);\ return str.replace(/\\B(?=(?:\\d{3})+\\.)/g,\”,\”);\ }\ } “ }, { “title”:”获取计算后样式”, “dir”:”获取某个节点计算后样式,参数为dom节点,属性名称”, “pre”:”\ function getCpStyle(ele,attribute){\ if(typeof getComputedStyle === \”function\”){\ return getComputedStyle(ele)[attribute];\ }else if(ele.currentStyle){\ return ele.currentStyle[attribute];\ }\ } “ }, { “title”:”获取XMLHTTPRequest对象”, “dir”:”返回一个XMLHTTPRequest对象”, “pre”:”\ function getXHR(){\ var xhr;\ if(window.XMLHttpRequest){\ xhr = new XMLHttpRequest();\ }else if(window.ActiveXObject){\ xhr = new ActiveXObject(\”Microsoft.XMLHttp\”);\ }\ return xhr;\ }”}, { “title”:”类名操作”, “dir”:”类似jq的toggleClass,没有就添加,有就删除”, “pre”:”\ function setClass(ele,className){\ if(ele.className !== void 0){\ var str = ele.className,reg=new RegExp(\”\\\\b\”+className+\”\\\\s\”);\ if(reg.test(str)){\ str=str.replace(reg,\”\”);\ }else{\ str += \” \”+className+\” \”;\ }\ ele.className = str.replace(/\\s+/,\” \”);\ }\ }” }, { “title”:”cookie操作”, “dir”:”非本人写的，从mdn拉下来的，具体的可以去mdn看”, “pre”:”\ var docCookies = {\ getItem: function (sKey) {\ return decodeURIComponent(document.cookie.replace(new RegExp(\”(?:(?:^|.*;)\\\\s*\” + encodeURIComponent(sKey).replace(/[\\-\\.\\+\\*]/g, \”\\\\$&\”) + \”\\\\s*\\\\=\\\\s*([^;]*).*$)|^.*$\”), \”$1\”)) || null;\ },\ setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {\ if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }\ var sExpires = \”\”;\ if (vEnd) {\ switch (vEnd.constructor) {\ case Number:\ sExpires = vEnd === Infinity ? \”; expires=Fri, 31 Dec 9999 23:59:59 GMT\” : \”; max-age=\” + vEnd;\ break;\ case String:\ sExpires = \”; expires=\” + vEnd;\ break;\ case Date:\ sExpires = \”; expires=\” + vEnd.toUTCString();\ break;\ }\ }\ document.cookie = encodeURIComponent(sKey) + \”=\” + encodeURIComponent(sValue) + sExpires + (sDomain ? \”; domain=\” + sDomain : \”\”) + (sPath ? \”; path=\” + sPath : \”\”) + (bSecure ? \”; secure\” : \”\”);\ return true;\ },\ removeItem: function (sKey, sPath, sDomain) {\ if (!sKey || !this.hasItem(sKey)) { return false; }\ document.cookie = encodeURIComponent(sKey) + \”=; expires=Thu, 01 Jan 1970 00:00:00 GMT\” + ( sDomain ? \”; domain=\” + sDomain : \”\”) + ( sPath ? \”; path=\” + sPath : \”\”);\ return true;\ },\ hasItem: function (sKey) {\ return (new RegExp(\”(?:^|;\\\\s*)\” + encodeURIComponent(sKey).replace(/[\\-\\.\\+\\*]/g, \”\\\\$&\”) + \”\\\\s*\\\\=\”)).test(document.cookie);\ }\ }; “}, { “title” :”Ajax对象封装”, “dir”:”ajax”, “pre”:”\ var Ajax={\ get: function(url, fn) {\ var obj = new XMLHttpRequest();\ obj.open(‘GET’, url, true);\ obj.onreadystatechange = function() {\ if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) {\ fn.call(this, obj.responseText); \ }\ };\ obj.send();\ },\ post: function (url, data, fn) { \ var obj = new XMLHttpRequest();\ obj.open(\”POST\”, url, true);\ obj.setRequestHeader(\”Content-type\”, \”application/x-www-form-urlencoded\”);\ obj.onreadystatechange = function() {\ if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { \ fn.call(this, obj.responseText);\ }\ };\ obj.send(data);\ }\ }” } ]; //初始化 var sidebarInnerHTML = “”,contentInnerHTML=””,AtoNum=97; items.forEach(function(item,i) { item.pre = format(item.pre); item.filteri = i; sidebarInnerHTML+=replace(side_template,item,i); contentInnerHTML+=replace(content_template,item,i); }); sidebar.innerHTML = sidebarInnerHTML; content.innerHTML = contentInnerHTML; search.onkeyup = function(e){ var e = e || window.event; if(e.keyCode===13||!this.value){ Search(); } } //工具方法 function replace(str,item,i) { return str.replace(/\${(\w+)}/g,function(a,b){ if(item!==void 0){return item;} if(b === “key”){return String.fromCharCode(AtoNum+i);} return ”; }) } function format(str) { return str.replace(/(;|{|\b|,)(\s{2})|}}|;}|(<|>)/g,function (a,b,c,d) { if(b||c){return b+”\n”+c;} else if(d){if(d===”<“) {return “<”;} else{return “>”;}} else {if(a===”}}”) {return “}\n}”; }else{ return “;\n}”;}} }) } function changeSidebar(items){ var sidebarInnerHTML = “”; items.forEach(function(item) { sidebarInnerHTML+=replace(side_template,item,item.filteri); }); sidebar.innerHTML = sidebarInnerHTML; } function Search(){ var value = search.value; if(!value){changeSidebar(items);} else{ changeSidebar(items.filter(function(item,i){ return item.title.indexOf(value)>-1; })); } } </script> </body> </<a href="https://www.rokub.com/category/html" title="html">html</a>>

web前端开发javascript|网站前端开发

https://www.rokub.com

本文来自：前端开发者 » 《web前端开发javascript常用函数封装整理》

如转载，请注明本文链接: https://www.rokub.com/2946.html