日常站点开发常用到的几个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();
(
eb94
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