usefull function

1 驼峰命名修改为单线连接

  export const kebabCase = function(str) { /"AaBCc"/ 
    const hyphenateRE = /([^-])([A-Z])/g;
    return str
      .replace(hyphenateRE, '$1-$2')  //Aa-BCc
      .replace(hyphenateRE, '$1-$2') //Aa-B-Cc
      .toLowerCase();//aa-b-cc
};

2去除字符串前后空格

  const trim = function(string) {
  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
};

3将:-_等变成驼峰式，如foo-bar变成fooBar

/**
 * 将:-_等变成驼峰式，如foo-bar变成fooBar
 * @param name 要处理的字符串
 * @returns {*} 处理后的字符串
 */
const camelCase = function(name) {
  return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
    return offset ? letter.toUpperCase() : letter;
  }).replace(MOZ_HACK_REGEXP, 'Moz$1');
};

4添加事件监听

/**
 * 添加事件监听
 * @param element 要监听的元素
 * @param event 要监听的事件
 * @param handler 要执行的函数
 */
export const on = (function() {
  if (!isServer && document.addEventListener) {  // 浏览器环境，且非IE9以下版本
    return function(element, event, handler) {
      if (element && event && handler) {
        element.addEventListener(event, handler, false);
      }
    };
  } else {
    return function(element, event, handler) {
      if (element && event && handler) {
        element.attachEvent('on' + event, handler);
      }
    };
  }
})(); 这里是一个匿名函数,可以往里面传参数

5:移除事件监听

  /**
 * @param element 监听的元素
 * @param event 监听的事件
 * @param handler 执行的函数
 */
export const off = (function() {
  if (!isServer && document.removeEventListener) {
    return function(element, event, handler) {
      if (element && event) {
        element.removeEventListener(event, handler, false);
      }
    };
  } else {
    return function(element, event, handler) {
      if (element && event) {
        element.detachEvent('on' + event, handler);
      }
    };
  }
})();

6绑定一次性事件监听

/**
 * @param el 要监听的元素
 * @param event 要监听的事件
 * @param fn 回调函数
 */
export const once = function(el, event, fn) {
  var listener = function() {
    if (fn) {  // 如果有回调，执行一次
      fn.apply(this, arguments);
    }
    off(el, event, listener);  // 移除监听
  };
  on(el, event, listener);
};

7 判断是否包含某类样式名

/**
 * @param el 要检测的元素
 * @param cls 要检测的类名
 * @returns {boolean}
 */
export function hasClass(el, cls) {
  if (!el || !cls) return false;  // 参数不足
  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');  // 类名不能带空格
  if (el.classList) {  // 先看看支不支持原生的方法
    return el.classList.contains(cls);
  } else {
    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;  // 前后加空格来保证是完整匹配
  }
};

8 给元素添加某些类

/**
 * @param el 要处理的元素
 * @param cls 要添加的类
 */
export function addClass(el, cls) {
  if (!el) return;
  var curClass = el.className;
  var classes = (cls || '').split(' ');  // 将多个类名以空格拆分

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;  // 空格等则跳过

    if (el.classList) {
      el.classList.add(clsName);
    } else {
      if (!hasClass(el, clsName)) {  // 保证不重复添加
        curClass += ' ' + clsName;
      }
    }
  }
  if (!el.classList) {  // 更新类
    el.className = curClass;
  }
};

9 给元素移除某些类

/**
 * @param el 要处理的元素
 * @param cls 要移除的类
 */
export function removeClass(el, cls) {
  if (!el || !cls) return;
  var classes = cls.split(' ');
  var curClass = ' ' + el.className + ' ';

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;

    if (el.classList) {  // 优先使用原生方法
      el.classList.remove(clsName);
    } else {
      if (hasClass(el, clsName)) {  // 使用空格替换掉相应的类
        curClass = curClass.replace(' ' + clsName + ' ', ' ');
      }
    }
  }
  if (!el.classList) {  // 移除首尾的空格
    el.className = trim(curClass);
  }
};

10 获取和样式设置，分IE9一下和其他两种方式处理

  
/**
 * @type {Function}
 * @param element 要获取样式的元素
 * @param styleName 要获取的样式名
 */
export const getStyle = ieVersion < 9 ? function(element, styleName) {
  if (isServer) return;  // 如果是服务器端渲染直接返回
  if (!element || !styleName) return null;  // 参数不足
  styleName = camelCase(styleName);  // 将样式名转成驼峰式
  if (styleName === 'float') {  // float特殊处理
    styleName = 'styleFloat';
  }
  try {
    switch (styleName) {
      case 'opacity':  // opacity特殊处理
        try {
          return element.filters.item('alpha').opacity / 100;
        } catch (e) {
          return 1.0;
        }
      default:
        return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);
    }
  } catch (e) {
    return element.style[styleName];
  }
} : function(element, styleName) {
  if (isServer) return;
  if (!element || !styleName) return null;
  styleName = camelCase(styleName);
  if (styleName === 'float') {  // float特殊处理
    styleName = 'cssFloat';
  }
  try {
    var computed = document.defaultView.getComputedStyle(element, '');  // defaultView即window对象
    return element.style[styleName] || computed ? computed[styleName] : null;
  } catch (e) {
    return element.style[styleName];
  }
};

/**
 * 设置元素的样式
 * @param element 要设置的元素
 * @param styleName 要设置的样式
 * @param value 要设置的值
 */
export function setStyle(element, styleName, value) {
  if (!element || !styleName) return;

  if (typeof styleName === 'object') {  // 如果是对象则拆分后依次设置
    for (var prop in styleName) {
      if (styleName.hasOwnProperty(prop)) {  // 过滤掉非法的键值对
        setStyle(element, prop, styleName[prop]);
      }
    }
  } else {
    styleName = camelCase(styleName);
    if (styleName === 'opacity' && ieVersion < 9) {  // opacity特殊处理
      element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
    } else {
      element.style[styleName] = value;
    }
  }
};

10 * 判断元素是否相交

/**
 * @param el 要判定的元素
 * @param container 被判定的容器
 */
export const isInContainer = (el, container) => {
  if (isServer || !el || !container) return false;

  const elRect = el.getBoundingClientRect();
  let containerRect;

  if ([window, document, document.documentElement, null, undefined].includes(container)) {
    containerRect = {
      top: 0,
      right: window.innerWidth,
      bottom: window.innerHeight,
      left: 0
    };
  } else {
    containerRect = container.getBoundingClientRect();
  }

  return elRect.top < containerRect.bottom &&
    elRect.bottom > containerRect.top &&
    elRect.right > containerRect.left &&
    elRect.left < containerRect.right;
};

11 判定元素是否可以滚动

/**
 * @param el被判定的容器
 * @param vertical 被判定的容器
 */
export const isScroll = (el, vertical) => {
  if (isServer) return;

  const determinedDirection = vertical !== null || vertical !== undefined;
  const overflow = determinedDirection
    ? vertical
      ? getStyle(el, 'overflow-y')
      : getStyle(el, 'overflow-x')
    : getStyle(el, 'overflow');

  return overflow.match(/(scroll|auto)/);
};

11

/**
* @param el 要判定的元素
* @param container 被判定的容器
*/
export const getScrollContainer = (el, vertical) => {
 if (isServer) return;

 let parent = el;
 while (parent) {
   if ([window, document, document.documentElement].includes(parent)) {
     return window;
   }
   if (isScroll(parent, vertical)) {
     return parent;
   }
   parent = parent.parentNode;
 }

 return parent;
};