js工具库

1.封装类似typeof()方法，更详细的返回数据类型

function type(target){
	var ret = typeof(target);
	var template = {
		"[object Array]" : "array",
		"[object Object]" : "object",
		"[object Number]" : "number",
		"[object Boolean]" : "boolean",
		"[object String]" : "string",
	}
	if(target === null) {
		return "null";
	}else if(ret == "object"){
		var str = Object.prototype.toString.call(target);
		return template[str];
	}else{
		return ret;
	}
}

2.获取字符串字节长度

function retBytes(str){
	var num = str.length;
	for (var i = 0; i < str.length; i++) {
		if(str.charCodeAt(i)>255){
			num++;
		}
	}
	return num;
}

3.给一个有序数组乱序

var arr = [1,2,3,4];
arr.sort(function(){
	return Math.random()-0.5;
})

4.在原型链上封装insertAfter()方法

<div><span></span></div>

var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
Element.prototype.insertAfter = function (targetNode,afterNode){
	var beforeNode = afterNode.nextElementSibling;
	if(beforeNode == null){
		this.appendChild(targetNode);
	}else{
		this.insertBefore(targetNode,beforeNode);
	}
}	
var p = document.createElement('p');
div.insertAfter(p,span);

在span标签后插入p标签。

5.封装兼容性方法，求当前滚动条滚动的距离 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
		}
	}
}

6.封装兼容方法，返回浏览器视口尺寸 getViewportOffset()

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
			}
		}
	}
}

7.给dom对象添加该事件类型的处理函数（兼容性好）

function addEvent(elem,type,handle){
	if(elem.addEventListener){
		elem.addEventListener(type,handle,false);
	}else if(elem.attachEvent){
		elem.attachEvent('on' + type, function(){
			handle.call(elem);
		})
	}else{
		elem['on' + type] = handle;
	}
}
var div = document.getElementsByTagName('div')[0];
addEvent(div,'click',function(){console.log('aaa')})

8.取消冒泡

事件触发顺序：先捕获，后冒泡

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

stopBubble(e);

9.封装阻止默认事件的函数 cancelHandler(event)

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

event.returnValue = false //兼容IE event.preventDefault() // IE9以下不兼容

10.异步加载js

function loadScript(url,callback){
	var script = document.createElement('script');
	script.type = 'text/javascript';
	if(script.readyState){
		script.onreadystatechange = function (){//ie
			if(script.readyState == "complete" || script.readyState == "loaded"){
				callback();
			}
		}        
	}else{
		script.onload = function(){//Safari chrome firefox opera
			callback();
		}
	}
	script.src = url;
	document.head.appendChild(script);
} 
loadScript('demo.js' function(){ test() });

11.拖拽

<div style="width: 100px;height: 100px;background: red;position: absolute;top: 100px;left: 100px;"></div>

function drag(elem){
	elem.addEventListener('mousedown', function (e) {
		var event = e || window.event;
	    var disX = event.clientX - elem.offsetLeft;
	    var disY = event.clientY - elem.offsetTop;
	    document.onmousemove = function (e) {
	    	var event = e || window.event;
	        var left = event.clientX - disX;
	        var top = event.clientY - disY;
	        elem.style.left = left + 'px';
	        elem.style.top = top + 'px';
	    };
	    elem.addEventListener('mouseup', function () {
	        document.onmousemove = null;
	    });
	});
}
var div = document.getElementsByTagName('div')[0];
drag(div)

12.立即执行函数，解决闭包问题

var li = document.getElementsByTagName('li'),
	len = li.length;
for (var i = 0; i < len; i++) {
	(function(i){
		li[i].addEventListener('click',function(){
			console.log(i)
		},false)
	}(i))
}