一个菜鸟的互联网技术分享博客
您的位置: 主页 > 常用函数
advertisement

常用函数

工作时整理:

  1. var Methods = (function () {  
  2.     return {  
  3.         // 随机颜色  
  4.         randomColor: function () {  
  5.             var color = '#'  
  6.             for (let i = 0; i < 6; i++) {  
  7.                 var num = parseInt(Math.random().toFixed(2) * 16);  
  8.                 color += num.toString(16);  
  9.             }  
  10.             return color  
  11.         },  
  12.         //产生区间随机数  
  13.         randomNum(min, max, bool) { //bool是表示是否可等于最大值  
  14.             return (Math.floor(Math.random() * (max - min + bool) + min));  
  15.         },  
  16.         //数组去重  
  17.         arrayUniq(arr) {  
  18.             var list = [];  
  19.             var leng = arr.length  
  20.             for (var i = 0; i < leng; i++) {  
  21.                 if (list.indexOf(arr[i]) === -1) {  
  22.                     list.push(arr[i]);  
  23.                 }  
  24.             }  
  25.             return list  
  26.         },  
  27.         //数组乱序  
  28.         arrayRandom(arr) {  
  29.             arr.sort(function () {  
  30.                 return Math.random() - 0.5  
  31.             })  
  32.             return arr  
  33.         },  
  34.         //拆分url变成对象  
  35.         urlSplit(url) {  
  36.             var list = url.split('?')[1].split('&');  
  37.             var leng = list.length;  
  38.             let obj = {}  
  39.             for (let i = 0; i < leng; i++) {  
  40.                 var key = list[i].split('=')[0];  
  41.                 var val = list[i].split('=')[1];  
  42.                 obj[key] = val  
  43.             }  
  44.             return obj  
  45.         },  
  46.         //将对象拼接到url中  
  47.         urlJoin(url, obj) {  
  48.             var list = []  
  49.             for (var key in obj) {  
  50.                 if (obj.hasOwnProperty(key)) {  
  51.                     list.push(`${key}=${obj[key]}`)  
  52.                 }  
  53.             }  
  54.             return `${url}?${list.join('&')}`  
  55.         },  
  56.         // 设置元素CSS样式  
  57.         setStyle(elem, style) {  
  58.             for (var str in style) {  
  59.                 elem.style[str] = style[str];  
  60.             }  
  61.         },  
  62.         // Ajax请求函数  
  63.         ajaxTool(method, url, data, fn) {  
  64.             var xhr = new XMLHttpRequest();  
  65.             xhr.open(method, url);  
  66.             xhr.send(data || '')  
  67.             xhr.addEventListener('load', function () {  
  68.                 if (xhr.readyState === 4 && xhr.status === 200) {  
  69.                     fn(this.response)  
  70.                 } else {  
  71.                     fn('err')  
  72.                 }  
  73.   
  74.             })  
  75.         },  
  76.         //拖拽事件  
  77.         mouseMove(ele, parent) {  
  78.             ele.addEventListener('mousedown', moveHandler);  
  79.             ele.style.position = 'absolute'  
  80.   
  81.             function moveHandler(e) {  
  82.                 if (e.type === 'mousedown') {  
  83.                     parent.ele = this;  
  84.                     parent.point = {  
  85.                         x: e.offsetX,  
  86.                         y: e.offsetY  
  87.                     }  
  88.                     parent.addEventListener('mousemove', moveHandler);  
  89.                     parent.addEventListener('mouseup', moveHandler);  
  90.                 } else if (e.type === 'mousemove') {  
  91.                     this.ele.style.left = e.x - this.point.x + "px";  
  92.                     this.ele.style.top = e.y - this.point.y + "px";  
  93.                 } else if (e.type === 'mouseup') {  
  94.                     parent.removeEventListener("mousemove", moveHandler);  
  95.                     parent.ele = null;  
  96.                     parent.point = null;  
  97.                 }  
  98.             }  
  99.         },  
  100.         //继承  
  101.         inherit(father, son) {  
  102.             function F() {} //使用闭包产生私有函数  
  103.             (function (father, son) { ////新建一个立即执行函数,(类似雅虎网站的继承写法)  
  104.                 F.prototype = father.prototype; //私有函数取出父类的原型  
  105.                 son.prototype = new F(); //实例化私有函数,并将对象赋给子类的原型  
  106.                 son.prototype.superClass = father; //自定义子类的超类等于父类  
  107.                 son.prototype.constructor = son; //将子类的构造函数指向自己,否则是父类(因为原型链上的constructor是父类)  
  108.             }(father, son))  
  109.         },  
  110.         //深复制  
  111.         deepCopy(org, tag) {  
  112.             var tag = tag || {}; //初始化要复制的对象  
  113.             var name = Object.getOwnPropertyNames(org); //获取该对象的属性名,以字符串数组返回  
  114.             for (var i = 0; i < name.length; i++) { //遍历对象  
  115.                 var desc = Object.getOwnPropertyDescriptor(org, name[i]); //获取对象的属性描述对象,无引用关系,返回另一个对象,改变时原对象不发生变化(复制的关键)  
  116.                 if (typeof desc.value === 'object' && desc.value !== null) { //若遍历的每一项非空且为对象,则为引用值,则进行下一步  
  117.                     var obj = desc.value.toString() === '[object Object]' ? {} : []; //判断是数组还是对象  
  118.                     Object.defineProperty(tag, name[i], { //设置对象属性值,前三个的值是返回true或false  
  119.                         configurable: desc.configurable, //是否可删除可替换  
  120.                         enumerable: desc.enumerable, //是否可枚举可遍历  
  121.                         writable: desc.writable, //是否可写入  
  122.                         value: obj //对象的值  
  123.                     });  
  124.                     this.deepCopy(desc.value, obj); //再次执行函数  
  125.                 } else {  
  126.                     Object.defineProperty(tag, name[i], desc); //否则直接将该对象的属性值进行复制(原始值)  
  127.                 }  
  128.             }  
  129.             return tag;  
  130.         },  
  131.         //获取伪元素  
  132.         pseudoEle(ele, type) {  
  133.             return window.getComputedStyle(ele, type)  
  134.         },  
  135.         //获取数据类型  
  136.         getType(data) {  
  137.             var type = typeof data;  
  138.             var obj = {  
  139.                 '[object Array]': 'array',  
  140.                 '[object Object]': 'object'  
  141.             }  
  142.             if (data === null) {  
  143.                 return 'null'  
  144.             } else if (type === 'object') {  
  145.                 var key = Object.prototype.toString.call(data);  
  146.                 return obj[key];  
  147.             } else {  
  148.                 return type  
  149.             }  
  150.         },  
  151.         // 在某元素(after)之后插入元素(target)  
  152.         insertAfter(parent, after, target) {  
  153.             before = after.nextElementSibling;  
  154.             console.log(before);  
  155.   
  156.             if (before == null) {  
  157.                 parent.appendChild(target)  
  158.             } else {  
  159.                 parent.insertBefore(target, before)  
  160.             }  
  161.         },  
  162.         //浏览器事件兼容函数  
  163.         addHandler(ele, type, handle) {  
  164.             if (ele.addEventListener) {  
  165.                 ele.addEventListener(type, handle, false)  
  166.             } else if (ele.attachEvent) {  
  167.                 ele.attachEvent('on' + type, function () {  
  168.                     handle.call(ele)  
  169.                 })  
  170.             } else {  
  171.                 ele['on' + type] = handle  
  172.             }  
  173.         },  
  174.         // 取消事件冒泡  
  175.         stopBubble(event) {  
  176.             event = event || window.event  
  177.             if (event.stopPropagation) {  
  178.                 event.stopPropagation()  
  179.             } else {  
  180.                 event.cancelBubble()  
  181.             }  
  182.         },  
  183.         //取消默认事件  
  184.         stopDefault(event) {  
  185.             event = event || window.event  
  186.             if (event.preventDefault) {  
  187.                 event.preventDefault();  
  188.             } else {  
  189.                 event.returnValue = false;  
  190.             }  
  191.         },  
  192.         // cookie操作(time是小时)  
  193.         cookieUse(type, data, name, time = 1) {  
  194.             switch (type) {  
  195.                 case 'add':  
  196.                     var date = new Date()  
  197.                     date.setHours(date.getHours() + time)  
  198.                     document.cookie = name + '=' + JSON.stringify(data) + ";expires=" + date.toString();  
  199.                     break;  
  200.                 case 'del':  
  201.                     document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";  
  202.                     break;  
  203.                 case 'find':  
  204.                     var arr = document.cookie.split(';')  
  205.                     var leng = arr.length;  
  206.                     for (let i = 0; i < leng; i++) {  
  207.                         if (arr[i].split('=')[0] === name) {  
  208.                             return JSON.parse(arr[i].split('=')[1]);  
  209.                         }  
  210.                     }  
  211.                     break;  
  212.                 default:  
  213.                     break;  
  214.             }  
  215.         },  
  216.         // 缓存storage使用  
  217.         storageUse(method, type, name, data) {  
  218.             var obj = {}  
  219.             if (method === 'session') {  
  220.                 obj = sessionStorage  
  221.             } else if (method === 'local') {  
  222.                 obj = localStorage  
  223.             } else {  
  224.                 return;  
  225.             }  
  226.             switch (type) {  
  227.                 case 'add':  
  228.                     obj.setItem(name, JSON.stringify(data))  
  229.                     break;  
  230.                 case 'del':  
  231.                     obj.removeItem(name);  
  232.                     break;  
  233.                 case 'delAll':  
  234.                     obj.clear();  
  235.                     break;  
  236.                 case 'find':  
  237.                     return JSON.parse(obj[name])  
  238.                 default:  
  239.                     break;  
  240.             }  
  241.         }  
  242.     }  
  243. }())  

zhangren.online
上一篇:VUE知识点集锦
下一篇:jquery文字左右无缝滚动

您可能喜欢

​如何将自己写的代码上传到github上

​如何将自己写的代码上传到github上

​CSS气泡对话框

​CSS气泡对话框

​jQuery点击小图展示大图

​jQuery点击小图展示大图

​两种ajax渲染实现翻页

​两种ajax渲染实现翻页

​web前端开发之手机端开发

​web前端开发之手机端开发

回到顶部