首页-教程-Web前端

常用的前端JavaScript方法封装

 2867

制作网站的时候经常会涉及一些JS方法，这边文章分享一些常用的前端JavaScript方法封装，希望对大家有用。


1、输入一个值，返回其数据类型**

  1. function type(para) {
  2.     return Object.prototype.toString.call(para)
  3. }


2、数组去重

  1. function unique1(arr) {
  2.     return [...new Set(arr)]
  3. }
  4. function unique2(arr) {
  5.     var obj = {};
  6.     return arr.filter(ele => {
  7.         if (!obj[ele]) {
  8.             obj[ele] = true;
  9.             return true;
  10.         }
  11.     })
  12. }
  13. function unique3(arr) {
  14.     var result = [];
  15.     arr.forEach(ele => {
  16.         if (result.indexOf(ele) == -1) {
  17.             result.push(ele)
  18.         }
  19.     })
  20.     return result;
  21. }


3、字符串去重

  1. String.prototype.unique = function () {
  2.     var obj = {},
  3.         str = '',
  4.         len = this.length;
  5.     for (var i = 0; i < len; i++) {
  6.         if (!obj[this[i]]) {
  7.             str += this[i];
  8.             obj[this[i]] = true;
  9.         }
  10.     }
  11.     return str;
  12. }

去除连续的字符串

  1. function uniq(str) {
  2.     return str.replace(/(\w)\1+/g, '$1')
  3. }

去除字符串空格

  1. const trim = function(str, type) { // 去除空格， type:  1-所有空格  2-前后空格  3-前空格 4-后空格
  2.   type = type || 1
  3.   switch (type) {
  4.     case 1:
  5.       return str.replace(/\s+/g, '')
  6.     case 2:
  7.       return str.replace(/(^\s*)|(\s*$)/g, '')
  8.     case 3:
  9.       return str.replace(/(^\s*)/g, '')
  10.     case 4:
  11.       return str.replace(/(\s*$)/g, '')
  12.     default:
  13.       return str
  14.   }
  15. }


4、深拷贝 浅拷贝

  1. //深克隆（深克隆不考虑函数）
  2. function deepClone(obj, result) {
  3.     var result = result || {};
  4.     for (var prop in obj) {
  5.         if (obj.hasOwnProperty(prop)) {
  6.             if (typeof obj[prop] == 'object' && obj[prop] !== null) {
  7.                 // 引用值(obj/array)且不为null
  8.                 if (Object.prototype.toString.call(obj[prop]) == '[object Object]') {
  9.                     // 对象
  10.                     result[prop] = {};
  11.                 } else {
  12.                     // 数组
  13.                     result[prop] = [];
  14.                 }
  15.                 deepClone(obj[prop], result[prop])
  16.     } else {
  17.         // 原始值或func
  18.         result[prop] = obj[prop]
  19.     }
  20.   }
  21. }
  22. return result;
  23. }
  24. // 深浅克隆是针对引用值
  25. function deepClone(target) {
  26.     if (typeof (target) !== 'object') {
  27.         return target;
  28.     }
  29.     var result;
  30.     if (Object.prototype.toString.call(target) == '[object Array]') {
  31.         // 数组
  32.         result = []
  33.     } else {
  34.         // 对象
  35.         result = {};
  36.     }
  37.     for (var prop in target) {
  38.         if (target.hasOwnProperty(prop)) {
  39.             result[prop] = deepClone(target[prop])
  40.         }
  41.     }
  42.     return result;
  43. }
  44. // 无法复制函数
  45. var o1 = jsON.parse(jsON.stringify(obj1));


5、reverse底层原理和扩展

  1. // 改变原数组
  2. Array.prototype.myReverse = function () {
  3.     var len = this.length;
  4.     for (var i = 0; i < len; i++) {
  5.         var temp = this[i];
  6.         this[i] = this[len - 1 - i];
  7.         this[len - 1 - i] = temp;
  8.     }
  9.     return this;
  10. }


6、圣杯模式的继承

  1. function inherit(Target, Origin) {
  2.     function F() {};
  3.     F.prototype = Origin.prototype;
  4.     Target.prototype = new F();
  5.     Target.prototype.constructor = Target;
  6.     // 最终的原型指向
  7.     Target.prop.uber = Origin.prototype;
  8. }


7、找出字符串中第一次只出现一次的字母

  1. String.prototype.firstAppear = function () {
  2.     var obj = {},
  3.         len = this.length;
  4.     for (var i = 0; i < len; i++) {
  5.         if (obj[this[i]]) {
  6.             obj[this[i]]++;
  7.         } else {
  8.             obj[this[i]] = 1;
  9.         }
  10.     }
  11.     for (var prop in obj) {
  12.        if (obj[prop] == 1) {
  13.          return prop;
  14.        }
  15.     }
  16. }


8、找元素的第n级父元素

  1. function parents(ele, n) {
  2.     while (ele && n) {
  3.         ele = ele.parentElement ? ele.parentElement : ele.parentNode;
  4.         n--;
  5.     }
  6.     return ele;
  7. }


9、 返回元素的第n个兄弟节点

  1. function retSibling(e, n) {
  2.     while (e && n) {
  3.         if (n > 0) {
  4.             if (e.nextElementSibling) {
  5.                 e = e.nextElementSibling;
  6.             } else {
  7.                 for (e = e.nextSibling; e && e.nodeType !== 1; e = e.nextSibling);
  8.             }
  9.             n--;
  10.         } else {
  11.             if (e.previousElementSibling) {
  12.                 e = e.previousElementSibling;
  13.             } else {
  14.                 for (e = e.previousElementSibling; e && e.nodeType !== 1; e = e.previousElementSibling);
  15.             }
  16.             n++;
  17.         }
  18.     }
  19.     return e;
  20. }


10、封装mychildren，解决浏览器的兼容问题

  1. function myChildren(e) {
  2.     var children = e.childNodes,
  3.         arr = [],
  4.         len = children.length;
  5.     for (var i = 0; i < len; i++) {
  6.         if (children[i].nodeType === 1) {
  7.             arr.push(children[i])
  8.         }
  9.     }
  10.     return arr;
  11. }


11、判断元素有没有子元素

  1. function hasChildren(e) {
  2.     var children = e.childNodes,
  3.         len = children.length;
  4.     for (var i = 0; i < len; i++) {
  5.         if (children[i].nodeType === 1) {
  6.             return true;
  7.         }
  8.     }
  9.     return false;
  10. }


12、我一个元素插入到另一个元素的后面

  1. Element.prototype.insertAfter = function (target, elen) {
  2.     var nextElen = elen.nextElenmentSibling;
  3.     if (nextElen == null) {
  4.         this.appendChild(target);
  5.     } else {
  6.         this.insertBefore(target, nextElen);
  7.     }
  8. }


13、返回当前的时间（年月日时分秒）

  1. function getDateTime() {
  2.     var date = new Date(),
  3.         year = date.getFullYear(),
  4.         month = date.getMonth() + 1,
  5.         day = date.getDate(),
  6.         hour = date.getHours() + 1,
  7.         minute = date.getMinutes(),
  8.         second = date.getSeconds();
  9.         month = checkTime(month);
  10.         day = checkTime(day);
  11.         hour = checkTime(hour);
  12.         minute = checkTime(minute);
  13.         second = checkTime(second);
  14.      function checkTime(i) {
  15.         if (i < 10) {
  16.                 i = "0" + i;
  17.        }
  18.       return i;
  19.     }
  20.     return "" + year + "年" + month + "月" + day + "日" + hour + "时" + minute + "分" + second + "秒"
  21. }


14、获得滚动条的滚动距离

  1. function getScrollOffset() {
  2.     if (window.pageXOffset) {
  3.         return {
  4.             x: window.pageXOffset,
  5.             y: window.pageYOffset
  6.         }
  7.     } else {
  8.         return {
  9.             x: document.body.scrollLeft + document.documentElement.scrollLeft,
  10.             y: document.body.scrollTop + document.documentElement.scrollTop
  11.         }
  12.     }
  13. }


15、浏览器操作

（1）滚动到页面顶部

  1. export const scrollToTop = () => {
  2.   const height = document.documentElement.scrollTop || document.body.scrollTop;
  3.   if (height > 0) {
  4.     window.requestAnimationFrame(scrollToTop);
  5.     window.scrollTo(0, height - height / 8);
  6.   }
  7. }

（2）滚动到页面底部

  1. export const scrollToBottom = () => {
  2.   window.scrollTo(0, document.documentElement.clientHeight);  
  3. }

（3）滚动到指定元素区域

  1. export const smoothScroll = (element) => {
  2.     document.querySelector(element).scrollIntoView({
  3.         behavior: 'smooth'
  4.     });
  5. };

（4）获取可视窗口高度

  1. export const getClientHeight = () => {
  2.     let clientHeight = 0;
  3.     if (document.body.clientHeight && document.documentElement.clientHeight) {
  4.         clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
  5.     }
  6.     else {
  7.         clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
  8.     }
  9.     return clientHeight;
  10. }

（5）获取可视窗口宽度

  1. export const getPageViewWidth = () => {
  2.     return (document.compatMode == "BackCompat" ? document.body : document.documentElement).clientWidth;
  3. }

（6）打开浏览器全屏

  1. export const toFullScreen = () => {
  2.     let element = document.body;
  3.     if (element.requestFullscreen) {
  4.       element.requestFullscreen()
  5.     } else if (element.mozRequestFullScreen) {
  6.       element.mozRequestFullScreen()
  7.     } else if (element.msRequestFullscreen) {
  8.       element.msRequestFullscreen()
  9.     } else if (element.webkitRequestFullscreen) {
  10.       element.webkitRequestFullScreen()
  11.     }
  12. }

（7）退出浏览器全屏

  1. export const exitFullscreen = () => {
  2.     if (document.exitFullscreen) {
  3.       document.exitFullscreen()
  4.     } else if (document.msExitFullscreen) {
  5.       document.msExitFullscreen()
  6.     } else if (document.mozCancelFullScreen) {
  7.       document.mozCancelFullScreen()
  8.     } else if (document.webkitExitFullscreen) {
  9.       document.webkitExitFullscreen()
  10.     }
  11. }


16、获得视口的尺寸

  1. function getViewportOffset() {
  2.     if (window.innerWidth) {
  3.         return {
  4.             w: window.innerWidth,
  5.             h: window.innerHeight
  6.         }
  7.     } else {
  8.         // ie8及其以下
  9.         if (document.compatMode === "BackCompat") {
  10.             // 怪异模式
  11.             return {
  12.                 w: document.body.clientWidth,
  13.                 h: document.body.clientHeight
  14.             }
  15.         } else {
  16.             // 标准模式
  17.             return {
  18.                 w: document.documentElement.clientWidth,
  19.                 h: document.documentElement.clientHeight
  20.             }
  21.         }
  22.     }
  23. }


17、获取任一元素的任意属性

  1. function getStyle(elem, prop) {
  2.     return window.getComputedStyle ? window.getComputedStyle(elem, null)[prop] : elem.currentStyle[prop]
  3. }

18、绑定事件的兼容代码

  1. function addEvent(elem, type, handle) {
  2.     if (elem.addEventListener) { //非ie和非ie9
  3.         elem.addEventListener(type, handle, false);
  4.     } else if (elem.attachEvent) { //ie6到ie8
  5.         elem.attachEvent('on' + type, function () {
  6.             handle.call(elem);
  7.         })
  8.     } else {
  9.         elem['on' + type] = handle;
  10.     }
  11. }


19、解绑事件

  1. function removeEvent(elem, type, handle) {
  2.     if (elem.removeEventListener) { //非ie和非ie9
  3.         elem.removeEventListener(type, handle, false);
  4.     } else if (elem.detachEvent) { //ie6到ie8
  5.         elem.detachEvent('on' + type, handle);
  6.     } else {
  7.         elem['on' + type] = null;
  8.     }
  9. }


20、取消冒泡的兼容代码

  1. function stopBubble(e) {
  2.     if (e && e.stopPropagation) {
  3.         e.stopPropagation();
  4.     } else {
  5.         window.event.cancelBubble = true;
  6.     }
  7. }


20、检验字符串是否是回文

  1. function isPalina(str) {
  2.     if (Object.prototype.toString.call(str) !== '[object String]') {
  3.         return false;
  4.     }
  5.     var len = str.length;
  6.     for (var i = 0; i < len / 2; i++) {
  7.         if (str[i] != str[len - 1 - i]) {
  8.             return false;
  9.         }
  10.     }
  11.     return true;
  12. }


21、检验字符串是否是回文

  1. function isPalindrome(str) {
  2.     str = str.replace(/\W/g, '').toLowerCase();
  3.     console.log(str)
  4.     return (str == str.split('').reverse().join(''))
  5. }


22、兼容getElementsByClassName方法

  1. Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) {
  2.     var allDomArray = document.getElementsByTagName('*');
  3.     var lastDomArray = [];
  4.     function trimSpace(strClass) {
  5.         var reg = /\s+/g;
  6.         return strClass.replace(reg, ' ').trim()
  7.     }
  8.     for (var i = 0; i < allDomArray.length; i++) {
  9.         var classArray = trimSpace(allDomArray[i].className).split(' ');
  10.         for (var j = 0; j < classArray.length; j++) {
  11.             if (classArray[j] == _className) {
  12.                 lastDomArray.push(allDomArray[i]);
  13.                 break;
  14.             }
  15.         }
  16.     }
  17.     return lastDomArray;
  18. }


24、运动函数

  1. function animate(obj, json, callback) {
  2.     clearInterval(obj.timer);
  3.     var speed,
  4.         current;
  5.     obj.timer = setInterval(function () {
  6.         var lock = true;
  7.         for (var prop in json) {
  8.             if (prop == 'opacity') {
  9.                 current = parseFloat(window.getComputedStyle(obj, null)[prop]) * 100;
  10.             } else {
  11.                 current = parseInt(window.getComputedStyle(obj, null)[prop]);
  12.             }
  13.             speed = (json[prop] - current) / 7;
  14.             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  15.             if (prop == 'opacity') {
  16.                 obj.style[prop] = (current + speed) / 100;
  17.             } else {
  18.                 obj.style[prop] = current + speed + 'px';
  19.             }
  20.             if (current != json[prop]) {
  21.                 lock = false;
  22.             }
  23.         }
  24.         if (lock) {
  25.             clearInterval(obj.timer);
  26.             typeof callback == 'function' ? callback() : '';
  27.         }
  28.     }, 30)
  29. }


25、弹性运动

  1. function ElasticMovement(obj, target) {
  2.     clearInterval(obj.timer);
  3.     var iSpeed = 40,
  4.         a, u = 0.8;
  5.     obj.timer = setInterval(function () {
  6.         a = (target - obj.offsetLeft) / 8;
  7.         iSpeed = iSpeed + a;
  8.         iSpeed = iSpeed * u;
  9.         if (Math.abs(iSpeed) <= 1 && Math.abs(a) <= 1) {
  10.             console.log('over')
  11.             clearInterval(obj.timer);
  12.             obj.style.left = target + 'px';
  13.         } else {
  14.             obj.style.left = obj.offsetLeft + iSpeed + 'px';
  15.         }
  16.     }, 30);
  17. }


26、封装自己的forEach方法

  1. Array.prototype.myForEach = function (func, obj) {
  2.     var len = this.length;
  3.     var _this = arguments[1] ? arguments[1] : window;
  4.     // var _this=arguments[1]||window;
  5.     for (var i = 0; i < len; i++) {
  6.         func.call(_this, this[i], i, this)
  7.     }
  8. }


27、封装自己的filter方法

  1. Array.prototype.myFilter = function (func, obj) {
  2.     var len = this.length;
  3.     var arr = [];
  4.     var _this = arguments[1] || window;
  5.     for (var i = 0; i < len; i++) {
  6.         func.call(_this, this[i], i, this) && arr.push(this[i]);
  7.     }
  8.     return arr;
  9. }


28、数组map方法

  1. Array.prototype.myMap = function (func) {
  2.     var arr = [];
  3.     var len = this.length;
  4.     var _this = arguments[1] || window;
  5.     for (var i = 0; i < len; i++) {
  6.         arr.push(func.call(_this, this[i], i, this));
  7.     }
  8.     return arr;
  9. }


29、数组every方法

  1. Array.prototype.myEvery = function (func) {
  2.     var flag = true;
  3.     var len = this.length;
  4.     var _this = arguments[1] || window;
  5.     for (var i = 0; i < len; i++) {
  6.         if (func.apply(_this, [this[i], i, this]) == false) {
  7.             flag = false;
  8.             break;
  9.         }
  10.     }
  11.     return flag;
  12. }


30、数组reduce方法

  1. Array.prototype.myReduce = function (func, initialValue) {
  2.     var len = this.length,
  3.         nextValue,
  4.         i;
  5.     if (!initialValue) {
  6.         // 没有传第二个参数
  7.         nextValue = this[0];
  8.         i = 1;
  9.     } else {
  10.         // 传了第二个参数
  11.         nextValue = initialValue;
  12.         i = 0;
  13.     }
  14.     for (; i < len; i++) {
  15.         nextValue = func(nextValue, this[i], i, this);
  16.     }
  17.     return nextValue;
  18. }


31、获取url中的参数

  1. function getWindonHref() {
  2.     var sHref = window.location.href;
  3.     var args = sHref.split('?');
  4.     if (args[0] === sHref) {
  5.         return '';
  6.     }
  7.     var hrefarr = args[1].split('#')[0].split('&');
  8.     var obj = {};
  9.     for (var i = 0; i < hrefarr.length; i++) {
  10.         hrefarr[i] = hrefarr[i].split('=');
  11.         obj[hrefarr[i][0]] = hrefarr[i][1];
  12.     }
  13.     return obj;
  14. }
  1. const getParameters = (URL) => {
  2.   URL = JSON.parse(
  3.     '{"' +
  4.       decodeURI(URL.split("?")[1])
  5.         .replace(/"/g, '\\"')
  6.         .replace(/&/g, '","')
  7.         .replace(/=/g, '":"') +
  8.       '"}'
  9.   );
  10.   return JSON.stringify(URL);
  11. };
  12. getParameters(window.location);
  13. // Result: { search : "easy", page : 3 }

或者更为简单的：

  1. Object.fromEntries(new URLSearchParams(window.location.search))
  2. // Result: { search : "easy", page : 3 }

键值对拼接成URL参数

  1. export const params2Url = (obj) => {
  2.      let params = []
  3.      for (let key in obj) {
  4.        params.push(`${key}=${obj[key]}`);
  5.      }
  6.      return encodeURIComponent(params.join('&'))
  7. }


32、数组排序

  1. // 快排 [left] + min + [right]
  2. function quickArr(arr) {
  3.     if (arr.length <= 1) {
  4.         return arr;
  5.     }
  6.     var left = [],
  7.         right = [];
  8.     var pIndex = Math.floor(arr.length / 2);
  9.     var p = arr.splice(pIndex, 1)[0];
  10.     for (var i = 0; i < arr.length; i++) {
  11.         if (arr[i] <= p) {
  12.             left.push(arr[i]);
  13.         } else {
  14.             right.push(arr[i]);
  15.         }
  16.     }
  17.     // 递归
  18.     return quickArr(left).concat([p], quickArr(right));
  19. }
  20. // 冒泡
  21. function bubbleSort(arr) {
  22.     for (var i = 0; i < arr.length - 1; i++) {
  23.         for (var j = i + 1; j < arr.length; j++) {
  24.             if (arr[i] > arr[j]) {
  25.                 var temp = arr[i];
  26.                 arr[i] = arr[j];
  27.                 arr[j] = temp;
  28.             }
  29.         }
  30.     }
  31.     return arr;
  32. }
  33. function bubbleSort(arr) {
  34.     var len = arr.length;
  35.     for (var i = 0; i < len - 1; i++) {
  36.         for (var j = 0; j < len - 1 - i; j++) {
  37.             if (arr[j] > arr[j + 1]) {
  38.                 var temp = arr[j];
  39.                 arr[j] = arr[j + 1];
  40.                 arr[j + 1] = temp;
  41.             }
  42.         }
  43.     }
  44.     return arr;
  45. }


33、遍历Dom树

  1. // 给定页面上的DOM元素,将访问元素本身及其所有后代(不仅仅是它的直接子元素)
  2. // 对于每个访问的元素，函数讲元素传递给提供的回调函数
  3. function traverse(element, callback) {
  4.     callback(element);
  5.     var list = element.children;
  6.     for (var i = 0; i < list.length; i++) {
  7.         traverse(list[i], callback);
  8.     }
  9. }


34、原生js封装ajax

  1. function ajax(method, url, callback, data, flag) {
  2.     var xhr;
  3.     flag = flag || true;
  4.     method = method.toUpperCase();
  5.     if (window.XMLHttpRequest) {
  6.         xhr = new XMLHttpRequest();
  7.     } else {
  8.         xhr = new ActiveXObject('Microsoft.XMLHttp');
  9.     }
  10.     xhr.onreadystatechange = function () {
  11.         if (xhr.readyState == 4 && xhr.status == 200) {
  12.             console.log(2)
  13.             callback(xhr.responseText);
  14.         }
  15.     }
  16.     if (method == 'GET') {
  17.         var date = new Date(),
  18.         timer = date.getTime();
  19.         xhr.open('GET', url + '?' + data + '&timer' + timer, flag);
  20.         xhr.send()
  21.         } else if (method == 'POST') {
  22.         xhr.open('POST', url, flag);
  23.         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  24.         xhr.send(data);
  25.     }
  26. }


35、异步加载script

  1. function loadScript(url, callback) {
  2.     var oscript = document.createElement('script');
  3.     if (oscript.readyState) { // ie8及以下版本
  4.         oscript.onreadystatechange = function () {
  5.             if (oscript.readyState === 'complete' || oscript.readyState === 'loaded') {
  6.                 callback();
  7.             }
  8.         }
  9.     } else {
  10.         oscript.onload = function () {
  11.             callback()
  12.         };
  13.     }
  14.     oscript.src = url;
  15.     document.body.appendChild(oscript);
  16. }


36、cookie管理

  1. var cookie = {
  2.     set: function (name, value, time) {
  3.         document.cookie = name + '=' + value + '; max-age=' + time;
  4.         return this;
  5.     },
  6.     remove: function (name) {
  7.         return this.setCookie(name, '', -1);
  8.     },
  9.     get: function (name, callback) {
  10.         var allCookieArr = document.cookie.split('; ');
  11.         for (var i = 0; i < allCookieArr.length; i++) {
  12.             var itemCookieArr = allCookieArr[i].split('=');
  13.             if (itemCookieArr[0] === name) {
  14.                 return itemCookieArr[1]
  15.             }
  16.         }
  17.         return undefined;
  18.     }
  19. }


37、实现bind()方法

  1. Function.prototype.myBind = function (target) {
  2.     var target = target || window;
  3.     var _args1 = [].slice.call(arguments, 1);
  4.     var self = this;
  5.     var temp = function () {};
  6.     var F = function () {
  7.         var _args2 = [].slice.call(arguments, 0);
  8.         var parasArr = _args1.concat(_args2);
  9.         return self.apply(this instanceof temp ? this : target, parasArr)
  10.     }
  11.     temp.prototype = self.prototype;
  12.     F.prototype = new temp();
  13.     return F;
  14. }


38、实现call()方法

  1. Function.prototype.myCall = function () {
  2.     var ctx = arguments[0] || window;
  3.     ctx.fn = this;
  4.     var args = [];
  5.     for (var i = 1; i < arguments.length; i++) {
  6.         args.push(arguments[i])
  7.     }
  8.     var result = ctx.fn(...args);
  9.     delete ctx.fn;
  10.     return result;
  11. }


39、实现apply()方法

  1. Function.prototype.myApply = function () {
  2.     var ctx = arguments[0] || window;
  3.     ctx.fn = this;
  4.     if (!arguments[1]) {
  5.         var result = ctx.fn();
  6.         delete ctx.fn;
  7.         return result;
  8.     }
  9.     var result = ctx.fn(...arguments[1]);
  10.     delete ctx.fn;
  11.     return result;
  12. }


40、防抖

  1. function debounce(handle, delay) {
  2.     var timer = null;
  3.     return function () {
  4.         var _self = this,
  5.             _args = arguments;
  6.         clearTimeout(timer);
  7.         timer = setTimeout(function () {
  8.             handle.apply(_self, _args)
  9.         }, delay)
  10.     }
  11. }


41、节流

  1. function throttle(handler, wait) {
  2.     var lastTime = 0;
  3.     return function (e) {
  4.         var nowTime = new Date().getTime();
  5.         if (nowTime - lastTime > wait) {
  6.             handler.apply(this, arguments);
  7.             lastTime = nowTime;
  8.         }
  9.     }
  10. }


42、requestAnimFrame兼容性方法

  1. window.requestAnimFrame = (function () {
  2.     return window.requestAnimationFrame ||
  3.         window.webkitRequestAnimationFrame ||
  4.         window.mozRequestAnimationFrame ||
  5.         function (callback) {
  6.             window.setTimeout(callback, 1000 / 60);
  7.         };
  8. })();


43、cancelAnimFrame兼容性方法

  1. window.cancelAnimFrame = (function () {
  2.     return window.cancelAnimationFrame ||
  3.         window.webkitCancelAnimationFrame ||
  4.         window.mozCancelAnimationFrame ||
  5.         function (id) {
  6.             window.clearTimeout(id);
  7.         };
  8. })();


44、jsonp底层方法

  1. function jsonp(url, callback) {
  2.     var oscript = document.createElement('script');
  3.     if (oscript.readyState) { // ie8及以下版本
  4.         oscript.onreadystatechange = function () {
  5.             if (oscript.readyState === 'complete' || oscript.readyState === 'loaded') {
  6.                 callback();
  7.             }
  8.         }
  9.     } else {
  10.         oscript.onload = function () {
  11.             callback()
  12.         };
  13.     }
  14.     oscript.src = url;
  15.     document.body.appendChild(oscript);
  16. }


45、获取url上的参数

  1. function getUrlParam(sUrl, sKey) {
  2.     var result = {};
  3.     sUrl.replace(/(\w+)=(\w+)(?=[&|#])/g, function (ele, key, val) {
  4.         if (!result[key]) {
  5.             result[key] = val;
  6.         } else {
  7.             var temp = result[key];
  8.             result[key] = [].concat(temp, val);
  9.         }
  10.     })
  11.     if (!sKey) {
  12.         return result;
  13.     } else {
  14.         return result[sKey] || '';
  15.     }
  16. }


46、格式化时间

  1. function formatDate(t, str) {
  2.     var obj = {
  3.         yyyy: t.getFullYear(),
  4.         yy: ("" + t.getFullYear()).slice(-2),
  5.         M: t.getMonth() + 1,
  6.         MM: ("0" + (t.getMonth() + 1)).slice(-2),
  7.         d: t.getDate(),
  8.         dd: ("0" + t.getDate()).slice(-2),
  9.         H: t.getHours(),
  10.         HH: ("0" + t.getHours()).slice(-2),
  11.         h: t.getHours() % 12,
  12.         hh: ("0" + t.getHours() % 12).slice(-2),
  13.         m: t.getMinutes(),
  14.         mm: ("0" + t.getMinutes()).slice(-2),
  15.         s: t.getSeconds(),
  16.         ss: ("0" + t.getSeconds()).slice(-2),
  17.         w: ['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
  18.     };
  19.     return str.replace(/([a-z]+)/ig, function ($1) {
  20.         return obj[$1]
  21.     });
  22. }


47、验证邮箱的正则表达式

  1. function isAvailableEmail(sEmail) {
  2.     var reg = /^([\w+\.])+@\w+([.]\w+)+$/
  3.     return reg.test(sEmail)
  4. }


48、函数柯里化

  1. //是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术
  2. function curryIt(fn) {
  3.     var length = fn.length,
  4.         args = [];
  5.     var result = function (arg) {
  6.         args.push(arg);
  7.         length--;
  8.         if (length <= 0) {
  9.             return fn.apply(this, args);
  10.         } else {
  11.             return result;
  12.         }
  13.     }
  14.     return result;
  15. }


49、大数相加

  1. function sumBigNumber(a, b) {
  2.     var res = '', //结果
  3.         temp = 0; //按位加的结果及进位
  4.     a = a.split('');
  5.     b = b.split('');
  6.     while (a.length || b.length || temp) {
  7.         //~~按位非 1.类型转换，转换成数字 2.~~undefined==0 
  8.         temp += ~~a.pop() + ~~b.pop();
  9.         res = (temp % 10) + res;
  10.         temp = temp > 9;
  11.     }
  12.     return res.replace(/^0+/, '');
  13. }


50、单例模式

  1. function getSingle(func) {
  2.     var result;
  3.     return function () {
  4.         if (!result) {
  5.             result = new func(arguments);
  6.         }
  7.         return result;
  8.     }
  9. }


51、设备判断：android、ios、web

  1. const isDevice = function() { // 判断是android还是ios还是web
  2.   var ua = navigator.userAgent.toLowerCase()
  3.   if (ua.match(/iPhone\sOS/i) === 'iphone os' || ua.match(/iPad/i) === 'ipad') { // ios
  4.     return 'iOS'
  5.   }
  6.   if (ua.match(/Android/i) === 'android') {
  7.     return 'Android'
  8.   }
  9.   return 'Web'
  10. }


52、判断是否为微信

  1. const isWx = function() { // 判断是否为微信
  2.   var ua = window.navigator.userAgent.toLowerCase()
  3.   if (ua.match(/MicroMessenger/i) === 'micromessenger') {
  4.     return true
  5.   }
  6.   return false
  7. }


53、是否为PC端

  1. const isPC = function() { // 是否为PC端
  2.   let userAgentInfo = navigator.userAgent
  3.   let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
  4.   let flag = true
  5.   for (let v = 0; v < Agents.length; v++) {
  6.     if (userAgentInfo.indexOf(Agents[v]) > 0) {
  7.       flag = false
  8.       break
  9.     }
  10.   }
  11.   return flag
  12. }


54、判断图片加载完成

  1. const imgLoadAll = function(arr, callback) { // 图片加载
  2.   let arrImg = []
  3.   for (let i = 0; i < arr.length; i++) {
  4.     let img = new Image()
  5.     img.src = arr[i]
  6.     img.onload = function() {
  7.       arrImg.push(this)
  8.       if (arrImg.length == arr.length) {
  9.         callback && callback()
  10.       }
  11.     }
  12.   }
  13. }


55、音频加载完成操作

  1. const loadAudio = function(src, callback) { // 音频加载
  2.   var audio = new Audio(src)
  3.   audio.onloadedmetadata = callback
  4.   audio.src = src
  5. }


56、图片地址转base64

  1. const getBase64 = function(img) { //传入图片路径，返回base64，使用getBase64(url).then(function(base64){},function(err){}); 
  2.   let getBase64Image = function(img, width, height) { //width、height调用时传入具体像素值，控制大小,不传则默认图像大小
  3.     let canvas = document.createElement("canvas");
  4.     canvas.width = width ? width : img.width;
  5.     canvas.height = height ? height : img.height;
  6.     let ctx = canvas.getContext("2d");
  7.     ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  8.     let dataURL = canvas.toDataURL();
  9.     return dataURL;
  10.   }
  11.   let image = new Image();
  12.   image.crossOrigin = '';
  13.   image.src = img;
  14.   let deferred = $.Deferred();
  15.   if (img) {
  16.     image.onload = function() {
  17.       deferred.resolve(getBase64Image(image));
  18.     }
  19.     return deferred.promise();
  20.   }
  21. }


57、H5软键盘缩回、弹起回调

  1. const h5Resize = function(downCb, upCb) { //当软件键盘弹起会改变当前 window.innerHeight，监听这个值变化 [downCb 当软键盘弹起后，缩回的回调,upCb 当软键盘弹起的回调]
  2.   var clientHeight = window.innerHeight;
  3.   downCb = typeof downCb === 'function' ? downCb : function() {}
  4.   upCb = typeof upCb === 'function' ? upCb : function() {}
  5.   window.addEventListener('resize', () => {
  6.     var height = window.innerHeight;
  7.     if (height === clientHeight) {
  8.       downCb();
  9.     }
  10.     if (height < clientHeight) {
  11.       upCb();
  12.     }
  13.   });
  14. }


58、计算2个日期之间相差多少天

  1. const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
  2.     
  3. dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
  4. // Result: 366


59、生成随机十六进制颜色

  1. //可以使用 Math.random 和 padEnd 属性生成随机的十六进制颜色。
  2. const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;    
  3.  console.log(randomHex());
  4. // Result: #92b008


60、手机号中间四位变成*

  1. export const telFormat = (tel) => {
  2.    tel = String(tel); 
  3.     return tel.substr(0,3) + "****" + tel.substr(7);
  4. }


61、数字转化为大写金额

  1. export const digitUppercase = (n) => {
  2.     const fraction = ['角', '分'];
  3.     const digit = [
  4.         '零', '壹', '贰', '叁', '肆',
  5.         '伍', '陆', '柒', '捌', '玖'
  6.     ];
  7.     const unit = [
  8.         ['元', '万', '亿'],
  9.         ['', '拾', '佰', '仟']
  10.     ];
  11.     n = Math.abs(n);
  12.     let s = '';
  13.     for (let i = 0; i < fraction.length; i++) {
  14.         s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
  15.     }
  16.     s = s || '整';
  17.     n = Math.floor(n);
  18.     for (let i = 0; i < unit[0].length && n > 0; i++) {
  19.         let p = '';
  20.         for (let j = 0; j < unit[1].length && n > 0; j++) {
  21.             p = digit[n % 10] + unit[1][j] + p;
  22.             n = Math.floor(n / 10);
  23.         }
  24.         s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
  25.     }
  26.     return s.replace(/(零.)*零元/, '元')
  27.         .replace(/(零.)+/g, '零')
  28.         .replace(/^整$/, '零元整');
  29. };


62、数字转化为中文数字

  1. export const intToChinese = (value) => {
  2.  const str = String(value);
  3.  const len = str.length-1;
  4.  const idxs = ['','十','百','千','万','十','百','千','亿','十','百','千','万','十','百','千','亿'];
  5.  const num = ['零','一','二','三','四','五','六','七','八','九'];
  6.  return str.replace(/([1-9]|0+)/g, ( $, $1, idx, full) => {
  7.     let pos = 0;
  8.     if($1[0] !== '0'){
  9.       pos = len-idx;
  10.       if(idx == 0 && $1[0] == 1 && idxs[len-idx] == '十'){
  11.         return idxs[len-idx];
  12.       }
  13.       return num[$1[0]] + idxs[len-idx];
  14.     } else {
  15.       let left = len - idx;
  16.       let right = len - idx + $1.length;
  17.       if(Math.floor(right / 4) - Math.floor(left / 4) > 0){
  18.         pos = left - left % 4;
  19.       }
  20.       if( pos ){
  21.         return idxs[pos] + num[$1[0]];
  22.       } else if( idx + $1.length >= len ){
  23.         return '';
  24.       }else {
  25.         return num[$1[0]]
  26.       }
  27.     }
  28.    });
  29. }


（1）存储loalStorage

  1. export const loalStorageSet = (key, value) => {
  2.     if (!key) return;
  3.     if (typeof value !== 'string') {
  4.         value = JSON.stringify(value);
  5.     }
  6.     window.localStorage.setItem(key, value);
  7. };

（2）获取localStorage

  1. export const loalStorageGet = (key) => {
  2.     if (!key) return;
  3.     return window.localStorage.getItem(key);
  4. };

（3）删除localStorage

  1. export const loalStorageRemove = (key) => {
  2.     if (!key) return;
  3.     window.localStorage.removeItem(key);
  4. };

（4）存储sessionStorage

  1. export const sessionStorageSet = (key, value) => {
  2.    if (!key) return;
  3.     if (typeof value !== 'string') {
  4.       value = JSON.stringify(value);
  5.     }
  6.     window.sessionStorage.setItem(key, value)
  7. };

（5）获取sessionStorage

  1. export const sessionStorageGet = (key) => {
  2.    if (!key) return;
  3.     return window.sessionStorage.getItem(key)
  4. };

（6）删除sessionStorage

  1. export const sessionStorageRemove = (key) => {
  2.    if (!key) return;
  3.     window.sessionStorage.removeItem(key)
  4. };


63、操作cookie

（1）设置cookie

  1. export const setCookie = (key, value, expire) => {
  2.     const d = new Date();
  3.     d.setDate(d.getDate() + expire);
  4.     document.cookie = `${key}=${value};expires=${d.toUTCString()}`
  5. };

（2）读取cookie

  1. export const getCookie = (key) => {
  2.     const cookieStr = unescape(document.cookie);
  3.        const arr = cookieStr.split('; ');
  4.        let cookieValue = '';
  5.        for (let i = 0; i < arr.length; i++) {
  6.            const temp = arr[i].split('=');
  7.            if (temp[0] === key) {
  8.                cookieValue = temp[1];
  9.                break
  10.        }
  11.     }
  12.     return cookieValue
  13. };

（3）删除cookie

  1. export const delCookie = (key) => {
  2.     document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`
  3. };


TAG标签：
本文网址：https://www.zztuku.com/detail-9965.html
站长图库 - 常用的前端JavaScript方法封装
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐