阅读源码经常会发现一些比较好用的工具函数或者, 或者经常会用到的一些工具函数, 这是源码阅读发现工具函数的第一篇文章。

获取当前浏览器滚动条的宽度

业务页面中，部分容器可能需要精准的获取当前滚动条的宽度, 以防出现滚动条对当前容器造成的一些样式影响。

export function getScrollBarSize(fresh) {
  if (!getScrollBarSize.cached) {
    const inner = document.createElement('div');
    inner.style.width = '100%';
    inner.style.height = '200px';

    const outer = document.createElement('div');
    const outerStyle = outer.style;
    outerStyle.postiion = 'absolute';
    outerStyle.left = 0;
    outerStyle.top = 0;
    outerStyle.pointEvents = 'none';
    outerStyle.visibility = 'hidden';
    outerStyle.width = '200px';
    outerStyle.height = '150px';
    outerStyle.overflow = 'hidden';
    outer.appendChild(inner);
    document.body.appendChild(outer);
    const widthContained = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    let widthScroll= inner.offsetWidth;
    if (widthContained === widthScroll) {
      widthScroll = outer.clientWidth;
    }
    document.body.removeChild(outer);
    getScrollBarSize.cached = widthContained - widthScroll;
    return getScrollBarSize.cached;
  }
  return getScrollBarSize.cached
}

函数或变量名称规范的替换

常见的有驼峰与连字符的互相转换

// 驼峰转连字符
function camelcaseToHyphen (str) {
    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
// 连字符转驼峰 'good-job' -> 'goodJob' 'good_job' -> 'goodJob'
function camelCase(name) {
  const SPECIAL_CHARS_REGEXP = /([\-\_]+(.))/g;
  return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
      return offset ? letter.toUpperCase() : letter;
  })
}

字符串首字母大写

function firstUpperCase(str) {
    return str.toString()[0].toUpperCase() + str.toString().slice(1);
}

数据类型判断

function is(obj) {
  const toString = Object.prototype.toString;
  return toString.call(obj).slice(8, -1).toLowerCase();
}