js 一些基础工具方法

1、类型判断

function isUndef (v) {
    return v === undefined || v === null
}
  
function isDef (v) {
    return v !== undefined && v !== null
}
  
function isTrue (v) {
    return v === true
}
  
function isFalse (v) {
    return v === false
}
  

 

判断数组

function isArray(obj) {
  return Array.isArray ? Array.isArray(obj) : Object.prototype.toString.call(obj) === '[object Array]';
}

判断对象

function isObject(obj) {
  var type = typeof obj;
  return type === 'function' || type === 'object' && !!obj;
};

判断DOM元素

function isElement(obj) {
  // 确保 obj 不是 null 且 obj.nodeType === 1
  return !!(obj && obj.nodeType === 1);
};

 

 vue2.6.11.js源码一些工具类函数：

addClass方法

var whitespaceRE = /\s+/;
// IE10以下不支持classList属性，所以我们通过getAttribute来进行获取元素类名
function addClass (el, cls) {
    if (!cls || !(cls = cls.trim())) {
        return
    }
    if (el.classList) {
        // 多个类名
        if (cls.indexOf(' ') > -1) {
            cls.split(whitespaceRE).forEach(function (c) { return el.classList.add(c); });
            } else {
                el.classList.add(cls);
            }
        } else {
            var cur = " " + (el.getAttribute('class') || '') + " ";
            if (cur.indexOf(' ' + cls + ' ') < 0) {
                el.setAttribute('class', (cur + cls).trim());
            }
        }
    }
}

 

removeClass方法

// IE10以下不支持classList属性，所以我们通过getAttribute来进行获取元素类名
function removeClass (el, cls) {
    if (!cls || !(cls = cls.trim())) {
        return
    }
    if (el.classList) {
        // 移除多个类名
        if (cls.indexOf(' ') > -1) {
            cls.split(whitespaceRE).forEach(function (c) { return el.classList.remove(c); });
        } else {
            el.classList.remove(cls);
        }
        if (!el.classList.length) {
            // 移除class属性
            el.removeAttribute('class');
        } 
    } else {
        var cur = " " + (el.getAttribute('class') || '') + " ";
        var tar = ' ' + cls + ' ';
        while (cur.indexOf(tar) >= 0) {
            cur = cur.replace(tar, ' ');
        }
        cur = cur.trim();
        if (cur) {
            el.setAttribute('class', cur);
        } else {
            el.removeAttribute('class');
        }
    }
}

当然如果我们不考虑IE10以下的话也可以使用下面的代码实现添加/删除元素类名：

// 添加删除DOM元素的类名
// 判断是否有class
function hasClass(ele, cls) {
    return ele.className.match(new RegExp("\\s|^" + cls + "(\\s|$)"));
}

// 添加cls
function addClass(ele, cls) {
    if(!hasClass(ele, cls)){
        ele.className += " " + cls;
    }
}

// 删除cls
function removeClass(ele, cls) {
    if(hasClass(ele, cls)){
        let expreg = new RegExp("\\s|^" + cls + "(\\s|$)");
        ele.className = ele.className.replace(expreg, " ");
    }
}

注： IE下获取SVG元素的className为SVGAnimatedString类型（如下图），这一点需要注意

判断是否支持Webp格式的图片

function isSupportWebp() {
    try {
        return window.UseWebP && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;
    } catch (err) {
        return false;
    }
}

判断IE 

function isIE() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
        var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; //判断是否是IE11浏览器
        return isIE || isEdge || isIE11;
    }