常见兼容函数封装

为了方便平时的工作，在这里将一些常见的兼容函数封装起来保存，在需要的时候拿来即用。虽然当下有很多工具都帮开发者把这些事情处理得很完美了，但是我个人觉得他们是他们、我是我，我喜欢自己动手做收集一些好玩的东西，比较抵制直接伸手拿别人的成果直接来用。哈哈！

1、给一个DOM对象添加该事件类型的事件处理函数

function addEvent (ele, type, handle) {
	if (ele.addEventListener) {
		ele.addEventListener(type, handle, false);
	} else if (ele.attachEvent) {
		ele.attachEvent('on' + type, function () {
			handle.call(ele);
		})
	} else {
		ele['on' + type] = handle;
	}
}

2、移除DOM事件处理函数

function removeEvent (ele, type, handle) {
	if (ele.removeEventListener) {
		ele.removeEventListener(type, handle, false);
	} else if (ele.detachEvent) { 
		ele.detachEvent('on' + type, handle);
	} else {
		ele['on' + type] = null;
	}
}

3、阻止浏览器事件冒泡

function stopBubble (event) {
	if (event.stopPropagation) {
		event.stopPropagation()
	} else {
		event.cancelBubble = true;
	}
}

4、取消浏览器默认事件

function cancelHandler (event) {
	if (event.preventDefault) {
		event.preventDefault();
	} else {
		event.returnValue = false;
	}
}

5、获取元素的最终样式值

function getStyle (ele, attr) {
	var res = null;
	if(res = ele.currentStyle) {
		res = ele.currentStyle[attr];
	} else {
		res = window.getComputedStyle(ele, null)[attr];
	}
	return parseFloat(res);
}

6、生成随机颜色

function randomColor () {
	var str = '0123456789abcdef';
	var val = '#';
	for (var i = 0; i < 6; i++) {
		val += str[Math.floor(Math.random() * str.length)];
	}
	return val;
}

7、求出字符串中出现最多的字符，并统计出现次数

function maxChar (str) {
	var max = 0;
	var char = '';
	for (var i = 0; i < str.length; i++) {
		var count = str.split(str[i]).length - 1;
		if (count > max) {
			max = count;
			char = str[i];
		} else if (count == max) {
			if (str.split(str[i]).length - 1 == 0) {
				char += str[i];
			}
		}
	}
	console.log('出现最多的字符是' + char + '，出现次数是' + max + '次。');
}

8、求出给定范围之内的质数

function prime (min, max) {
	var arr = [];
	for (var i = min; i <= max; i++) {
		if (i == 1) {
			continue;
		}
		var mark = true;
		for (var j = 2; j < i; j++) {
			if (i % j == 0) {
				mark = false;
				break;
			}
		}
		if (mark) {
			arr.push(i);
		}
	}
	console.log(arr);
}

9、给字符串去重

function noRepeat (str) {
	var newStr = '';
	for (var i = 0; i < str.length; i++) {
		for (var j = i; j < str.length; j++) {
			if (str[i] == str[j]) {
				j = ++i;
			}
		}
		newStr += str[i];
	}
	console.log(newStr);
}

10、数组冒泡

function bubbleSort (arr) {
	var temp = null;
	for (var i = 0; i < arr.length; i++) {
		for (var j = i + 1; j < arr.length; j++) {
			if (arr[i] > arr[j]) {
				temp = arr[i];
				arr[i] = arr[j];
				arr[j] = temp;
			}
		}
	}
	console.log(arr);
}

10、正则表达式处理千分符

function regThousand (str) {
	if (str && (typeof str === 'number' || typeof (str * 1) === 'number')) {
		str = String(str);
		var reg = /(?=(\B)(\d{3})+$)/g;
		var res = str.replace(reg, ',');
		console.log(res);
	}
}

11、获取滚动高度

function getScrollTop () {
	var scrollTop = 0;
	if (document.documentElement && document.documentElement.scrollTop) {
		scrollTop = document.documentElement.scrollTop;
	} else if (document.body) {
		scrollTop = document.body.scrollTop;
	}
	return scrollTop;
}

12、获取当前页面的绝对位置

function getPosition () {
	var postL = document.documentElement.scrollLeft || document.body.scrollLeft;
	var postT = document.documentElement.scrollTop || document.body.scrollTop;
	return {left: postL, top: postT};
}

13、原生AJAX数据交互兼容函数封装

function getData (params) {
	// 创建ajax对象
	var xhr = undefined;
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}

	// 配置请求参数
	var urlPar = '';
	if ((params.method === undefined || params.method === 'GET') && params.data) {
		for (var key in params.data) {
			urlPar += '&' + key + '=' + params.data[key];
		}
		urlPar = '?' + urlPar.substr(1);
	}
	xhr.open(params.method === undefined ? 'GET' : params.method, params.url + urlPar, params.async === undefined ? true : params.async);

	// 设置请求头
	if (['POST', 'PUT'].indexOf(params.method) !== -1) {
		xhr.setRequestHeader('Content-Type', params.contentType === undefined ? 'application/x-www-form-urlencoded' : params.contentType);
	}

	// 格式化待发送数据
	if (!params.method || ['POST', 'PUT'].indexOf(params.method) !== -1 && params.data) {
		var postStr = '';
		for (var key in params.data) {
			postStr += '&' + key + '=' + params.data[key];
		}
		postStr = postStr.substr(1);
		xhr.send(postStr);
	} else {
		xhr.send();
	}

	// 处理请求结果
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4) {
			if (xhr.status === 200 || xhr.status === 304) {
				if (params.success && Object.prototype.toString.call(params.success) === '[object Function]') {
					params.success(JSON.parse(xhr.responseText));
				}
			} else {
				if (params.error && Object.prototype.toString.call(params.error) === '[object Function]') {
					params.error(xhr.responseText);
				}
			}
		}
	}
}

// 以下是本方法的使用方法，仅对GET和POST两种请求做了示范，其它请求方式可参考具体接口说明。

// 新增数据
getData({
	method: 'POST',
	url: 'http://127.0.0.1:9000/addContact',
	contentType: 'application/x-www-form-urlencoded',
	data: {
		user_name: '小笨蛋',
		tel: '18709345627',
		mail: '457455499@qq.com',
		address: '甘肃省庆阳市西峰区'
	},
	success: function (res) {
		console.log(JSON.parse(res));
	}
})

// 删除数据
getData({
	method: 'GET',
	url: 'http://127.0.0.1:9000/delContact',
	data: {
		id: '7',
	},
	success: function (res) {
		console.log(JSON.parse(res));
	}
})

// 修改数据
getData({
	method: 'POST',
	url: 'http://127.0.0.1:9000/updateContact',
	contentType: 'application/x-www-form-urlencoded',
	data: {
		id: '6',
		user_name: '小强强',
		tel: '18709340000',
		mail: '456455999@qq.com',
		address: '甘肃省庆阳市西峰区'
	},
	success: function (res) {
		console.log(JSON.parse(res));
	}
})

// 获取数据
getData({
	method: 'GET',
	url: 'http://127.0.0.1:9000/getContactList',
	success: function (res) {
		console.log(JSON.parse(res));
	}
})

// 搜索数据
getData({
	method: 'GET',
	url: 'http://127.0.0.1:9000/searchContact',
	data: {
		user_name: '强强',
	},
	success: function (res) {
		console.log(JSON.parse(res));
	}
})

14、获取文件的base64位码

function getStream (obj){
	var fileReader = new FileReader();
	var file = obj.files[0];
	var stream = '';
	fileReader.readAsDataURL(file);
	fileReader.onloadend = function(event){
		var e = event || window.event;
		stream = e.target.result;
		console.log(stream);
	}
}

16、累加字符串中mm:ss格式的时间，最终返回结果 h 小时 m 分 s 秒

function handleTime (str) {
	var arr = str.match(/\d\d:\d\d/g);
	var hour = 0;
	var min = 0;
	var sec = 0;
	arr.map(item => {
		min += item.split(':')[0] * 1;
		sec += item.split(':')[1] * 1;
	})
	hour = parseInt((min + parseInt(sec / 60)) / 60);
	min = parseInt(min + parseInt(sec / 60)) % 60;
	sec = sec % 60;
	return '总时长为' + hour + '小时' + min + '分' + sec + '秒。';
}

17、数组去重，元素为基本类型值

function noRepeat (arr) {
	for (var i = 0; i < arr.length; i++) {
		for (var j = i + 1; j < arr.length; j++) {
			if (arr[i] === arr[j]) {
				arr.splice(j, 1);
				j--;
			}
		}
	}
	return arr;
}

18、数组去重，元素为引用类型值【内部有且仅有基本类型值】

function noRepeat (arr) {
	for (var i = 0; i < arr.length; i++) {
		for (var j = i + 1; j < arr.length; j++) {
			var tag = true;
			for (var key in arr[i]) {
				if (arr[i][key] !== arr[j][key]) tag = false;
			}
			if (tag) {
				arr.splice(j, 1);
				j--;
			}
		}
	}
	return arr;
}

19、数组去重排序新方法

function noRepeatSort (arr) {
	if (!arr || arr.constructor !== Array) return;
	var temp = {};
	var res = [];
	for (var i = 0; i < arr.length; i++) {
		temp[arr[i]] = arr[i];
	}
	for (var key in temp) {
		res.push(key * 1);
	}
	return res;
}

20、在原型上封装一个 insertAfter 方法

Element.prototype.inserAfter = function (targetEle, afterEle) {
	var nextEle = afterEle.nextElementSibling;
	if (!nextEle) {
		this.appendChild(targetEle);
	} else {
		this.insertBefore(targetEle, nextEle);
	}
}

21、获取可视区宽高的兼容方法

function getViewSize () {
	if (window.innerWidth) {
		return {
			w: window.innerWidth,
			h: window.inerHeight
		}
	} else {
		if (document.compatMode === 'BackCompat') {
			return {
				w: document.body.clientWidth,
				h: document.body.clientHeight
			}
		} else {
			return {
				w: document.documentElement.clientWidth,
				h: document.documentElement.clientHeight
			}
		}
	}
}

22、人民币小写转大写

function digitUppercase (n) {
    var fraction = ['角', '分'];
    var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
    var unit = [['元', '万', '亿'], ['', '拾', '佰', '仟']];
    var head = n < 0 ? '欠' : '';
    n = Math.abs(n);
    var s = '';
    for (var i = 0; i < fraction.length; i++) {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
    }
    s = s || '整';
    n = Math.floor(n);
    for (var i = 0; i < unit[0].length && n > 0; i++) {
        var p = '';
        for (var j = 0; j < unit[1].length && n > 0; j++) {
            p = digit[n % 10] + unit[1][j] + p;
            n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
    }
    return head + s.replace(/(零.)*零元/, '元')
        .replace(/(零.)+/g, '零')
        .replace(/^整$/, '零元整');
}

23、多维数组转一维数组

function flatten(array) {  
	return array.reduce(function (arr, item) {  
		return (Object.prototype.toString.call(item) === '[object Array]'
			? Array.prototype.push.apply(arr, flatten(item))
			: arr.push(item)
			, arr);
	}, []);
}

24、遍历一个对象中所有不可枚举属性

function getAttr (obj) {
	var temp = {};
	var keys = Object.getOwnPropertyNames(obj);
	for (var i = 0; i < keys.length; i++) {
		temp[keys[i]] = obj[keys[i]];
	}
	return temp;
}

25、input输入框数字输入过滤函数，只需要绑定在oninput方法上即可

function handleInput () {
	var str = this.value;
	var confList = ['-', '.', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
	var pointTimes = 0;
	var lineTimes = 0;
	var newStr = '';
	for (var i = 0; i < str.length; i++) {
		if (confList.indexOf(str[i]) !== -1) {
			if (str[i] === '-' && lineTimes === 0) {
				lineTimes++;
				if (i === 0) newStr += str[i];
			}
			if (str[i] === '.' && pointTimes === 0) {
				pointTimes++;
				if (i === 0) {
					newStr += '0' + str[i];
				} else {
					newStr += str[i];
				}
			}
			if (str[i] !== '-' && str[i] !== '.') {
				newStr += str[i];
			}
		}
	}
	newStr = newStr.replace(/^0+/, '0');
	newStr = newStr.replace(/^0+([1-9])/, '$1');
	if (newStr.split('.').length === 2 && newStr.split('.')[1].length > 2) {
		newStr = newStr.split('.')[0] + '.' + newStr.split('.')[1].substr(0, 2);
	}
	this.value = newStr;
}

26、函数防抖 ES5实现

/**
 * [shakeFun 防抖]
 * @param  {[function]} callBack [回调函数]
 * @param  {[number]} delay    [延迟时间]
 */
function shakeFun (callBack, delay) {
	if (shakeFun.timer) clearTimeout(shakeFun.timer);
	shakeFun.timer = null;
	shakeFun.timer = setTimeout(function () {
		if (callBack && typeof callBack === 'function') {
			clearTimeout(shakeFun.timer);
			shakeFun.timer = null;
			callBack();
		}
	}, delay);
}

27、函数节流 ES5实现

/**
 * [throttleFun 节流]
 * @param  {[function]} callBack [回调函数]
 * @param  {[number]} delay    [延迟时间]
 */
function throttleFun (callBack, delay) {
	if (throttleFun.flag) return;
	if (callBack && typeof callBack === 'function') {
		clearTimeout(throttleFun.timer);
		throttleFun.timer = null;
		throttleFun.flag = true;
		callBack();
	}
	throttleFun.timer = setTimeout(function () {
		throttleFun.flag = false;
	}, delay);
}

28、创建一棵虚拟DOM树

// 创建虚拟DOM结构树
function createVirtualDom (id) {

    var root = null;

    if (typeof id === 'string') {
        root = document.getElementById(id);
    } else {
        root = id;
    }
    
    var vDom = {};

    vDom.node = root.nodeName.toLowerCase();

    var attrs = root.attributes;
    for (var i = 0; i < attrs.length; i++) {
        var attrLab = attrs[i].name;
        vDom[attrLab] = root.getAttribute(attrLab);
    }

    if (root.children.length) {
        vDom.children = [];
        for (var i = 0; i < root.children.length; i++) {        
            vDom.children.push(createVirtualDom(root.children[i]));
        }
    } else {
        vDom.content = root.innerText;
    }

    return vDom;
}