javascript个人代码备份2015-07-29

本文深入探讨了信息技术领域的核心内容,包括前端开发、后端开发、移动开发、游戏开发、大数据开发、开发工具等细分技术领域。文章详细介绍了各领域的关键技术、工具和实践案例,旨在为读者提供全面的技术视野和实际应用指导。
function $(id) {
    return document.getElementById(id);
}

/**
 * [clientCheck 客户端检测]
 * @return {[type]} [description]
 */
function clientCheck() {
    //rendering engines
    var engine = {
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,

        //complete version
        ver: null
    };

    //browsers
    var browser = {

        //browsers
        ie: 0,
        firefox: 0,
        safari: 0,
        konq: 0,
        opera: 0,
        chrome: 0,

        //specific version
        ver: null
    };


    //platform/device/OS
    var system = {
        win: false,
        mac: false,
        x11: false,

        //mobile devices
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        nokiaN: false,
        winMobile: false,

        //game systems
        wii: false,
        ps: false
    };

    //detect rendering engines/browsers
    var ua = navigator.userAgent;
    if (window.opera) {
        engine.ver = browser.ver = window.opera.version();
        engine.opera = browser.opera = parseFloat(engine.ver);
    } else if (/AppleWebKit\/(\S+)/.test(ua)) {
        engine.ver = RegExp["$1"];
        engine.webkit = parseFloat(engine.ver);

        //figure out if it's Chrome or Safari
        if (/Chrome\/(\S+)/.test(ua)) {
            browser.ver = RegExp["$1"];
            browser.chrome = parseFloat(browser.ver);
        } else if (/Version\/(\S+)/.test(ua)) {
            browser.ver = RegExp["$1"];
            browser.safari = parseFloat(browser.ver);
        } else {
            //approximate version
            var safariVersion = 1;
            if (engine.webkit < 100) {
                safariVersion = 1;
            } else if (engine.webkit < 312) {
                safariVersion = 1.2;
            } else if (engine.webkit < 412) {
                safariVersion = 1.3;
            } else {
                safariVersion = 2;
            }

            browser.safari = browser.ver = safariVersion;
        }
    } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq = parseFloat(engine.ver);
    } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);

        //determine if it's Firefox
        if (/Firefox\/(\S+)/.test(ua)) {
            browser.ver = RegExp["$1"];
            browser.firefox = parseFloat(browser.ver);
        }
    } else if (/MSIE ([^;]+)/.test(ua)) {
        engine.ver = browser.ver = RegExp["$1"];
        engine.ie = browser.ie = parseFloat(engine.ver);
    }

    //detect browsers
    browser.ie = engine.ie;
    browser.opera = engine.opera;


    //detect platform
    var p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

    //detect windows operating systems
    if (system.win) {
        if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
            if (RegExp["$1"] == "NT") {
                switch (RegExp["$2"]) {
                    case "5.0":
                        system.win = "2000";
                        break;
                    case "5.1":
                        system.win = "XP";
                        break;
                    case "6.0":
                        system.win = "Vista";
                        break;
                    case "6.1":
                        system.win = "7";
                        break;
                    default:
                        system.win = "NT";
                        break;
                }
            } else if (RegExp["$1"] == "9x") {
                system.win = "ME";
            } else {
                system.win = RegExp["$1"];
            }
        }
    }

    //mobile devices
    system.iphone = ua.indexOf("iPhone") > -1;
    system.ipod = ua.indexOf("iPod") > -1;
    system.ipad = ua.indexOf("iPad") > -1;
    system.nokiaN = ua.indexOf("NokiaN") > -1;

    //windows mobile
    if (system.win == "CE") {
        system.winMobile = system.win;
    } else if (system.win == "Ph") {
        if (/Windows Phone OS (\d+.\d+)/.test(ua)) {;
            system.win = "Phone";
            system.winMobile = parseFloat(RegExp["$1"]);
        }
    }


    //determine iOS version
    if (system.mac && ua.indexOf("Mobile") > -1) {
        if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)) {
            system.ios = parseFloat(RegExp.$1.replace("_", "."));
        } else {
            system.ios = 2; //can't really detect - so guess
        }
    }

    //determine Android version
    if (/Android (\d+\.\d+)/.test(ua)) {
        system.android = parseFloat(RegExp.$1);
    }

    //gaming systems
    system.wii = ua.indexOf("Wii") > -1;
    system.ps = /playstation/i.test(ua);

    //return it
    return {
        engine: engine,
        browser: browser,
        system: system
    };

}



/**
 * [viewPortSize description]
 * @return {[String]} [字符串格式的宽度和高度]
 */
function viewPortSize() {
    // IE9+ 等主流浏览器
    var pageWidth = window.innerWidth,
        pageHeight = window.innerHeight;

    // IE8和以下浏览器
    if (typeof pageWidth != 'number') {
        // 标准模式
        if (document.compatMode == 'CSS1Compat') {
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        } else {
            // 混杂模式
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
    }

    return '视口宽度' + pageWidth + ' 视口宽度' + pageWidth
}


/**
 * [screenWidthHeight 获取屏幕的宽度和高度,屏幕的可用宽度和可用高度]
 * @return {[String]} [字符串]
 */
function screenWidthHeight() {
    var availW = screen.availWidth,
        availH = screen.availHeight,
        w = screen.width,
        h = screen.height;

    var str = '可用的宽度: ' + availW + '可用的高度: ' + availH + '\n' + '屏幕宽度: ' + w + '屏幕高度: ' + h
    return str;
}

/**
 * [getQueryStringArgs 查询字符串参数]
 * @return {[type]} [返回一个保存了值的对象]
 */
function getQueryStringArgs() {
    // 取得字符串,并去掉开头的问号。
    var qs = location.search.length > 0 ? location.search.substring(1) : '';
    // 保存数据的对象
    var o = {},
        // 每条数据项
        item,
        name,
        value,
        // 将字符串分割成数组
        qsArray = qs.split('&');

    for (var i = 0, len = qsArray.length; i < len; i++) {
        item = qsArray[i].split('=');
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);

        if (name.length) {
            o[name] = value;
        }
    }
    return o;
}

/**
 * [isHostMethod 目前可靠的能力检测,确定对象是否具有某个属性]
 * @param  {[type]}  obj [对象]
 * @param  {[type]}  pro [属性]
 * @return {Boolean}     [布尔值]
 * 
 * typeof document.createElement在IE8中和之前返回的是object而不是function
 * IE的typeof xhr.open返回unknown
 * 
 * 实例
 * console.log(isHostMethod(document,'createElement'));
 */
function isHostMethod(obj, pro) {
    var t = typeof obj[pro];

    return t == 'function' || (!!(t == 'object' && obj[pro])) || t == 'unknown';
}


function eventUtil() {
    return {
        // 添加事件
        addHandler: function(ele, type, handler) {
            if (ele.addEventListener) {
                // 冒泡
                ele.addEventListener(type, handler, false);
            } else if (ele.attachEvent) {
                ele.attachEvent('on' + type, handler);
            } else {
                ele['on' + type] = handler;
            }
        },
        // 移除事件
        removeHandler: function(ele, type, handler) {
            if (ele.removeEventListener) {
                ele.removeEventListener(type, handler, false);
            } else if (ele.detachEvent) {
                ele.detachEvent('on' + type, handler);
            } else {
                ele['on' + type] = null;
            }
        },
        //获取事件对象
        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 {
                // IE阻止默认行为
                event.returnValue = false;
            }
        },
        // 阻止冒泡
        stopPropagation: function(event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                // IE取消冒泡
                event.cancelBubble = true;
            };
        },
        // 页面坐标位置
        pageX: function(event) {
            var pageX = event.pageX;
            if (pageX === undefined) {
                pageX = event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
            }
            return pageX;
        },
        pageY: function(event) {
            var pageY = event.pageY;
            if (pageY === undefined) {
                pageY = event.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
            }
            return pageY;
        },
        // 获取相关元素
        getRelatedTarget: function(event) {
            if (event.relatedTarget) {
                return event.relatedTarget;
            } else if (event.toElement) {
                // IE8和以下
                return event.toElement;
            } else if (event.fromElement) {
                return event.fromElement;
            } else {
                return null;
            }
        },
        // 是否按住了功能键
        getCtrlAltShift: function(event) {
            var keys = [];
            if (event.shiftKey) {
                keys.push('shift');
            }

            if (event.ctrlKey) {
                keys.push('ctrl');
            }

            if (event.altKey) {
                keys.push('alt');
            }
            // windows键有些浏览器不兼容
            if (event.metaKey) {
                keys.push('meta');
            }

            return keys;
        },
        // 鼠标按钮
        getButton: function(event) {
            if (document.implementation.hasFeature('MouseEvents', '2.0')) {
                return event.button;
            } else {
                // IE8和以下
                switch (event.button) {
                    case 0:
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                        return 0;
                    case 2:
                    case 6:
                        return 2;
                    case 4:
                        return 1;
                }
            }
        },
        // 鼠标滚轮事件
        // 实例:
        // var eventObj = eventUtil();
        // function handlerMouseWheel(event) {
        //     var e = eventObj.getEvent(event);
        //     console.log(eventObj.getWheelDelta(e));
        // }
        // eventObj.addHandler(document,'mousewheel',handlerMouseWheel);
        // eventObj.addHandler(document,'DOMMouseScroll',handlerMouseWheel);

        getWheelDelta: function(event) {
            if (event.wheelDelta) {
                var client = clientCheck();
                // opera9.5以下版本 正负号颠倒
                return (client.engine.opera && client.engine.opera < 9.5) ? -event.wheelDelta : event.wheelDelta;
            } else {
                // 
                return -event.detail * 40;
            }
        },
        // 获取字符编码
        getCharCode: function(event) {
            // IE9 火狐 chrome safari 都支持一个charCode属性
            // 并且这个属性只发生在keypress事件中
            // IE8和opera之前版本保存在keyCode中
            // 火狐里面enter键keypress事件为的charCode为0,其他浏览器为13
            if (typeof event.charCode == "number") {
                return event.charCode;
            } else {
                return event.keyCode;
            }
        }
    };
}













/**
 * [convertToArray 将nodelist节点转换成数组]
 * @param  {[Object]} nodeList [节点对象]
 * @return {[Array]}          [数组]
 */
function convertToArray(nodeList) {
    var array = null;
    try {
        // 针对非IE
        array = Array.prototype.slice.call(nodeList, 0);
    } catch (e) {
        array = new array();
        // IE8和之前浏览器是com对象
        for (var i = 0, len = nodeList.length; i < len; i++) {
            array.push(nodeList[i]);
        }
    }
    return array;
}

/**
 * [judgePreNextSelf 可以判断当前节点是否为唯一的节点]
 * @param  {[type]} ele [子节点对象]
 * @return {[type]}     [没有返回值]
 */
function judgePreNextSelf(ele) {
    if (ele.nextSibling === null) {
        alert('我是最后一个节点!');
    }
    if (ele.previousSibling === null) {
        alert('我是第一个节点!');
    }
    if (ele.nextSibling === ele.nextSibling) {
        alert('当前只有一个子节点!');
    }
}

/**
 * [judgeFirstLast 可以判断当前节点是否为唯一的节点]
 * @param  {[type]} ele [父节点对象]
 * @return {[type]}     [没有返回值]
 */
function judgeFirstLast(ele) {
    // 判断方法一
    if (ele.firstChild === ele.lastChild && ele.firstChild !== null) {
        alert('当前只有一个子节点!');
    }
    // 判断方法二
    if (ele.childNodes[0] === ele.childNodes[ele.childNodes.length - 1] && ele.firstChild !== null) {
        alert('当前只有一个子节点!');
    }

    // 没有子节点的时候
    if (ele.firstChild === null && ele.lastChild === null) {
        alert('当前元素没有子节点');
    }
}

/**
 * [outputAttributes 遍历元素的属性]
 * @param  {[Object]} ele [元素对象]
 * @return {[type]}     [返回用空格隔开的字符串]
 *
 * 实例
 * console.log(outputAttributes($('wrap')));
 */
function outputAttributes(ele) {
    var keyValue = new Array(),
        attrName, attrValue, i, len;

    for (i = 0, len = ele.attributes.length; i < len; i++) {
        // ele.attributes[i] 有属性nodeName表示属性名字
        // ele.attributes[i] 有属性nodeValue表示属性值
        attrName = ele.attributes[i].nodeName;
        attrValue = ele.attributes[i].nodeValue;

        // specified表示设置过的属性为true 没有设置过的属性为false
        // 为了兼容IE7和以下
        if (ele.attributes[i].specified) {
            keyValue.push(attrName + "=\"" + attrValue + "\"");
        }
    }
    return keyValue.join(' ');
}

/****************************************************************
 * 2015-07-29备份 charset utf-8
 ****************************************************************/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值