前端开发工作中常用的JavaScript片段

2017年05月03日

前端开发过程中总是会发现有些JS片段需要被经常使用，今天就来总结一下工作中常用到的一些JS片段，如果你经常使用jQuery库有可能很多片段用不到，但是我还是提倡大家使用原生JS，毕竟这才是根本，很多库文件的源码也是这么写的

常用兼容方法(IE8+)
- insertAfter() 紧挨着某元素后面插入DOM元素
- getElementByClassName() 根据类名获取DOM元素，IE9+已实现
- trim() 除去字符串左右空格
- EventUtil 跨浏览器的事件处理程序，属于一个名为EventUtil的对象
常用工具类
简单特效类
- 返回页面顶部

常用兼容方法(IE8+)

insertAfter()

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

getElementByClassName()

这个方法比较少用，IE8+已支持querySelector()和querySelectorAll()

function getElementsByClassName(element, names) {
    if (element.getElementsByClassName) {
        return element.getElementsByClassName(names);
    } else {
        var elements = element.getElementsByTagName('*');
        var result = [],
            element,
            classNameStr,
            flag;
        names = names.split(' ');
        for (var i = 0; element = elements[i]; i++) {
            classNameStr = ' ' + element.className + ' ';
            flag = true;
            for (var j = 0, name; name = names[j]; j++) {
                if (classNameStr.indexOf(' ' + name + ' ') == -1) {
                    flag = false;
                    break;
                }
            }
            if (flag) {
                result.push(element);
            }
        }
        return result;
    }
}

trim()

if (!String.prototype.trim) {
    String.prototype.trim = function () {
      return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
    };
}

EventUtil

var EventUtil = {
    //添加事件
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false); //使用DOM2级方法添加事件
        } else if (element.attachEvent) { //使用IE方法添加事件
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler; //使用DOM0级方法添加事件
        }
    },
    //取消事件
    removeHandler: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    //使用这个方法跨浏览器取得event对象
    getEvent: function(event) {
        return event ? event : window.event;
    },
    //返回事件的实际目标
    getTarget: function(event) { 
        return event.target || event.srcElement;
    },
    //阻止事件的默认行为
    preventDefault: function(event) { 
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    //阻止事件冒泡
    stopPropagation: function(event) { 
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    },
    //获取mouseover和mouseout相关元素
    getRelatedTarget: function(event) { 
        if (event.relatedTarget) {
            return event.relatedTarget;
        } else if (event.toElement) {
            return event.toElement;
        } else if (event.formElement) {
            return event.formElement;
        } else {
            return null;
        }
    },
    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
    getButton: function(event) { 
        if (document.implementation.hasFeature("MouseEvents", "2.0")) {
            return event.button;
        } else {
            switch (event.button) { //将IE模型下的button属性映射为DOM模型下的button属性
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0; //按下的是鼠标主按钮（一般是左键）
                case 2:
                case 6:
                    return 2; //按下的是中间的鼠标按钮
                case 4:
                    return 1; //鼠标次按钮（一般是右键）
            }
        }
    },
    //获取表示鼠标滚轮滚动方向的数值
    getWheelDelta: function(event) { 
        if (event.wheelDelta) {
            return event.wheelDelta;
        } else {
            return -event.detail * 40;
        }
    },
    //以跨浏览器取得相同的字符编码，需在keypress事件中使用
    getCharCode: function(event) { 
        if (typeof event.charCode == "number") {
            return event.charCode;
        } else {
            return event.keyCode;
        }
    }
};

常用工具类

移动端和PC端网址自动切换

var system = { 
    win: false, 
    mac: false, 
    xll: false, 
    ipad:false 
}; 
var p = navigator.platform; 
system.win = p.indexOf("Win") == 0; 
system.mac = p.indexOf("Mac") == 0; 
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
if (system.win || system.mac || system.xll||system.ipad) { 
    window.location.href = "http://www.baidu.com/"; 
} else { 
    window.location.href = "http://wap.baidu.com/"; 
}

常用正则表达式

虽然这里列出了常用的正则表达式，但是还是建议各位看官在用的时候多加考虑一下是否适合你的项目

//验证邮箱
//验证规则：姑且把邮箱地址分成“第一部分@第二部分”这样
//第一部分：由字母、数字、下划线、中划线、点号组成，
//第二部分：为一个域名，域名由字母、数字、中划线、根域名组成，而根域名一般为.xx或.xxx
/^[A-Za-z0-9]+([\-\_\.][A-Za-z0-9])*@[A-Za-z0-9]+([\-\.][A-Za-z0-9]+)*\.[A-Za-z]{2,3}$/;

//验证固定电话（区号+号码 010-88888888,0955-7777777 ）
//验证规则:区号以0开头后面2~3位是数字,区号与号码之间可以无连接符，也可以“-”连接,后面的号码由7~8位数字组成,
/^0\d{2,3}-?\d{7,8}$/

//验证手机号
//验证规则：首位以数字1开头，第二位数字目前包括3,4,5,7,8，剩下的是9位数字
/^1[3|4|5|7|8]\d{9}$/
//验证规则：11位数字，以1开头。
/^1\d{10}$/
//考虑到第二位可能会出现新的数字，建议使用第二种方式  

//验证QQ
//验证规则：首位不以数字0开头，剩下的4~9位是数字
/^[1-9]\d{4,9}$/

//验证身份证号码 这里是非严格验证
//验证规则：这里分为18为纯数字的身份证号和17位数字加字母X或x的两种情况
/(^\d{18}$)|(^\d{17}(\d|X|x)$)/

//验证URL
/^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

//匹配字母、数字、中文字符
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

//匹配中文字符的正则表达式
/[\u4e00-\u9fa5]/

//匹配双字节字符(包括汉字在内)
/[^\x00-\xff]/

//密码强度正则
//最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

获取DOM元素的实际样式

function getStyle(element, cssPropertyName) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(element)[cssPropertyName];
    } else {
        return element.currentStyle[cssPropertyName];
    }
}

日期格式化

function add0(t){return t = t < 10 ? '0'+ t : t}
function format(time){
    var y = time.getFullYear(),
    m = time.getMonth() + 1,
    d = time.getDate(),
    hh = time.getHours(),
    mm = time.getMinutes(),
    ss = time.getSeconds();
    return y+"-"+add0(m)+"-"+add0(d)+" "+add0(hh)+":"+add0(mm)+":"+add0(ss);
}

将url中参数以对象的形式输出

function parseQueryString(url){
    var str=url.split("?")[1];
    var items=str.split("&");
    var result={};
    var arr=[];
    for(var i=0; i<items.length; i++){
        arr=items[i].split('=');
        result[arr[0]]=arr[1];
    }
    return result;
}

将cookie中内容以对象形似输出

/**
 * 获取cookie并以对象形式输出
 * @return {name:value}
 */
function getCookie() {
    var cookie = {};
    var all = document.cookie;
    if (all === "") return cookie;
    var list = all.split(";");
    for (var i = 0; i < list.length; i++) {
        var item = list[i];
        var p = item.indexOf("=");
        var name = item.substring(0, p);
        name = decodeURIComponent(name);
        var value = item.substring(p + 1);
        value = decodeURIComponent(value);
        cookie[name] = value;
    }
    return cookie;
}

设置Cookie

/**
 * 设置cookie
 * @param {[type]} name    [设置的cookie名称]
 * @param {[type]} value   [设置的cookie值]
 * @param {[type]} expires [设置的cookie的过期时间]
 * @param {[type]} path    [设置的cookie的路径]
 * @param {[type]} domain  [设置的cookie关联的域名]
 * @param {[type]} secure  [设置的cookie是否使用安全协议传输数据，默认为空]
 */
function setCookie(name, value, expires, path, domain, secure) {
    var cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
    if (expires)
        cookie += "; expires=" + expires.toGMTString();
    if (path)
        cookie += "; path=" + path;
    if (domain)
        cookie += "; domain=" + domain;
    if (secure)
        cookie += "; secure=" + secure;
    document.cookie = cookie;
}

浏览器类型及IE浏览器版本检测

function browserType() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
    var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器  
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器  
    var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器  
    var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器  
    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器  
    var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器  

    if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (fIEVersion == 7) {
            console.log("this is IE7");
            return false;
        }
        else if (fIEVersion == 8) {
            console.log("this is IE8");
            return false;
        }
        else if (fIEVersion == 9) {
            console.log("this is IE9");
            return false;
        }
        else if (fIEVersion == 10) {
            console.log("this is IE10");
            return false;
        }
        else if (fIEVersion == 11) {
            console.log("this is IE11");
            return false;
        }
        else {
            console.log("IE版本过低");
            return false;
        }
    }
    if (isFF) {
        console.log("this is firefox");
        return false;
    }
    if (isOpera) {
        console.log("this is opera");
        return false;
    }
    if (isSafari) {
        console.log("this is safari");
        return false;
    }
    if (isChrome) {
        console.log("this is chrome");
        return false;
    }
    if (isEdge) {
        console.log("this is edge");
        return false;
    }
}

简单特效类

返回页面顶部

$(window).scroll(function() {
    if($(window).scrollTop() > $(window).height() / 2) {
        $("#toTop").show(500);
    }else{
        $("#toTop").hide(500);
    }
})
$("#toTop").click(function() {
    $("html,body").animate({
        scrollTop: 0
    }, 500);
});

原文链接: https://jesse121.github.io/blog/articles/2017/05/03.html

版权声明: 转载请注明出处.

前端之路

路漫漫其修远兮，吾将上下而求索