js 工具函数集

• 原生dom

<div>
	<b>
		some text
		<!-- comment -->
		<strong></strong>
		<span></span>
		<em></em>
		<i></i>
	</b>
	<strong>
		<span>
			<time></time>
		</span>
	</strong>
</div>
<script>
	/* 把 div 下面所有的直接子元素节点挑出来，放在数组里面返回，不能用 children */
	function retElementChild(node) {
		var temp = {
			length : 0,
			push : Array.prototype.push,
			splice : Array.prototype.splice
		};
		if (!node) {return temp;}
		var child = node.childNodes,
			len = child.length;
		for (var i = 0; i < len; i ++) {
			if (child[i].nodeType === 1) {
				temp.push(child[i]);
			}
		}
		return temp;
	// // 测试：
	// var b = document.getElementsByTagName('b')[0];
	// var retChild1 = retElementChild(b);
	// console.log(retChild1);		// Object(4) [strong, span, em, i, push: ƒ, splice: ƒ]
	}

	/* 编辑函数，封装 children 功能，解决以前部分浏览器的兼容性问题 */
	Element.prototype.myChildren = function () {
		var child = this.childNodes,
			len = child.length;
			arr = [];
		for(var i = 0; i < len; i ++) {
			if(child[i].nodeType == 1) {
				arr.push(child[i]);
			}
		}
		return arr;
	// // 测试：
	// var b = document.getElementsByTagName('b')[0];
	// var myChildren1 = b.myChildren();
	// console.log(myChildren1);	// (4) [strong, span, em, i]
	}

	/* 封装函数，返回元素 e 的第 n 层祖先元素 */
	function retParent(e, n) {
		while(e && n) {
			e = e.parentElement;
			n --;
		}
		return e;
	// // 测试：
	// var time = document.getElementsByTagName("time")[0];	// <i></i>
	// var retParent1 = retParent(time, 2);
	// console.log(retParent1);	// <strong>...</strong>
	// var retParent2 = retParent(time, 6);
	// console.log(retParent2);	// null
	}

	/* 封装函数，返回元素 e 的第 n 个兄弟节点，
	 * 注：n 为正，返回后面的兄弟节点，n 为负，返回前面的，n 为 0，返回自己。
	 */
	function retSibling(e, n) {
		while(e && n) {
			if(n > 0) {
				if(e.nextElemntSibling) {
					e = e.nextElementSibling;
				} else {
					for(e = e.nextSibling; e && e.nodeType != 1; e = e.nextSibling);
				}
				n --;
			} else {
				if(e.previousElementSibling) {
					e = e.previousElementSibling;
				} else {
					for(e = e.previousSibling; e && e.nodeType != 1; e = e.previousSibling);
				}
				n ++;
			}
		}
		return e;
	// // 测试：
	// var em = document.getElementsByTagName('em')[0];
	// var retSib1 = retSibling(em, -2);
	// console.log(retSib1);	// <strong></strong>
	// var retSib2 = retSibling(em, 2);
	// console.log(retSib2);	// null
	}

	/* 封装兼容性方法（哪个浏览器都好用），求滚动轮滚动距离 getScrollOffset() —— 求滚动条的位置 */
	function getScrollOffset() {
		if(window.pageXOffset) {
			return {
				x : window.pageXOffset,
				y : window.pageYOffset
			}
		} else {
			return {
				x : document.body.scrollLeft + document.documentElement.scrollLeft,
				y : document.body.scrollTop + document.documentElement.scrollTop
			}
		}
	// // 测试：
	// console.log(getScrollOffset());
	}

	/* 例求可视区窗口的尺寸。
	 * 注：IE8 及以下不兼容
	 * 注：window.innerWidth/innerHeight 可视区域的宽高 （加上 滚动条宽度 / 高度）
	 */
	function getViewportOffset() {
		if(window.innerWidth) {
			return {
				w : window.innerWidth,
				h : window.innerHeight
			}
		} else {
			if(document.compatMode === "BackCompat") {
				return {
					w : document.body.clientWidth,
					h : document.body.clientHeight
				}
			} else {
				return {
					w : document.documentElement.clientWidth,
					h : document.documentElement.clientHeight
				}
			}
		}
	// // 测试：
	// console.log(getViewportOffset());
	}
</script>

• 纯js

/* 深度克隆对象 */
function deepClone(o, t) {
	t = t || {};
	for (var k in o) {
		if (o.hasOwnProperty(k)) {	// 排除原型链的非自定义属性
			if (o[k] !== null && typeof(o[k]) == 'object') {
				t[k] = Object.prototype.toString.call(o[k]) == '[object Array]' ? [] : {} ;
				deepClone(o[k], t[k]);
			} else {
				t[k] = o[k];
			}
		}
	}
	return t;
//	深度克隆测试
// 	var a = {
// 		bb : 'bbv',
// 		cc : [4,5,6],
// 		dd : {
// 			eee : 'eeev',
// 			fff : [
// 				7,
// 				{
// 					gggg : 'ggggv'
// 				},
// 				9
// 			]
// 		}
// 	}
// 	var c = deepClone(a);
// 	c.cc[1] = 3;	// 5 -> 3
// 	console.log(c.cc[1]);	// 3
// 	console.log(a.cc[1]);	// 5	// 独立于原对象
}

/* 变量类型细分 */
function type(t) {
	var temp = {
		'[object Array]' : 'array',
		'[object Object]' : 'object',
		'[object Number]' : 'number object',
		'[object Boolean]' : 'boolean object',
		'[object String]' : 'string object'
	}
	if (t === null) {return 'null';}
	if (typeof(t) == 'object') {	// 数组 or 对象 or 包装类
		var str = Object.prototype.toString.call(t);
		return temp[str];
	}
	return typeof(t);	// Number, String, Boolean, undefined, function
	// 测试：
	// undefined、null、123、'123'、'ds'、true、NaN、Infinity、function xhuiowes() {}、
	// []、{}、new Object、new Number(123)、new String('475')、new Boolean(true)
}

/* 数组去重 */
Array.prototype.unique = function (diff) {	// 需要引用type函数
	var arr = [],
		len = this.length;
	if (diff) {	// 传true，代表区分 undefined & "undefined"。。。
		var temp = {
			"string" : {},
			"else" : {}
		};
		for (var i = 0; i < len; i ++) {
			// console.log(type(this[i]));
			if (type(this[i]) == "string") {
				if (!temp["string"][this[i]]) {
					temp["string"][this[i]] = "zhanwei";
					arr.push(this[i]);
				}
			} else {
				if (!temp["else"][this[i]]) {
					temp["else"][this[i]] = "zhanwei";
					arr.push(this[i]);
				}
			}
		}
	} else {
		var temp = {};
		for (var i = 0; i < len; i ++) {
			if (!temp[this[i]]) {
				temp[this[i]] = "zhanwei";
				arr.push(this[i]);
			}
		}
	}
	return arr;
	// // 测试：
	// var ar = [1,2,2,3,3,3,4,"4",4,"true",true,"true",false,"false",false,"false",null,"null",null,"null","undefined",undefined,"undefined",undefined];
	// var ar_true = ar.unique(true);
	// console.log(ar_true);
	// // [1, 2, 3, 4, "true", false, null, "undefined"]
	// var ar_false = ar.unique();
	// console.log(ar_false);
	// // [1, 2, 3, 4, "4", "true", true, false, "false", null, "null", "undefined", undefined]
}