常用js封装方法,持续更新

发布时间:2022-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了常用js封装方法,持续更新脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
​
// 数组去重
function unique1(arr) {
    return […new Set(arr)]
}

function unique2(arr) {
    var obj = {};
    return arr.filter(ele => {
       if (!obj[ele]) {
        obj[ele] = true;
        return true;
       }
    })
}

function unique3(arr) {
    var result = [];
    arr.forEach(ele => {
    if (result.indexOf(ele) == -1) {
    result.push(ele)
    }
    })
    return result;
}

// 数据类型
function whichType(value) {
   return Object.prototype.toString.call(value)
}
    console.log(Object.prototype.toString.call('xxx'));  //'[object String]'
    console.log(Object.prototype.toString.call(12));  //'[object Number]'
    console.log(Object.prototype.toString.call(true));  //'[object Boolean]'
    console.log(Object.prototype.toString.call(undefined));  //'[object Undefined]'
    console.log(Object.prototype.toString.call(null));  //'[object Null]'
    console.log(Object.prototype.toString.call({name: "licong"}));  //'[object Object]'
    console.log(Object.prototype.toString.call(function(){}));  //'[object Function]'
    console.log(Object.prototype.toString.call([]));  //'[object Array]'
    console.log(Object.prototype.toString.call(new Date));  //'[object Date]'
    console.log(Object.prototype.toString.call(/d/));  //'[object RegExp]'

// 深拷贝
function deepClone(obj, result) {
  var result = result || {};
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      if (typeof obj[prop] == "object" && obj[prop] !== null) {
        // 引用值(obj/array)且不为null
        if (Object.prototype.toString.call(obj[prop]) == "[object Object]") {
          // 对象
          result[prop] = {};
        } else {
          // 数组
          result[prop] = [];
        }
        deepClone(obj[prop], result[prop]);
      } else {
        // 原始值或func
        result[prop] = obj[prop];
      }
    }
  }
  return result;
}

// 判断元素有没有子元素
function hasChildren(e) {
  var children = e.childNodes,
    len = children.length;
  for (var i = 0; i < len; i++) {
    if (children[i].nodeType === 1) {
      return true;
    }
  }
  return false;
}

// 一个元素插入到另一个元素的后面
Element.prototype.insertAfter = function (target, elen) {
  var nextElen = elen.nextElenmentSibling;
  if (nextElen == null) {
    this.appendChild(target);
  } else {
    this.insertBefore(target, nextElen);
  }
};

// 获得滚动条的滚动距离
function getScrollOffset() {
  if (window.pageXOffset) {
    return {
      x: window.pageXOffset,
      y: window.pageYOffset,
    };
  } else {
    return {
      x: document.body.scrollLeft + document.documentElement.scrollLeft,
      y: document.body.scrollTop + document.documentElement.scrollTop,
    };
  }
}


// 获取任一元素的任意属性
function getStyle(elem, prop) {
  return window.getComputedStyle
    ? window.getComputedStyle(elem, null)[prop]
    : elem.currentStyle[prop];
}

// 绑定事件的兼容代码
function addEvent(elem, type, handle) {
  if (elem.addEventListener) {
    //非ie和非ie9
    elem.addEventListener(type, handle, false);
  } else if (elem.attachEvent) {
    //ie6到ie8
    elem.attachEvent("on" + type, function () {
      handle.call(elem);
    });
  } else {
    elem["on" + type] = handle;
  }
}

// 解绑事件
function removeEvent(elem, type, handle) {
  if (elem.removeEventListener) {
    //非ie和非ie9
    elem.removeEventListener(type, handle, false);
  } else if (elem.detachEvent) {
    //ie6到ie8
    elem.detachEvent("on" + type, handle);
  } else {
    elem["on" + type] = null;
  }
}

// 取消冒泡的兼容代码
function stopBubble(e) {
  if (e && e.stopPropagation) {
    e.stopPropagation();
  } else {
    window.event.cancelBubble = true;
  }
}

// 获取地址栏参数
function getUrlParam(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}

function getUrlParam(name) {
  let params = {}
  location.search
    .slice(1)
    .split('&')
    .forEach((item) => {
      const [key, value] = item.split('=')
      params[key] = value
    })
  return params[name] || ''
}

// 是否是移动端设备
function isMobile() {
    return navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)
}

// 防抖函数
function debounce(fn, delay) {
    var timer = null
    return function () {
        var context = this
        var args = arguments
        clearTimeout(timer)
        timer = setTimeout(function () {
            fn.apply(context, args)
        }, delay)
    }
}

// 计算相隔天数
function calDay(timestamp) => {
  if (!timestamp) {
    return 0
  }
  const now = new Date().getTime() / 1000
  return parseInt((now - timestamp) / 60 / 60 / 24)
}

// 电话号码脱敏处理
function phoneDesensitization(phone) => {
  return phone.replace(/(d{3})d*(d{4})/, '$1****$2')
}

// 校验手机号格式
function varifyPhoneNumber(phone) => {
  return /^1d{10}$/.test(phone)
}

// 数组对象中相同的id进行分类
function classify(list) {
    let newData = {}
    list.forEach(item => {
      if (Object.keys(newData).indexOf('' + item.id) === -1) {
        newData[item.id] = []
      }
      newData[item.id].push(item)
    })
    return newData
// [{id:'1',title: '123'},{id: '1',title: '456'},{id: '2', title: '789'}]
// {1: [{id: '1', title: '123'},{id: '1', title: '456'}], 2: [{id: '2', title: '789'}]}
}





​

​

脚本宝典总结

以上是脚本宝典为你收集整理的常用js封装方法,持续更新全部内容,希望文章能够帮你解决常用js封装方法,持续更新所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: