日常站点开发常用到的几个JavaScript方法

获取图片原始宽高:

/**
*img: DOM图片对象
*fn: 回调方法
*fnErr: 图片错误回调
*/
function getImgNaturalDimensions(img, fn, fnErr) {
    if (img.naturalWidth !== undefined) {
        var nWidth = img.naturalWidth;
        var nHeight = img.naturalHeight;
        fn(nWidth, nHeight);
    } else {
        var _image = new window.Image();
        _image.onload = function() {
            if (typeof fn == "function") {
                fn(_image.width, _image.height);
            }
        };
        _image.onerror = function() {
            if (typeof fnErr == "function") {
                fnErr();
            }
        };
        _image.src = img.src;
    }
}

载入图片错误处理，通常用于当图片载入错误时显示默认图(需jQuery)

function loadIconError(el) {
    var src = $(el).attr("data-original-src");
    if (!src) {
        src = $(el).attr("src").replace(/_(\d)\d0x(\1)\d0/i, "");
    }
    var src404 = $(el).attr("data-404-src");
    if (!src404) {
        src404 = prefix + "css/v2/404/404-pic.png";
    }
    if ($(el).width() === $(el).height()) {
        src404 = prefix + "css/v2/404/404-pic-logo.png";
    }
    if (src) {
        var _image = new window.Image();
        _image.src = src;
        _image.onload = function() {
            $(el).attr("src", src);
        };
        _image.onerror = function() {
            $(el).removeAttr("onerror").attr("src", src404);
        };
    } else {
        var _image = new window.Image();
        _image.src = src404;
        _image.onload = function() {
            $(el).attr("src", src404);
        };
        _image.onerror = function() {
            $(el).removeAttr("onerror").attr("src", src404);
        };
    }
}

图片自适应盒子宽高(需jQuery),配合getImgNaturalDimensions一起使用。通常需要为image设置一个包裹容器，并且设置包裹容器的css（position:relative,overflow:hidden）。

function resizeImage(el) {
    // 延迟到DOMCONTENTLOADED后执行，修复无法获取到父元素宽高问题
    $(function() {
        var cssw = $(el).parent().width();
        var cssh = $(el).parent().height();
        (function(img, cssw, cssh) {
            getImgNaturalDimensions(img, function(rw, rh) {
                var ratio_w = cssw / rw;
                var ratio_h = cssh / rh;
                var ratio = 0,
                    aw = 0,
                    ah = 0;
                ratio = Math.max(ratio_w, ratio_h);
                aw = rw * ratio;
                ah = rh * ratio;
                var max_w = $(img).css("max-width");
                if (max_w != "none") {
                    max_w = parseFloat(max_w);
                    if (aw > max_w) {
                        aw = max_w;
                    }
                }
                var max_h = $(img).css("max-height");
                if (max_h != "none") {
                    max_h = parseFloat(max_h);
                    if (ah > max_h) {
                        ah = max_h;
                    }
                }
                var left = (aw - cssw) / 2;
                var top = (ah - cssh) / 2;
                var marginTop = -top + "px";
                var cssDisplay = "block";
                if ($(img).hasClass("imgfixhidden")) {
                    cssDisplay = "hidden";
                }
                $(img).css({
                    width: aw + "px",
                    height: ah + "px",
                    position: "absolute",
                    marginLeft: -left + "px",
                    marginTop: marginTop,
                    display: cssDisplay
                });
            });
        })(el, cssw, cssh);
    });
}

判断手机浏览器：

var ua = window.navigator.userAgent;
var browsers = {
baidu: ua.indexOf("baiduboxapp") > -1,//手机百度
qq: ua.indexOf('mqqbrowser') > -1,//QQ浏览器
uc: ua.indexOf('ucbrowser') > -1,//UC浏览器
safari: ua.indexOf('safari') > -1 &&ua.indexOf('mqqbrowser')==-1&&ua.indexOf('ucbrowser')==-1 && ua.indexOf('crios') === -1,//Safari浏览器
chrome: (ua.indexOf('chrome') > -1 || ua.indexOf('crios') > -1 ) &&ua.indexOf('mqqbrowser')==-1&&ua.indexOf('ucbrowser')==-1//chrome浏览器
}

判断浏览器平台：

window.browser = {
    versions: function() {
        var u = navigator.userAgent,
            app = navigator.appVersion;
        return { //移动终端浏览器版本信息 
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
};

浏览器滑动到底部，自动加载(需jQuery)：

var scrollToBottom = (function() {
    var scrollCB = function scrollCB() {
        var scrollTop = $(window).scrollTop();
        var objBottom = $(this.myScroller).height() + $(this.myScroller).offset().top; //控件的高+控件距离
        var winHeight = window.innerHeight ? window.innerHeight : $(window).height();
        var scrollHeight = scrollTop + winHeight; //卷去的高度+浏览器的可视高度
        if (objBottom < scrollHeight + 50) {
            this.myScrollCb();
        }
    }

    var bindScroll = function bindScroll() {
        var self = this;
        $(window).on('scroll', function() { self.scrollCB() });
    }

    var unbindScroll = function unbindScroll() {
        $(window).unbind('scroll');
    }

    return {
        myScroller: '',
        myScrollCb: null,
        scrollCB: scrollCB,
        bindScroll: bindScroll,
        unbindScroll: unbindScroll,
        init: function(cb) {
            //this.myScroller = scroller;
            this.myScrollCb = cb;
            this.bindScroll();
        }
    }
})();
var scrollToBottom.init(function(){
    console.log('Comes to Bottom');
});

格式化日期：

/**
 * 格式化日期
 * yyyy MM dd hh mm ss
 * formatDate('yyyy-MM-dd hh:mm:ss')    ->  2017-07-04 12:13:20
 * @param  {String}   format        格式化字符串
 * [@param  {Number}   dateTimestamp 需要格式化的时间戳(可选)] 
 * @return {String}                 格式化后的日期
 */
function formatDate(format, dateTimestamp){
    var date = dateTimestamp ? new Date(dateTimestamp) : new Date();
    var fillZero = function(num){if (num<10) {return '0'+num}return num;}
    return format.replace(/yyyy/,date.getFullYear())
                    .replace(/MM/,fillZero(date.getMonth()+1))
                    .replace(/dd/,fillZero(date.getDate()))
                    .replace(/hh/,fillZero(date.getHours()))
                    .replace(/mm/,fillZero(date.getMinutes()))
                    .replace(/ss/,fillZero(date.getSeconds()));
}

获取到地址栏中的搜索字段:

function getSearch(name){
    var search = window.unescape(window.location.search.substr(1));
    var regExp = new RegExp(name+'=([^&]*)');
    var matches = regExp.exec(search);
    if(matches){
        console.log(matches);
        return matches[1];
    }
    return null;
}

除掉字符串两端空格:

function trim(str){
    return str.replace(/^\s+|\s+$/g,'');
}

复制文本

function selectTextToCopy(selector) {
    var text = document.querySelector(selector),
        range,
        selection;

    if (window.getSelection) { //Firefox Chrome Safari
        text.setAttribute("contenteditable", true);
        //获取Selection 对象，表示用户选择的文本范围或光标的当前位置。
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
        //IE9-不支持textContent
        makeSelection(0, text.firstChild.textContent.length, 0, text.firstChild);
    } else {
        return alert("浏览器不支持长按复制功能");
    }
}

function makeSelection(start, end, child, parent) {
    var range = document.createRange();
    range.setStart(parent.childNodes[child] || parent, start);
    range.setEnd(parent.childNodes[child] || parent, end);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

表单序列化

function serializeForm(form) {
    if (!form || form.nodeName.toUpperCase() !== 'FORM') {
        return;
    }
    var elements = form.elements,
        result = [];
    for (var i = 0; i < elements.length; i++) {
        var field = elements[i];
        var fieldName = field.name;
        var fieldType = field.type;
        if (field.disabled || !fieldName) {
            continue;
        }
        switch (fieldType) {
            case 'text':
            case 'password':
            case 'hidden':
            case 'textarea':
                result.push(fieldName+'='+field.value);
                break;
            case 'checkbox':
            case 'radio':
                if (field.checked) {
                    result.push(fieldName+'='+field.value)
                }
                break;
            case 'select-one':
            case 'select-multiple':
                var options = field.options;
                for(var j = 0;j<options.length;j++) {
                    if (options[j].selected) {
                        result.push(fieldName+'='+options[j].value)
                    }
                }
                break;
            case 'file':
            case 'submit': 
            default:
                break;
        }
    }
    return result.join('&');
}

DOM事件处理工具

var eventUtil = {
    getEvent: function(e) {
        return e || window.event;
    },
    getTarget: function(e) {
        return e.target || e.srcElement;
    },
    preventDefault: function(e) {
        if (e.preventDefault) {
            e.preventDefault();
        } else if ('returnValue' in e) {
            e.returnValue = false;
        }
    },
    stopPropagation: function(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        } else if('cancelBubble' in e) {
            e.cancelBubble = true;
        }
    },
    on: function(ele,type,handler) {
        if (ele.addEventListener) {
            ele.addEventListener(type,handler,false);
            return handler;
        } else if(ele.attachEvent) {
            function proxyHandler(e) {
                return handler.call(ele,e);
            }
            ele.attachEvent('on'+type,proxyHandler);
            return proxyHandler;
        }
    },
    off: function(ele,type,handler) {
        if (ele.removeEventListener) {
            ele.removeEventListener(type,handler,false);
            return handler;
        } else if(ele.detachEvent) {
            ele.detachEvent('on'+type,handler);
        }
    },
    once: function(ele,type,handler) {
        function proxyHandler(e) {
            handler.call(ele,e);
            eventUtil.off(ele,type,arguments.callee);
        }

        if (ele.addEventListener) {
            ele.addEventListener(type,proxyHandler,false);
            return proxyHandler;
        } else if(ele.attachEvent) {
            ele.attachEvent('on'+type,proxyHandler);
            return proxyHandler;
        }
    }
};

参考网址:
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getSelection
https://developer.mozilla.org/en-US/docs/Web/API/Range