一些常用的公共方法

这篇博客介绍了JavaScript中的一些实用功能,包括实现垂直平滑滚动的函数,检测参数类型的工具,深拷贝对象的方法,计算字符串字节数的函数,将base64数据转换为file文件的辅助函数,将秒数格式化为时分秒的工具,以及判断手机设备类型的函数。此外,还提供了获取URL参数和对象深度查找的方法。
摘要由CSDN通过智能技术生成

1、垂直方向的平滑滚动

/**
 * 垂直方向的平滑滚动
 * @param el dom元素
 * @param from y轴移动的开始坐标
 * @param to y轴移动的目标位置坐标
 * @param duration 滚动时间
 * @param endCallback 滚动结束的回调
 */
const scrollTop = function(el,from=0,to,duration=500,endCallback){
    if(!window.requestAnimationFrame){
        window.requestAnimationFrame=(
            window.webkitRequestAnimationFrame||
            window.mozRequestAnimationFrame||
            window.msRequestAnimationFrame||
            function (callback){
                return window.setTimeout(callback,1000/60);
            }
        );
    }
    const difference=Math.abs(from-to);
    const step=Math.ceil(difference/duration*50);

    function scroll(start,end,step){
        if(start===end){
            endCallback&&endCallback();
            return;
        }

        let d=(start+step>end)?end:start+step;
        if(start>end){
            d=(start-step<end)?end:start-step;
        }

        if(el===window){
            window.scrollTo(d,d);
        }else{
            el.scrollTop=d;
        }
        window.requestAnimationFrame(()=>scroll(d,end,step));
    }
    scroll(from,to,step);
};

2、检测传入的参数类型

/**
 * 检测传入的参数类型
 * @param obj {All} 需要进行参数检测的对象
 * @return {String} 所属类型字符串
 */
export function typeOf(obj) {
  const toString = Object.prototype.toString;
  const map = {
    "[object Boolean]": "boolean",
    "[object Number]": "number",
    "[object String]": "string",
    "[object Function]": "function",
    "[object Array]": "array",
    "[object Date]": "date",
    "[object RegExp]": "regExp",
    "[object Undefined]": "undefined",
    "[object Null]": "null",
    "[object Object]": "object"
  };
  if (obj instanceof Element) return "element";
  return map[toString.call(obj)];
}

3、深拷贝

/**
 * 深拷贝函数
 * @param target {object} 需要拷贝的目标对象
 * @returns {object} 拷贝完成的新对象
 */
export function deepCopy(target) {
  const flag = typeOf(target);
  let copy;

  if (flag === "array") {
    copy = [];
    for (var i = 0, len = target.length; i < len; i++) {
      copy.push(deepCopy(target[i]));
    }
  } else if (flag === "object") {
    copy = {};
    for (var k in target) {
      copy[k] = deepCopy(target[k]);
    }
  } else {
    copy = target;
  }
  return copy;
}

4、获取字符串的字节数

/**
 * 获取字符串的字节数 -- 中文2,英文1
 * @param str
 * @returns {number}
 */
export function getLength(str) {
  let realLength = 0,
    charCode = -1;
  for (let i = 0; i < str.length; i++) {
    charCode = str.charCodeAt(i);
    if (charCode >= 0 && charCode <= 128) {
      realLength += 1;
    } else {
      realLength += 2;
    }
  }
  return realLength;
}

5、base64转化成file文件

/**
 * base64转化成file文件(兼容ie)
 * @param {*} base64Data
 * @param {*} fileName
 */
export const dataURLtoFile = function (base64Data, fileName) {
  let blob = dataURLtoBlob(base64Data);
  let file = blobToFile(blob, fileName);
  return file;
};

function dataURLtoBlob(base64Data) {
  let arr = base64Data.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new Blob([u8arr], { type: mime });
}

function blobToFile(theBlob, fileName) {
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  return theBlob;
}

6、将秒转化为时分秒

export const formatSeconds = function (value) {
  if (!value) {
    return '';
  }
  var theTime = parseInt(value); // 秒
  var middle = 0; // 分
  var hour = 0; // 小时

  if (theTime > 60) {
    middle = parseInt(theTime / 60);
    theTime = parseInt(theTime % 60);
    if (middle > 60) {
      hour = parseInt(middle / 60);
      middle = parseInt(middle % 60);
    }
  }
  var result = '' + parseInt(theTime) + '秒';
  if (middle > 0) {
    result = '' + parseInt(middle) + '分' + result;
  }
  if (hour > 0) {
    result = '' + parseInt(hour) + '时' + result;
  }
  return result;
};

7、判断手机设备类型

export const whichDevice = function () {
  const device = {};
  const ua = navigator.userAgent;
  const android = ua.match(/(Android);?[\s/]+([\d.]+)?/);
  const ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
  const ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/);
  const iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);

  device.ios = false;
  device.android = false;

  if (android) {
    device.android = true;
  }

  if (ipad || iphone || ipod) {
    device.ios = true;
  }
  return device;
};

8、获取地址栏上指定参数

/**
 * 获取url地址栏指定参数
 * @returns {*param}
 */

export const getPageUrlParam = function(name) {
  //获取?后面的参数
  let urlSearch = location.search || location.hash;
  let urlValue = '';
  //以?*&来拆分
  let params = urlSearch.split(/[?*&]/);
  for (let i = 0; i < params.length; i++) {
    //如果url参数里包含传递过来name字段,则取=后面的部分
    if (params[i].indexOf(name) >= 0) {
      urlValue = params[i].split('=')[1];
      return urlValue;
    }
  }
  return urlValue;
};

9、对象深度查找

/**
 * 对象深度查找
 * @param target    {Object}   需要处理的原始对象
 * @param callback  {Function} filter函数,接收一个参数,即当前调用环境对象
 * @returns         {Object}   符合筛选条件的对象
 */
function findDeeply(target, callback) {
  const flag = typeOf(target);
  let result;
  if (flag === 'array') {
    for (let i = 0, item; (item = target[i++]); ) {
      result = findDeeply(item, callback);
      if (result) return result;
    }
  } else if (flag === 'object') {
    if (callback(target)) {
      return target;
    }
    for (let k in target) {
      result = findDeeply(target[k], callback);
      if (result) return result;
    }
  }
}

10、监听浏览器的回退按钮事件(H5的手机自带左滑回退事件)

 window.removeEventListener('popstate', urlChange);
 window.addEventListener('popstate', urlChange);

function urlChange() {
    // this.$route vue中获取当前路由信息做一些处理
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值