项目插件01

1.驼峰命名=>中横线命名

function kebabCase(str) {
  const hyphenateRE = /([^-])([A-Z])/g;
  return str
    .replace(hyphenateRE, '$1-$2')
    .replace(hyphenateRE, '$1-$2')
    .toLowerCase();
}
 
kebabCase("aBXC")

//"a-b-x-c"

2.驼峰命名<=中横线命名

function camelCase(name) {
  const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
  const MOZ_HACK_REGEXP = /^moz([A-Z])/;
  return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
    return offset ? letter.toUpperCase() : letter;
  }).replace(MOZ_HACK_REGEXP, 'Moz$1');
}
camelCase("n-ww-m") 
//"nWwM"
camelCase("-n-ww-m")
//"nWwM"

链接

3.获取dom元素的样式

/**
 * 获取样式属性值
 * @param element
 * @param styleName
 * @return {*}
 */
function getStyle(element, styleName) {
    if (!element || !styleName) return null;
    styleName = camelCase(styleName);
    if (styleName === 'float') {
        styleName = 'cssFloat';
    }
    try {
        const computed = document.defaultView.getComputedStyle(element, '');
        return element.style[styleName] || computed ? computed[styleName] : null;
    } catch (e) {
        return element.style[styleName];
    }
}

链接

4.rem动态屏幕适配解决方案

/**
 * 计算rem
 * @param doc
 * @param win
 */
function calculateRem(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        reCalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //判断
            if (clientWidth >= 1280) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 1280) + 'px';
            }

        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, reCalc, false);
    doc.addEventListener('DOMContentLoaded', reCalc, false);
}

链接

5.元素显隐切换

/**
 * 元素显隐切换
 * 获取样式属性切换
 * getStyle(a,b)获取dom元素
 * @param ele
 */
function toggle(ele) {
    let display = getStyle(ele, 'display');
    display = display === 'none' ? 'block' : 'none';
    ele.style.display = display;
}

链接1 链接2

6.dom元素添加移除类

/**
 * dom元素添加类
 * @param obj
 * @param cls
 */
function addClass(obj, cls) {
    var obj_class = obj.className,//获取 class 内容.
        blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
    var added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.
    obj.className = added;//替换原来的 class.
}

/**
 * dom元素移除类
 * @param obj
 * @param cls
 */
function removeClass(obj, cls) {
    var obj_class = ' ' + obj.className + ' ';//获取 class 内容, 并在首尾各加一个空格. ex) 'abc    bcd' -> ' abc    bcd '
    obj_class = obj_class.replace(/(\s+)/gi, ' '),//将多余的空字符替换成一个空格. ex) ' abc    bcd ' -> ' abc bcd '
        removed = obj_class.replace(' ' + cls + ' ', ' ');//在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
    var removed = removed.replace(/(^\s+)|(\s+$)/g, '');//去掉首尾空格. ex) 'bcd ' -> 'bcd'
    obj.className = removed;//替换原来的 class.
}

链接

7.悬浮某一元素，显示另一元素

/**
 * 悬浮某一元素，显示另一元素
 * @param showElements {NodeList} 显示元素集合或者单个元素
 * @param hideElement  { Object }       隐藏元素
 * @param showEnterFn  { function } 显示元素悬浮时的回调函数
 * @param showLeaveFn  { function } 显示元素离开时的回调函数
 * @param ctx          { Object } 上下文
 * @param capture      { function } 函数返回true, 不执行回调函数
 */
function enterLeave(showElements, hideElement, showEnterFn, showLeaveFn, ctx, capture) {
    var leave = false, timer = null;

    if (Object.prototype.toString.call(showElements).indexOf('array') == -1
        && Object.prototype.toString.call(showElements).indexOf('NodeList') == -1) {
        showElements = [showElements];
    }

    for (var s = 0; s < showElements.length; s++) {
        var showElement = showElements[s];
        (function (showElement, idx) {
            showElement.addEventListener('mouseenter', function (evt) {
                if (typeof capture === 'function' && capture()) {
                    return;
                }
                leave = false;
                hideElement.style.display = 'block';
                if (showEnterFn) {
                    if (!ctx) {
                        ctx = showElement;
                    }
                    showEnterFn.call(ctx, evt, showElement, idx);
                }
            });

            showElement.addEventListener('mouseleave', function (evt) {
                if (typeof capture === 'function' && capture()) {
                    return;
                }
                mouseLeave();
                if (showLeaveFn) {
                    if (!ctx) {
                        ctx = showElement;
                    }
                    showLeaveFn.call(ctx, evt, showElement);
                }
            });
        })(showElement, s);
    }

    hideElement.addEventListener('mouseenter', function () {
        leave = false;
    });

    hideElement.addEventListener('mouseleave', mouseLeave);

    function mouseLeave() {
        leave = true;

        if (timer) {
            return;
        }

        timer = setTimeout(function () {
            if (leave) {
                hideElement.style.display = 'none';
            }
            timer = null;
        }, 200);
    }
}

链接

7.时间戳

/**
 * 格式化时间戳 Y-m-d
 * 1 分钟以内：刚刚
 * 1-2分钟：1分钟前
 * 过了1个小时（60分钟以内使用xx分钟前）：1小时前
 * 过了1个24:00：昨天
 * 过了2个24:00：2天前
 * 过了7个24:00：xx月xx日
 * 不是本年：xxxx年xx月xx日
 * @param {String} format Y-m-d 
 * @param {Number} timestamp 时间戳   
 * @return {String}
 */
function timeago(dateTimeStamp){
    var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
    var hour = minute * 60;
    var day = hour * 24;
    var week = day * 7;
    var halfamonth = day * 15;
    var month = day * 30;
    var now = new Date().getTime(); //获取当前时间毫秒
    var dateTime = new Date(dateTimeStamp).getTime()
    var diffValue = now - dateTime;//时间差
    if(diffValue < 0){
    return;
    }
    var minC = diffValue/minute; //计算时间差的分，时，天，周，月
    var hourC = diffValue/hour;
    var dayC = diffValue/day;
    var weekC = diffValue/week;
    var monthC = diffValue/month;
    if(monthC >= 1 && monthC <= 3){
    result = " " + parseInt(monthC) + "月前"
    }else if(weekC >= 1 && weekC <= 3){
    result = " " + parseInt(weekC) + "周前"
    }else if(dayC >= 1 && dayC <= 6){
    result = " " + parseInt(dayC) + "天前"
    }else if(hourC >= 1 && hourC <= 23){
    result = " " + parseInt(hourC) + "小时前"
    }else if(minC >= 1 && minC <= 59){
    result =" " + parseInt(minC) + "分钟前"
    }else if(diffValue >= 0 && diffValue <= minute){
    result = "刚刚"
    }else {
    var datetime = new Date();
    datetime.setTime(dateTime);
    var Nyear = datetime.getFullYear();
    var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
    var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
    var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
    var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
    var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
    result = Nyear + "-" + Nmonth + "-" + Ndate
    }
    return result;
}